前端构建工具gulp入门教程

本文假设你之前没有用过任何任务脚本（task runner）和命令行工具，一步步教你上手Gulp。不要怕，它其实很简单，我会分为五步向你介绍gulp并帮助你完成一些惊人的事情。那就直接开始吧。

第一步：安装Node

首先，最基本也最重要的是，我们需要搭建node环境。访问 http://nodejs.org ，然后点击大大的绿色的 install 按钮，下载完成后直接运行程序，就一切准备就绪。 npm 会随着安装包一起安装，稍后会用到它。

第二步：使用命令行

也许现在你还不是很了解什么是命令行——OSX中的终端（Terminal），windows中的命令提示符（Command Prompt），但很快你就会知道。它看起来没那么简单，但一旦掌握了它的窍门，就可以很方便的执行很多命令行程序，比如Sass，Yeoman和Git等，这些都是非常有用的工具。

如果你很熟悉命令行，直接跳到步骤四。

为了确保Node已经正确安装，我们执行几个简单的命令。

node -v

回车（Enter），如果正确安装的话，你会看到所安装的Node的版本号，接下来看看npm。

npm -v

这同样能得到npm的版本号。

如果这两行命令没有得到返回，可能node就没有安装正确，尝试重启下命令行工具，如果还不行的话，只能回到第一步进行重装。

第三步：定位到项目

现在，我们已经大致了解了命令行并且知道如何简单使用它，接下来只需要两个简单的命令就能定位到文件目录并看看目录里都有些什么文件。

cd，定位到目录
ls，列出文件列表

建议多敲敲这两个命令，了解文件系统并知道文件都在哪里。

习惯使用了这两个命令后，就要进入我们的项目目录，这个目录各不相同，举个例子，这是我进入我项目目录的命令：

cd /Applications/XAMPP/xamppfiles/htdocs/my-project

成功进入项目目录后，我们开始安装gulp。

第四步：安装gulp

我们已经知道如何使用命令行，现在尝试点新的东西，认识npm然后安装gulp。

NPM是基于命令行的node包管理工具，它可以将node的程序模块安装到项目中，在它的官网中可以查看和搜索所有可用的程序模块。

sudo npm install -g gulp

sudo是linux下的，windows下对应的是runas，用来提升权限。 windows下试试打开管理员命令窗口，去掉sudo运行。

sudo是以管理员身份执行命令，一般会要求输入电脑密码
npm是安装node模块的工具，执行install命令
-g表示在全局环境安装，以便任何项目都能使用它
最后，gulp是将要安装的node模块的名字

运行时注意查看命令行有没有错误信息，安装完成后，你可以使用下面的命令查看gulp的版本号以确保gulp已经被正确安装。

gulp -v

接下来，我们需要将gulp安装到项目本地

npm install —-save-dev gulp

这里，我们使用 —-save-dev 来更新package.json文件，更新 devDependencies值，以表明项目需要依赖gulp。

Dependencies 可以向其他参与项目的人指明项目在开发环境和生产环境中的node模块依懒关系，想要更加深入的了解它可以看看 package.json文档。

第五步：新建Gulpfile文件，运行gulp

安装好gulp后我们需要告诉它要为我们执行哪些任务，首先，我们自己需要弄清楚项目需要哪些任务。

检查Javascript
编译Sass（或Less之类的）文件
合并Javascript
压缩并重命名合并后的Javascript

安装依赖

npm install gulp-jshint gulp-sass gulp-concat gulp-uglify gulp-rename --save-dev

提醒下，如果以上命令提示权限错误，需要添加 sudo 再次尝试。

新建gulpfile文件

现在，组件都安装完毕，我们需要新建gulpfile文件以指定gulp需要为我们完成什么任务。

gulp只有五个方法： task ， run ， watch ， src ，和 dest ，在项目根目录新建一个js文件并命名为 gulpfile.js ，把下面的代码粘贴进去：

gulpfile.js

// 引入 gulp
var gulp = require('gulp'); 

