Gulp

Gulp 是什么？

gulp是一个基于流的构建工具，可以自动执行指定的任务，简洁且高效

Gulp 能做什么？

开发环境下，想要能够按模块组织代码，监听实时变化
css/js预编译，postcss等方案，浏览器前缀自动补全等
条件输出不同的网页，比如app页面和mobile页面
线上环境下，我想要合并、压缩 html/css/javascritp/图片，减少网络请求，同时降低网络负担
等等...

安装 Gulp

npm install -g gulp     //全局安装
npm install --save-dev gulp //安装到当前项目并在package.json中添加依赖

核心 API 介绍

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

task()方法用于定义任务，传入名字、依赖任务数组、函数即可，gulp会先执行任务数组，结束后调用定义的函数，可以通过此手段控制任务的执行顺利。

例子：要定义一个任务build来执行css、js、imgs这三个任务，我们可以通过指定一个任务数组而不是函数来完成。

gulp.task('build', ['css', 'js', 'imgs']);

gulp.src src(globs[, options])

src()方法输入一个glob或者glob数组，然后返回一个可以传递给插件的数据流

Gulp使用node-glob来从你指定的glob里面获取文件：

app.js 精确匹配
*.js 能匹配js后缀的文件
**/*.js 能匹配多级目录下的js文件（也包含当前目录下）
!js/app.js 精确排除

例子：js目录下包含了压缩和未压缩的js文件，我们想要压缩还没有被压缩的文件

gulp.src(['js/**/*.js', '!js/**/*.min.js'])

gulp.dest dest(path[, options])

dest()方法用来写文件，第一个参数表示最终输出的目录名。注意，它无法允许我们指明最终输出的文件名，只能指定输出文件夹名，而且在文件夹不存在的情况下会自动创建。

例子：把开发目录src下的js文件输出到部署目录dist下

gulp.src('src/**/*.js')
  .pipe(gulp.dest('dist'))

gulp.watch watch(globs[, opts], cb) or watch(globs[, opts], tasks)

watch()方法可以监听文件，它接受一个glob或者glob数组以及一个任务数组来执行回调
// 当templates目录下的模板文件发生变化，自动执行编译任务

gulp.task('watch', function (event) {
  gulp.watch('templates/*.tmpl.html', ['artTemplate']);
  console.log('Event type: ' + event.type); // added, changed, or deleted   
  console.log('Event path: ' + event.path); // The path of the modified file
});

Gulp.watch()的另一个非常好的特性是返回watcher对象

watcher对象可以监听很多事件:
- change 文件变化时触发
- end 在watcher结束时触发
- error 在出现error时触发
- ready 在文件被找到并正被监听时触发
- nomatch 在glob没有匹配到任何文件时触发
Watcher对象也包含了一些可以调用的方法：
- watcher.end() 停止watcher
- watcher.files() 返回watcher监听的文件列表
- watcher.add(glob) 将与指定glob相匹配的文件添加到watcher（也接受可选的回调当第二个参数）
- watcher.remove(filepath) 从watcher中移除个别文件

