gulp使用指南

前端开发

gulp是非常常用的前端自动化构建工具，通过其官方提供的API以及借助其强大的插件生态，可自动化实现很多常见的任务。

由于gulp是基于node.js的，因此其基本形式是stream流。

一、环境配置与基本使用方法

如果没有配置node.js环境，则先需要安装好node.js。

1、全局安装gulp：

npm install -g gulp

2、到项目根目录下，安装gulp：

npm install gulp --save-dev

此时在项目根目录下，会出现node_module文件夹（里面是我们所需要的何种依赖包），以及package.json文件（配置文件）。

3、在项目根目录下创建一个名为gulpfile.js的文件：

var gulp = require('gulp');
gulp.task('myTask', function() {
  // 将你的默认的任务代码放在这
});

值得注意的是，该文件的文件名必须为gulpfile.js，其他文件名将无法识别。

4、运行gulp
在命令行中输入gulp myTask：

$ gulp myTask

此时，命名为myTask的任务会被执行。

如果使用以下命令行：

$ gulp

此时会执行名为default的默认任务，如果没有定义该任务，则会报错。

二、插件的使用

1. 插件的介绍与安装

gulp有强大的插件生态，因此有很多插件可供我们使用，下面列举一些常见的插件：

• html压缩（gulp-minify-html）
• CSS压缩（gulp-minify-css）
• JS压缩（gulp-uglify）
• 自动添加css前缀（gulp-autoprefixer）
• JS代码检查（gulp-jshint）
• 文件合并（gulp-concat）
• 编译Sass（gulp-sass）
• 压缩图片（gulp-imagemin）
• 自动刷新（gulp-livereload）
• 更改gulp的提醒（gulp-notify）

要使用这些插件，需要先安装，安装的方式有两种：

1. 在package.json中直接配置devDependencies依赖项，然后再统一 npm install。
2. 每个依赖包单独安装：

npm install <依赖包名> --save-dev
//如安装css压缩依赖包
npm install gulp-minify-css --save-dev

安装了依赖包后，就可以使用了。

2. 使用插件

进入gulpfile.js文件，require所需要用到的插件。

let gulp = require('gulp'),
    minihtml = require('gulp-minify-html'),
    minifycss = require('gulp-minify-css'),
    minijs = require('gulp-uglify'),
    autocsspre = require('gulp-autoprefixer');
    jshint = require('gulp-jshint'),
    concat = require('gulp-concat'),
    sass = require('gulp-sass'),
    imagemin = require('gulp-imagemin'),
    livereload = require('gulp-livereload'),
    notify = require('gulp-notify');

以压缩html文件为例，新建一个任务：

gulp.task('minify-html',function(){
    gulp.src('public/index.html')
        .pipe(minihtml())
        .pipe(gulp.dest('./build'));
})

运行该任务：

$ gulp minify-html

此时在根目录下，生成了build文件夹，里面有我们压缩过的文件index.html。

解读下这个任务的代码：gulp.src和gulp.dest均为官方的API。简单来说，gulp.src就是引入所需要处理的文件，而gulp.dest为输出数据流文件，如果输出的文件夹不存在，则会自动创建。
所以，上面代码就是先引入在public/文件夹内的html文件，然后 使用pipe管道将数据流向下一步进行处理，通过依赖包的minihtml()进行处理压缩后，输出到build文件内。

处理后的文件比较：
压缩前：

压缩后：

接下来尝试以下例子：

gulp.task('style',function(){
    gulp.src('public/style.sass')
        .pipe(sass().on('error', sass.logError))
        .pipe(autoprefixer())
        .pipe(minifycss())
        .pipe(gulp.dest('./build'))
        .pipe(notify('all done!'))
})

运行该任务后，其过程为将sass文件编译成css文件，然后以流形式将数据传递，加上css前缀，压缩css代码，最后输出到build文件夹中，并返回notify修改后的信息。

系统通知还会弹出一个小提示，真是一颗赛艇

现在我们有了两个任务，如果我们需要执行这两个任务，就需要gulp两次，这样未免太麻烦。所以我们使用gulp.start同时执行多个任务：

gulp.task('default',function(){
    gulp.start('minifyhtml','style');
})

前面提到，名为default的为默认执行任务，因此此时只需

$ gulp

便可以一次执行这两个任务。

另外，gulp官方还提供了监听变化的API，我们对上面的例子进行添加和改造：

gulp.task('watch',function(){
    gulp.watch('public/style.cass',['style']);
})
gulp.task('default',['watch'],function(){
    gulp.start('minifyhtml','style');
})

以上，添加了一个名为watch的新任务，其中使用gulp.watch进行监听，如果该sass文件发生了变化，则执行style任务。
另外，default任务中后面加入了['watch']，查看官方API文档可以知道其用处

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

deps是一个包含任务列表的数组，这些任务会在当前任务运行之前完成。

此时，我们就可以监听sass文件的变化了。

其他插件的使用大同小异，参考github上各插件的使用方法即可。

三、总结

gulp是一个非常方便且容易上手的自动化构建工具，由于gulp基于node.js，利用stream流，可帮助我们快速构建项目，利用最少的官方API以及众多高质量的插件，可帮助我们快速而又简便地实现各种功能。

如果你看到这里，那么恭喜你，你已经掌握了gulp的基本使用方法，并可以完成绝大部分的工作。不过如果想进行插件开发等进阶操作，可参考官方文档orz...

gulp官方中文网站