// 引入组件
var jshint = require('gulp-jshint');
var sass = require('gulp-sass');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var rename = require('gulp-rename');

// 检查脚本
gulp.task('lint', function() {
    gulp.src('./js/*.js')
        .pipe(jshint())
        .pipe(jshint.reporter('default'));
});

// 编译Sass
gulp.task('sass', function() {
    gulp.src('./scss/*.scss')
        .pipe(sass())
        .pipe(gulp.dest('./css'));
});

// 合并，压缩文件
gulp.task('scripts', function() {
    gulp.src('./js/*.js')
        .pipe(concat('all.js'))
        .pipe(gulp.dest('./dist'))
        .pipe(rename('all.min.js'))
        .pipe(uglify())
        .pipe(gulp.dest('./dist'));
});

// 默认任务
gulp.task('default', function(){
    gulp.run('lint', 'sass', 'scripts');

    // 监听文件变化
    gulp.watch('./js/*.js', function(){
        gulp.run('lint', 'sass', 'scripts');
    });
});

现在，分段解释下这段代码。

引入组件

var gulp = require('gulp'); 

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

这一步，我们引入了核心的gulp和其他依赖组件，接下来，分开创建lint, sass, scripts 和 default这四个不同的任务。

Lint任务

gulp.task('lint', function() {
    gulp.src('./js/*.js')
        .pipe(jshint())
        .pipe(jshint.reporter('default'));
});

Link任务会检查 js/ 目录下得js文件有没有报错或警告。

Sass任务

gulp.task('sass', function() {
    gulp.src('./scss/*.scss')
        .pipe(sass())
        .pipe(gulp.dest('./css'));
});

Sass任务会编译 scss/ 目录下的scss文件，并把编译完成的css文件保存到 /css目录中。

Scripts 任务

gulp.task('scripts', function() {
    gulp.src('./js/*.js')
        .pipe(concat('all.js'))
        .pipe(gulp.dest('./dist'))
        .pipe(rename('all.min.js'))
        .pipe(uglify())
        .pipe(gulp.dest('./dist'));
});

scripts任务会合并 js/ 目录下得所有得js文件并输出到 dist/ 目录，然后gulp会重命名、压缩合并的文件，也输出到 dist/ 目录。

default任务

gulp.task('default', function(){
    gulp.run('lint', 'sass', 'scripts');
    gulp.watch('./js/*.js', function(){
        gulp.run('lint', 'sass', 'scripts');
    });
});

这时，我们创建了一个基于其他任务的default任务。使用 .run() 方法关联和运行我们上面定义的任务，使用 .watch() 方法去监听指定目录的文件变化，当有文件变化时，会运行回调定义的其他任务。

现在，回到命令行，可以直接运行gulp任务了。

gulp

这将执行定义的default任务，换言之，这和以下的命令式同一个意思

gulp default

当然，我们可以运行在gulpfile.js中定义的任意任务，比如，现在运行sass任务：

gulp sass

(Kimi: 哇塞，酷比了哎~)

结束语

现在已经做到了设置gulp任务然后运行他们，现在再回顾下之前学习的。

学习了安装Node环境
学习了简单使用命令行
学习了用命令行进入项目目录
学习了使用npm和安装gulp
学习了如何运行gulp任务

什么是gulp

gulp的官方定义非常简洁：基于文件流的构建系统。这里强调了 streaming，也就是gulp与grunt的在构建流程上的主要区别。具体区别在哪里，后面会简单介绍。

The streaming build system。

另一个grunt？

相信很多前端的同学对grunt都不陌生，grunt的出现可以说是前端的福音，之前很多需要人肉完成的重复工作，用了grunt，一个命令就搞定了。

说到这里，很多同学可能会比较疑问：既然有了grunt，那同样定位于前端构建的 gulp存在的意义是？从gulp的介绍来看，gulp正是为了解决前端同学在使用grunt过程中遇到的这样那样的问题而出现的。是哪些问题呢？在 http://slid.es/contra/gulp 这个slide里，提到了几点，比如：

grunt存在的一些问题

