gulp&webpack

目的

1. 搞清楚什么是包管理工具、构建工具、打包工具，它们分别有什么用。
2. 了解gulp、webpack配置文件，知道它们在做什么。

一、前端工具

1.1 包管理工具

• npm
• yarn（优点：速度更快、yarn.lock）

image

1.2 构建工具

说到构建工具，我们往往会在前面加上"自动化"三个字，因为构建工具就是用来让我们不再做机械重复的事情，解放我们的双手。(代码压缩、编译sass和less、自动加客户端前缀、编译es6)

• gulp
• grunt

1.3 打包工具

image

把一些依赖关系错综复杂的模块，归类整理打包成需要的静态资源。

1.3.1 为什么需要模块化？

• 全局作用域污染。
• 没有一个规范的方法，可以在一个脚本中引入另一个脚本。

1.3.2 什么是模块化？

详细介绍

• CommonJS 规范

var gulp =require('require');

module.exports={
    aaa:
}

• AMD 规范

define("module", ["dep1", "dep2"], function(d1, d2) {
  return someExportedValue;
});

require(["module", "../file"], function(module, file) { /* ... */ });

• CMD 规范

define(function(require, exports, module) {
  var $ = require('jquery');
  var Spinning = require('./spinning');
  exports.doSomething = ...
  module.exports = ...
})

• ES6

import "jquery";
import ReactDOM from 'react-dom';
import {render} from 'react-dom';
export function doStuff() {};
export default foo;

二、gulp

基于流的自动化构建工具。

gulp.src(globs[, options])

输出符合所提供的匹配模式（glob）或者匹配模式的数组（array of globs）的文件。 将返回一个 Vinyl files 的 stream 它可以被 piped 到别的插件中。

gulp.dest(path[, options])

能被 pipe 进来，并且将会写文件。并且重新输出（emits）所有数据，因此你可以将它 pipe 到多个文件夹。如果某文件夹不存在，将会自动创建它。

gulp.task(name[, deps], fn)

定义一个任务

gulp.watch(glob [, opts], tasks)

监视文件，并且可以在文件发生改动时候做一些事情。

三、webpack

webpack 是一个现代的 JavaScript 应用程序的模块打包器(module bundler)。

3.1 Hello world：

node_modules/.bin/webpack {入口文件} {输出地址}
//webpack app/index.js dist/bundle.js

3.2 四个核心概念

详细介绍

• 入口（Entry）
• 出口（Output）
• 加载器（Loaders）
  • babel 用于转换es6/react等 阮一峰教程
  • css-loader/style-loader
• 插件（Plugins）

3.3 webpack1和webpack2差异

差异

扩展

• 开启实时编译刷新的服务器(webpack-dev-server)
• 根据模版生成html(HtmlWebpackPlugin)
• postcss自动加客户端前缀(autoprefixer)
• 区分开发和部署配置文件

资料

• webpack1和模块化入门文档
• 入门Webpack，看这篇就够了
• webpack2中文文档
• webpack2英文文档
• 阮一峰ES6

谢谢