Gulp

本文转载自http://www.w3ctech.com/topic/134
非常感谢作者的翻译以及编写

---

Gulp是一个构建系统，它能通过自动执行常见任务，比如编译预处理CSS，压缩JavaScript和刷新浏览器，来改进网站开发的过程

Gulp是一个可以在GitHub上找到的开源项目。
Gulp官网地址 http://www.gulpjs.com.cn/

---

What Is Gulp?

Gulp是一个构建系统，开发者可以使用它在网站开发过程中自动执行常见任务。Gulp是基于Node.js构建的，因此Gulp源文件和你用来定义任务的Gulp文件都被写进了JavaScript（或者CoffeeScript）里。前端开发工程师还可以用自己熟悉的语言来编写任务去lint JavaScript和CSS、解析模板以及在文件变动时编译LESS文件（当然这些只是一小部分例子）。

---

Installing Gulp

安装Gulp的过程十分简单。首先，需要在全局安装Gulp包：

npm install -g gulp

然后，在项目里面安装Gulp：

npm install --save-dev gulp

Using Gulp

现在我们创建一个Gulp任务来压缩JavaScript文件。首先创建一个名为gulpfile.js的文件，这是定义Gulp任务的地方，它可以通过gulp命令来运行，接着把下面的代码放到gulpfile.js文件里面。

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

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

然后在npm里面运行npm install -–save-dev gulp-uglify来安装gulp-uglify，最后通过运行gulp minify来执行任务。假设js目录下有个app.js文件，那么一个新的app.js将被创建在编译目录下，它包含了js/app.js的压缩内容。

---

what happended?
我们只在gulpfile.js里做了一点事情。首先，我们加载gulp和gulp-uglify

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

我们定义了一个叫minify的任务，它执行时会调用函数，这个函数会作为第二个参数

gulp.task('minify', function () {

});

最后，也是难点所在，我们需要定义任务应该做什么：

 gulp.src('js/app.js')
   .pipe(uglify())
   .pipe(gulp.dest('build'))

如果你对数据流非常熟悉（其实大多数前端开发人员并不熟悉），上面所提供的代码对你来说就没有太大意义了

gulp.src()方法输入一个glob(比如匹配一个或多个文件的字符串)或者glob数组，然后返回一个可以传递给插件的数据流。

Gulp使用node-glob来从你指定的glob里面获取文件，这里列举下面的例子来阐述，方便大家理解：

js/app.js 精确匹配文件
js/*.js 仅匹配js目录下的所有后缀为.js的文件
js/*/.js 匹配js目录及其子目录下所有后缀为.js的文件
!js/app.js 从匹配结果中排除js/app.js，这种方法在你想要匹配除了特殊文件之外的所有文件时非常管用
*.+(js|css) 匹配根目录下所有后缀为.js或者.css的文件

gulp.task()函数通常会被用来定义任务。当你定义一个简单的任务时，需要传入任务名字和执行函数两个属性。

gulp.task('greet', function () {
   console.log('Hello world!');
});

执行gulp greet的结果就是在控制台上打印出“Hello world”.

一个任务有时也可以是一系列任务。假设要定义一个任务build来执行css、js、imgs这三个任务，我们可以通过指定一个任务数组而不是函数来完成。

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

---

Gulp上有超过600种插件供你选择，你可以在插件页面或者npm上搜索gulpplugin来浏览插件列表。有些拥有“gulpfriendly”标签的插件，他们不能算插件，但是能在Gulp上正常运行。
让我们用前面的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'));
});

这里使用了三个插件，gulp-jshint,gulp-uglify和gulp-concat。

uglify()函数压缩代码
concat(‘app.js’)函数将所有文件合并到一个叫app.js的文件中

---

Gulp可以监听文件的修改动态，然后在文件被改动的时候执行一个或多个任务。这个特性十分有用。你可以保存LESS文件，接着Gulp会自动把它转换为CSS文件并更新浏览器。

使用gulp.watch()方法可以监听文件，它接受一个glob或者glob数组（和gulp.src()一样）以及一个任务数组来执行回调。

让我们看看下面，build任务可以将模板转换成html格式，然后我们希望定义一个watch任务来监听模板文件的变化，并将这些模板转换成html格式。watch函数的使用方法如下所示：

gulp.task('watch', function () {
   gulp.watch('templates/*.tmpl.html', ['build']);
});

现在，当改变一个模板文件时，build任务会被执行并生成HTML文件，也可以给watch函数一个回调函数，而不是一个任务数组。

---

下面给大家连接上写的gulpfile.js的代码，欢迎指正
gulpfile.js
‘

参考资料