任务会让所有的文件匹配js/*.js，并且执行JSHint，然后打印输出结果，取消文件缩进，最后把他们合并起来，保存为build/app.js，整个过程如下图所示：

var gulp = require('gulp'),
    jshint = require('gulp-jshint'),
    uglify = require('gulp-uglify'),
    concat = require('gulp-concat');

gulp.task('js', function () {
   return gulp.src('js/*.js')
      .pipe(jshint())
      .pipe(jshint.reporter('default'))
      .pipe(uglify())
      .pipe(concat('app.js'))
      .pipe(gulp.dest('build'));
});

Webpack

webpack 是什么？

webpack是模块化管理工具，使用webpack可以对模块进行压缩、预处理、按需打包、按需加载等。

webpack 有哪些重要特征？

插件化：webpack本身非常灵活，提供了丰富的插件接口。基于这些接口，webpack开发了很多插件作为内置功能。
速度快：webpack使用异步IO以及多级缓存机制。所以webpack的速度是很快的，尤其是增量更新。
丰富的Loaders：loaders用来对文件做预处理。这样webpack就可以打包任何静态文件。
高适配性：webpack同时支持AMD/CommonJs/ES6模块方案。webpack会静态解析你的代码，自动帮你管理他们的依赖关系。此外，webpack对第三方库的兼容性很好。
代码拆分：webpack可以将你的代码分片，从而实现按需打包。这种机制可以保证页面只加载需要的JS代码，减少首次请求的时间。
优化：webpack提供了很多优化机制来减少打包输出的文件大小，不仅如此，它还提供了hash机制，来解决浏览器缓存问题。
开发模式友好：webpack为开发模式也提供了很多辅助功能。比如SourceMap、热更新等。
使用场景多：webpack不仅适用于web应用场景，也适用于Webworkers、Node.js场景

webpack 如何最佳配置？

webpack官方提供的配置方法是通过module.exports返回一个json，但是这种场景不灵活，不能适配多种场景。
比如要解决：production模式和development模式，webpack的配置是有差异的，大致有两种思路。
1、两份配置文件webpack.config.production.js/webpack.config.development.js，然后不同场景下，使用不同的配置文件。
2、通过module.exports返回函数，该函数能接受参数。

相对来说，第一种更简单，但是重复配置多；第二种更灵活，推荐第二种方式。
那么，按返回函数的方式的配置代码架子如下：

module.exports = function(env) {
    return {
        context: config.context,
        entry: config.src,
        output: {
            path: path.join(config.jsDest, project),
            filename: '[name].js',
            chunkFilename: '[name].[chunkhash:8].js',
            publicPath: '/assets/' + project + '/'
        },
        devtool: "eval",
        watch: false,
        profile: true,
        cache: true,
        module: {
            loaders: getLoaders(env)
        },
        resolve: {
            alias: getAlias(env)
        },
        plugins: getPlugins(env)
    };
}

其中关键的配置这儿简单介绍如下，后续的系列博客会根据每个点详细介绍。
context：上下文。
entry：入口文件，是所有依赖关系的入口，webpack从这个入口开始静态解析，分析模块之间的依赖关系。
output：打包输出的配置。
devtools：SourceMap选项，便于开发模式下调试。
watch：监听模式，增量更新，开发必备！
profile：优化。
cache：webpack构建的过程中会生成很多临时的文件，打开cache可以让这些临时的文件缓存起来，从而更快的构建。
module.loaders：如前文介绍，loaders用来对文件做预处理。这样webpack就可以打包任何静态文件。
resolve.alias：模块别名，这样可以更方便的引用模块。
plugins：如前文介绍，webpack的一些内置功能均是以插件的形式提供。

webpack和gulp的区别

gulp是基于流的构建工具：all in one的打包模式，输出一个js文件和一个css文件，优点是减少http请求，万金油方案。
webpack是模块化管理工具，使用webpack可以对模块进行压缩、预处理、打包、按需加载等。

相关面试题

1. 说一下gulp？

gulp是一种自动化构建工具，前端工程化开发的一种工具，增强开发流程，使用方便；

npm 安装，新建 gulpfile.js, 导入 gulp 模块，let gulp = require('gulp')

通过 default 任务去定义工作流，最后在终端执行 gulp 来进行自动化操作

npm install gulp-cli -g  //npm全局安装Gulp
npm init  //在项目根目录下创建 package.json文件
npm install gulp -save-dev  //安装 Gulp 依赖包

在项目根目录下，创建 gulpfile.js 文件：

let gulp = require("gulp");
gulp.task("default", function() { //定义名称为default的任务
    console.log("this is default task"); //此处定义default任务处理过程
});

api很简单只有四种

gulp.task 创建任务：参数任务名称，前置任务数组，回调函数
gulp.src 寻找文件：通过路径找到一个或多个文件
gulp.dest 输出到指定目录：如果没有就新建一个
gulp.watch 监听文件变化，执行任务
pipe具体不清楚，总之，除了gulp.src之外，其他执行条件都要放在.pipe()中

webpack 和 gulp对比

Gulp 就是为了规范前端开发流程，实现前后端分离、模块化开发、版本控制、文件合并与压缩、mock数据等功能的一个前端自动化构建工具。说的形象点，“Gulp就像是一个产品的流水线，整个产品从无到有，都要受流水线的控制，在流水线上我们可以对产品进行管理。” 另外，Gulp是通过task对整个开发过程进行构建。

Webpack 是当下最热门的前端资源模块化管理和打包工具。它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源。还可以将按需加载的模块进行代码分隔，等到实际需要的时候再异步加载。通过 loader的转换，任何形式的资源都可以视作模块，比如 CommonJs 模块、AMD 模块、ES6 模块、CSS、图片、JSON、Coffee、LESS 等。

Gulp和Webpack功能实现对比：从基本概念、启动本地Server、sass/less预编译、模块化开发、文件合并与压缩、mock数据、版本控制、组件控制八个方面对Gulp和Webpack进行对比。

基本概念

首先从概念上，我们可以清楚地看出，Gulp 和 Webpack 的侧重点是不同的。

Gulp 侧重于前端开发的整个过程的控制管理（侧重于流水线），我们可以通过给 Gulp 配置不同的 task（通过 Gulp 中的 Gulp.task() 的方法的配置，比如启动 serve、sass/less 预编译、文件的合并压缩等等）来让 Gulp 来实现不同的功能，从而构建整个前端开发的流程。

Webpack 有人称之为模块打包机，由此可以看出 Webpack 更侧重于模块打包，当然我们可以把开发中的所有资源（图片，js文件，css文件等）都可以看成模块。最初Webpack本身就是为了前端 js 代码打包而设计的，后来被扩展到其他资源的打包处理。Webpack 是通过loader（加载器）和 pluging（插件）对资源进行处理的。

另外我们知道 Gulp 是对整个过程进行控制，所以在其配置文件（gulpfile.js）中配置的每一个task 对该项目中该 task 配置路径下的所有资源都可以管理。

模块化开发

所谓模块化开发，我的理解就是，在开发的时候，把不同的开发文件按照他的具体用途进行分类管理，在使用的时候利用 CommonJ、AMD、CMD 将这些资源文件按照一定的要求进行压缩耦合再加上版本控制处理。

可能这样的理解或者说发值得商榷，但是个人觉得模块化就是对内容的管理，是为了了解耦合。

webpack打包文件太大怎么办?

webpack 把我们所有的文件都打包成一个 JS 文件，这样即使你是小项目，打包后的文件也会非常大。可以从去除不必要的插件，提取第三方库，代码压缩，代码分割，设置缓存几个方面着手优化。