gulp自动化构建工具（一）：gulp入门

写在前面

最近在学习web前端，刚好学习到gulp构建工具，就顺便写一写笔记，当做一次简单的练手。由于经验缺乏，本文可能在某些地方做得不那么细致和准确，还望大家指正。

gulp介绍

关于gulp构建工具就不多加赘述了，不熟悉的小伙伴可以自行google或者查看gulp的官网

• gulp中文网：https://www.gulpjs.com.cn/
• gulp‘s github：https://github.com/gulpjs/gulp

gulp使用

gulp作为一款可以和grunt抗衡（目前可能已经超过）的构建工具，不仅在前端，对于后端自动化构建也起了很大作用，本文着重介绍gulp在web前端构建的使用。本文参考自gulp中文的API和github仓库的doc文档 。gulp的API少而简单，利于快速学习。gulp是基于node和npm，其中npm是node的管理器。

gulp安装

在安装了node的基础上，安装gulp

1.全局安装gulp

> npm install -g gulp

2.项目根目录下新建package.json文件，package.json文件主要是管理项目的依赖和项目的版本信息等。

> npm init

3.为项目安装gulp包，作为开发依赖保存

> npm install --save-dev gulp

4.查看版本号

> gulp -v

gulp入门

对于gulp入门，我们只需要知道几个基本的API就行了，下面逐一介绍这几个基本的API。

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

gulp.run(tasks.....)   

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

gulp.src(glob)                           

gulp.dest(path[,options])     

作为演示，本文将由简单入手，结合实例，演示gulp自动化构建的魅力。根据官方文档，使用gulp必须先在项目根目录下新建gulpfile.js文件。然后在文件中引入gulp，引入方式和node的引入是一样的。

var gulp = require('gulp');

1. 首先是定义任务task()

既然是自动化构建，自然首先我们需要知道它是怎么跑起来的，gulp是基于一系列的任务构建自动化的。见如下的API，我们使用task便可以创建任务。

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

关于其中的参数介绍，请自己查阅文档。使用task，我们可以开始写gulp的构建程序了。

var gulp = require('gulp');
gulp.task('default',function() {
    console.log('hello, gulp');
});

在CLI下运行gulp

> gulp

我们将看到打印的结果。这个的default指的是默认执行的任务，也就是当我们运行gulp命令是，如果gulp后面不加其他参数，那么就默认执行default，当然，我们也可以为该任务起名为task1，通过以下命令运行gulpfile

> gulp task1

继续这个API的介绍，一个任务A的执行可以依赖其他任务，而且，当执行任务A的时候，会先执行完所有的依赖任务之后，再执行任务A。例如：

gulp.task('default',['task1', 'task2'], function() {
    console.log('hello, gulp');
});
gulp.task('task1', function() {
    console.log('task1');
});
gulp.task('task2', function() {
    console.log('task2');
});

这段代码的运行结果是执行完['task1','task2']后再执行default,需要注意的是，这个的['task1','task2'] 的执行并不是串行执行，而是异步执行。如果我们要实现串行执行，可以写成如下这样：

gulp.task('default',['task1'], function() {
    console.log('hello, gulp');
});
gulp.task('task1', ['task2'], function() {
    console.log('task1');
});
gulp.task('task2', function() {
    console.log('task2');
});

那么，default在执行前需要先执行task1，而task1又依赖task2，所以task2先执行，后task1执行，最后执行default，这样就实现了串行，而实际上，实现任务的串行执行如果这样写的话是很麻烦的，gulp的串行化是可以借助gulp-run-sequence 插件的。

2.第二个要介绍的是run()，顾名思义，我们把上面的代码改一改。

var gulp = require('gulp');

gulp.task('default', function() {
    gulp.run('task1');
    gulp.run('task2');
    console.log('hello, gulp');
});
gulp.task('task1', function() {
    console.log('task1');
});
gulp.task('task2', function() {
    console.log('task2');
});

这样的执行结果是：实现了串行输出，但提示了我们run() has been deprecated(被弃用了的意思？)。显然就是说，虽然run是用来执行任务，但这个API已经被抛弃使用了，建议我们以后也不要使用它，应该使用任务依赖的形式，在一个任务里执行另一些任务。

[01:17:40] Using gulpfile F:\前端开发\js-jq-bs-test\gulpfile.js
[01:17:40] Starting 'default'...
gulp.run() has been deprecated. Use task dependencies or 
gulp.watch task triggering instead.
[01:17:40] Starting 'task1'...
task1
[01:17:40] Finished 'task1' after 322 μs
[01:17:40] Starting 'task2'...
task2
[01:17:40] Finished 'task2' after 463 μs
hello, gulp
[01:17:40] Finished 'default' after

3. 第三个要介绍的是src()

src(path)中的参数path 表示要被处理的文件的路径，可以是正则匹配，也可以是多个文件以数组的形式出现。在项目根目录下新建一个index.html，同时在使用src()时都是配合其他API或方法，其中常见的是pipe(mid)操作，它是一个类管道的操作，参数mid表示经由处理的插件，还有dest(destPath)API,表示将管道的流最终放置到何处。因此，我们可以写出下面的简单使用。

var gulp = require('gulp');

gulp.task('default', function() {
    gulp.run(['task1','task2']);;
    console.log('hello, gulp');
});
gulp.task('task1', function() {
    gulp.src('./index.html')
    /*中间可以经由更多的插件处理*/
    .pipe(gulp.dest('./dest/'));
});
gulp.task('task2', function() {
    console.log('task2');
});

这段代码所做的事情，无非就是将index.html拷贝到dest目录下，当然这算是最简单的应用了。所以到目前为止，我们已经介绍了4个gulp的API，最后一个是watch(),一个很重要的API！

4. watch()实现监听文件改动

我们在调试前端的时候，很讨厌一次改动就要刷新一次浏览器，这样的操作是很费时间的，而gulp的watchAPI就解决了这样的问题，使我们能够专注于代码而不需要动手做其他重复多余的操作。接着上面的index.html，试想如果我们改动了该文件，那么我们可能就需要刷新浏览器来看一下改动后的效果，而实际上，使用watch来监听这样的改动，从而做出指定的动作（自动刷新浏览器或者其他）。

var gulp = require('gulp');

gulp.task('default',['task1', 'watch'], function() {
    console.log('hello, gulp');
});
gulp.task('task1', function() {
    gulp.src('./index.html')
    /*这个可以经由更多的插件处理*/
    .pipe(gulp.dest('./dest/'));
});
gulp.task('watch', function() {
    gulp.watch('./index.html',['task1'])
});

执行这段代码，我们会发现执行停住 了，且停在看watch任务，没错，此时gulp已经开始监听index.html的变化，一旦变化，它就执行执行的task1 任务。这里的task1 也可以是某个回调函数callback.

var gulp = require('gulp');

gulp.task('default',['task1', 'watch'], function() {
    console.log('hello, gulp');
});
gulp.task('task1', function() {
    gulp.src('./index.html')
    /*这个可以经由更多的插件处理*/
    .pipe(gulp.dest('./dest/'));
});
gulp.task('watch', function() {
    gulp.watch('./index.html',function() {
        console.log('changed!');
        gulp.run('task1');//过期的API，不建议使用
    })
});

小结

好了，上面的API如果会使用了，就算是已经在gulp上入门了吧，其他更复杂的任务实现，需要一些优秀的gulp插件来帮助完成，在下一篇文章，我们接着聊聊。