与gulp的第一次亲密接触

很早之前就看到老师的项目或同学的作业使用gulp了，但自己比较懒，一直不愿意去看一看gulp这个小家伙。但是，出来混迟早是要还的^_^，前端构建如果没有自动化，做起SPA来效率极低。前端构建自动化的一些工具挺多的，以我的菜鸟水平，就先来接触一下gulp吧。

为什么使用gulp？

这是一个看起来多余但却很重要的问题。在学习一样东西前，我们必须先知道自己为什么要学习她。前面已经说了，在前端构建如果不使用自动化工具，那么你只能呵呵了。gulp是前端开发过程中对代码进行构建的工具，是自动化项目的构建利器；她不仅能对网站资源进行优化，而且在开发过程中很多重复的任务能够使用正确的工具自动完成；使用她，我们不仅可以很愉快的编写代码，而且大大提高我们的工作效率。

一个最简单的尝试

“纸上得来终觉浅”，要想真的把东西学进去，动手试一试做个简单的demo不失为一个好方法。

先给一个整体的思路吧：安装nodejs -> 全局安装gulp -> 项目安装gulp以及gulp插件 -> 配置gulpfile.js -> 运行任务。

1、前两个步骤相信大多数人早就配置好的，那么就从第三个步骤开始：项目安装gulp以及gulp插件。

（1）在控制台输入npm init，为你的demo初始化一个package.json管理npm包。

（2）在控制台输入npm install gulp --save，安装gulp的npm包并保存依赖。

执行完这两步，文件目录如下：

2、接下来是配置gulpfile.js。

在开始编写gulpfile.js前，我们先要做一些准备工作。

（1）模拟一些待处理的文件。比如，我在新建的src目录下随意编写了一个jade文件，希望gulp能把它编译为html文件，并放在.temp目录下。

（2）在命令行输入npm install gulp-jade --save，安装好编译jade的包并保存依赖。

完成这些工作后，我们终于可以开始写一个拥有最简单功能的gulpfile.js了。举个例子，在根目录新建一个gulpfile.js文件，编写代码如下：

// part1: 导入gulp工具包
var gulp = require('gulp');
var jade = require('gulp-jade');
 
// part2: 定义一个任务，任务名为test
gulp.task('test', function () {
    gulp.src('src/index.jade')  // 待处理文件的路径'src/index.jade'
        .pipe(jade())  // 该任务调用jade模块
        .pipe(gulp.dest('.temp'));  // 处理完后文件在'.temp'路径下生成index.html
});

// part3: 执行任务（定义默认执行任务，指定[]中第一个参数为默认任务，后面的为其他任务）
gulp.task('default',['test']);

3、运行任务。

在命令行输入gulp，默认任务将会被运行。若想要单独执行特定的任务，请输入 gulp <task> <othertask>即可。

在这个demo中，我执行完gulp后控制台输出如下：

demo的目录结构变为：

告诉你一个好消息

当我第一次看到gulp文档的时候，我是非常欣喜的！因为她的方法非常的少，比如task，run，watch，src，pipe，dest。但却能实现丰富而实用的功能，成为我们自动化项目的构建利器。除了demo上使用到的task、src、pipe、dest，还有watch：监视文件，并且可以在文件发生改动的时候自动化执行一些事情。在上面的例子中稍做修改体验一下：

当jade文件改变时，会自动编译出新的html。

// part1: 导入gulp工具包
var gulp = require('gulp');
var jade = require('gulp-jade');

var path = 'src/*.jade';

// part2: 定义一个任务，任务名为test
gulp.task('test', function () {
    gulp.src('src/index.jade')  // 待处理文件的路径'src/index.jade'
        .pipe(jade())  // 该任务调用jade模块
        .pipe(gulp.dest('.temp'));  // 处理完后文件在'.temp'路径下生成index.html
});

gulp.task('watch', function() {
    gulp.watch(path, ['test']);
});

// part3: 执行任务（定义默认执行任务，指定[]中第一个参数为默认任务，后面的为其他任务）
gulp.task('default',['test','watch']);

控制台输出如下（目标文件path改变时，重新执行test任务）：

[01:21:38] Using gulpfile ~/Desktop/gulp-learn/gulpfile.js
[01:21:38] Starting 'test'...
[01:21:38] Finished 'test' after 9.74 ms
[01:21:38] Starting 'watch'...
[01:21:38] Finished 'watch' after 9.71 ms
[01:21:38] Starting 'default'...
[01:21:38] Finished 'default' after 14 μs
[01:21:44] Starting 'test'...
[01:21:44] Finished 'test' after 4.3 ms
[01:22:03] Starting 'test'...
[01:22:03] Finished 'test' after 1.41 ms

另外，在开发时，使用watch搭配browser-sync，搭建一个临时服务器实例非常好用！

gulp丰富的功能有赖于其支持丰富的插件和工具库。比如常用的：gulp-jade、gulp-sass分别将jade、sass编译为html和css；gulp-uglify用于压缩js；gulp-clean用于清除目录文件；gulp-changed只编译修改过的文件，加快速度……

今天先初步学习了gulp，相信gulp的精彩将在以后的学习过程中慢慢体会出来O(∩_∩)O~~

资料传送门： http://www.gulpjs.com.cn/

https://github.com/gulpjs/gulp/blob/master/docs/README.md