1、插件职能不够单一

2、插件完成了本不该由插件完成的事情（这个我有点迷糊，为什么说是 things don't need to be plugins？）

3、配置过于复杂

4、由于糟糕的流程控制导致的临时文件/目录

Plugins do multiple things
- Want a banner? Use the javascript minifier
Plugins do things that don't need to be plugins

Grunt config format is a mess that tries to do everything

Headache of temp files/folders due to bad flow control

用grunt的方式构建

前面列举了四点grunt使用过程中存在的问题，其中1、2点个人觉得略显牵强，插件职能不够单一，或者完成了不该由插件完成的事情，这个跟grunt其实关系并不大，更多的应该归责于插件的作者（当然使用频率最高的那部分插件的作者就是grunt团队的兄弟）。

比较认同的是后面两点：复杂的配置、糟糕的流程控制。

配置这个是否复杂就不说太多了，在这点上可能争议会比较大。而糟糕的流程控制这点是被诟病较多的，尤其是在规模稍大的项目里面。下面这张简图是grunt目前的工作流程：读文件、修改文件、写文件——读文件、修改文件、写文件——。。。

问题显而易见：

1、 效率低下 ：频繁的磁盘IO会使得构建效率变得低下

2、 无法有效串联 ：读文件、修改文件、写文件的循环，导致插件与插件之前的工作无法有效串联起来。

备注：配图来自上面提到的slide

举个例子

比如项目下有个index.html、app.scss、app.js，而index.html里引用了app.css、app.js，如下所示。假设最终的目的是将编译压缩后的app.css、压缩后的app.js 内联到index.html里，同时要保留压缩前的app.css、app.js源文件，那么过程可能如下：（不一定完全准确）

1、将index.html、app.js、编译生成的app.css 拷贝到 dist/ 下

2、压缩 app.js、app.css，并生成到临时目录 .tmp/ 下

3、将 .tmp/app.js、.tmp/app.css 内联到 dist/index.html里

<html>
<head>
<link type="text/css" rel="stylesheet" href="app.css" />
</head>
<body>

<script src="app.js"></script>

</body>
</html>

用gulp的方式构建

从上面的构建流程可以看到，多次文件读写以及临时目录就这样以一种难以避免的姿态出现了。在gulp作者的构想里，合理的构建流程应该是这样的：读取文件——修改文件——修改文件。。。——写文件（配图来自前面提到的slide）

按照这种设想，上面举的例子用gulp重写，过程应该是这样

1、读文件：读取index.html、app.js、app.css（读文件）

2、编译、压缩app.css，压缩app.js（处理文件流）

3、将A、B内联到index.html中（还是处理文件流）

4、 写文件 ：将最终生成地结果写到 dist/ 目录下（修改后的index.html、编译后的app.css、未修改过的app.js）

压缩文件的简单例子

1、首先全局安装gulp命令行工具（相当于grunt-cli）

npm install -g gulp

2、然后，在项目下安装gulp（相当于grunt）、gulp-uglify

npm install --save-dev gulp gulp-uglify

3、在项目根目录下创建 gulpfile.js

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

gulp.task('default', function(){
    gulp.src('src/app.js')
        .pipe(uglify())
        .pipe(gulp.dest('dist/'));
});

4、运行gulp

gulp

还看到哪些不同

从上面的例子可以看到，gulp似乎跟grunt有点像（同样是命令行工具与本地构建工具结合），但区别也是很明显的。 grunt的一切基于配置（配置即任务），而 gulp则是code based workflow （其实到最后也是一堆配置，只不过可读性上大大提高）。这里有更详细的介绍，摘要如下。其中个人觉得比较重要的是第二、第五点。第五点已经讲过了。

关于第二点，个人的理解是，我们使用gulp插件时，只需要理解插件本身依赖的那个库的原始配置就可以了，而不是像grunt那样，经常都是将配置包装一层后再暴露给使用者，比如grunt-contrib-compass。尽管可能是为了让插件之间的配置更加统一，但的确导致了额外的理解成本。