前言

第一次接触gulp，当参考各方资料翻译下来，感觉还不如自己总结一份来的流畅，所以这篇最后将自己的实践放在开始，将之前的原文与译文放在最后以供参考。

gulp是基于Nodejs的自动任务运行器， 她能自动化地完成 javascript/coffee/sass/less/html/image/css 等文件的的测试、检查、合并、压缩、格式化、浏览器自动刷新、部署文件生成，并监听文件在改动后重复指定的这些步骤。在实现上，她借鉴了Unix操作系统的管道（pipe）思想，前一级的输出，直接变成后一级的输入，使得在操作上非常简单。通过本文，我们将学习如何使用Gulp来改变开发流程，从而使开发更加快速高效。 来源：gulp详细入门教程

(图片来源于网络)

直面主题

简单来说可分为如下步骤： 安装nodejs -> 全局安装gulp -> 项目安装gulp以及gulp插件 -> 配置gulpfile.js -> 运行任务 可以从toptal-gulp-tutorial/step1下载gulp基础实例， toptal-gulp-tutorial/step2下载含watcher的gulp基础实例。

安装nodejs

没有的node的话，从这下载 Node.js，若已经有了可跳过这一步。 最好能保证你的node与npm/cnpm处于最新的状态，以免安装某些最新版本的gulp插件时因此报错。 注：本文中的所有npm均可换为cnpm。

全局安装gulp

npm install gulp -g

命令提示符执行gulp -v，出现版本号即为正确安装，该方法可用于检测是否安装成功。

项目安装gulp以及gulp插件

1.配置package.json文件

下面是一个简单的配置，仅配置了dependencies字段，用于本文章中的示例，本身不属于标准的package.json文件。dependencies字段指定了项目运行所依赖的模块。它们都指向一个对象。该对象的各个成员，分别由模块名和对应的版本要求组成，表示依赖的模块及其版本范围。

{
  "devDependencies": {
    "gulp": "^3.8.11",
    "gulp-sass": "^1.3.3"
  }
}

每个项目的根目录下面，一般都有一个package.json文件，定义了这个项目所需要的各种模块，以及项目的配置信息（比如名称、版本、许可证等元数据）。npm install命令根据这个配置文件，自动下载所需的模块，也就是配置项目所需的运行和开发环境。 详情：package.json文件

2.项目安装gulp以及gulp插件

进入到package.json所在的项目的根目录，在没有其他说明情况下，以下实例基于toptal-gulp-tutorial/step1。使用如下命令安装临时gulp与插件

npm install

这个命令可以说是下面这两行命令的缩写：

npm install gulp --save-dev
npm install gulp-sass --save-dev

npm install会自动检索所在目录下package.json中在dependencies配置的依赖模块并下载安装。

配置gulpfile.js

说明：gulpfile.js是gulp项目的配置文件，是位于项目根目录的普通js文件（其实将gulpfile.js放入其他文件夹下亦可）。 基本格式如下：

/**
 * Plugins
 * -------
 */
//导入工具包 require('node_modules里对应模块')
var gulp = require('gulp'); // Gulp is always required  Gulp是永远都需要的   
var scss = require('gulp-sass'); // Gulp libsass implementation  gulp-sass属于本实例中需要的gulp插件


/**
 * Tasks
 * -----
 */

/**
 * Compiles SCSS files into CSS
 *
 * @source .scss files
 * @dest .css files
 */
//定义一个名为scss的任务（自定义任务名称）
gulp.task('scss', function() {
    return gulp.src('scss/*.scss')   //该任务针对的文件,此处为scss文件夹下，所有.scss后缀的文件
        .pipe(scss())               //该任务调用的模块,即上面定义的 var scss = require('gulp-sass'); 
        .pipe(gulp.dest('css'));   //将会在css文件夹下，生成对应的.css文件
});

[toggle hide=“no” title=“相关api” color=“”] 1.gulp.task(name[, deps], fn) name 任务的名字，如果你需要在命令行中运行你的某些任务，那么，请不要在名字中使用空格。 deps 类型： Array 一个包含任务列表的数组，这些任务会在你当前任务运行之前完成。 fn 该函数定义任务所要执行的一些操作。通常来说，它会是这种形式：gulp.src().pipe(someplugin())。 2.gulp.src(globs[, options]) 执行任务处理的文件  globs：处理的文件路径(字符串或者字符串数组) 3.gulp.dest(path[, options]) 处理完后文件生成路径 [/toggle]

运行任务

通过

gulp scss

即可运行上面定义的任务。 若直接执行

gulp

gulp将会自动执行名为default的任务。

总结

以上便是最简单的gulp的应用。关于Watcher应用，暂时没时间写了，可以考虑看下面英文原文或译文的，东西不多，基本看看也就懂了。

简译

[toggle hide=“no” title=“简译文章内容” color=“”] 第一次接触gulp，翻译不合适或不正确的地方欢迎随时指正。有能力者，也可看英文原文。

原文：An Introduction to JavaScript Automation with Gulp

文章内容

作为一个开发者，我们有时会发现我们一再着重复相同的炒鸡乏味的工作。如果你考虑一下多少时间被浪费在运行构建命令（ a build command）或者刷新浏览器上，你将意识到可以节省大量的时间。此外，通过自动化你的流程，你可以专注于手头的工作，而不是暂时离开“ the zone”状态（你 达到最高效率的那种神奇的境界）。 在这个JavaScript自动化教程中，你将会学到如何使用 Gulp自动化你的设计和开发流程。如果你更加面向设计，我鼓励你克服你的任何恐惧读下去。另一方面，如果你是开发人员，你一旦了解其背后的逻辑，就可以轻易地完成它。 Gulp是一个构建工具， 利用 Node.js 流实现自动化异步源（ source-destination ）。 一切都是用JavaScript编写的，所以具有中间编码知识（ intermediate coding knowledge）的人很容易上手。 Gulp构建过程由watchers和 tasks的集合组成。此外，Gulp官方社区在 npm 有一个 huge plugin directory ， 可以帮助完成从JavaScript连接到通过svg创建图标字体（ icon fonts ）等。

Gulp的代替品

gulp有很多的代替品，其中大多数在几年前就已经存在了，最著名的就是Grunt。Gulp和Grunt之间的比赛永远不会有一个明确的赢家，因为他们都有利弊，所以我会避免深入研究。简而言之，Grunt对配置的严重依赖是导致人们走向gulp使用JavaScript的实现方式的主要原因。与此同时，诸如Koala等本地GUI实现取得了一些进展，主要来自于拒绝编码的人。然而，对于捆绑的应用程序，无法达到Gulp提供的可定制性和可扩展性。

过程自动化基础知识（Process Automation Fundamentals）

Plugins 插件

Plugins（插件）是完成每个过程（process）的手段。插件通过npm安装，并使用“require”启动。

Tasks  任务

对于Gulp，任务总是有源头（source）和目标（destination）。在它们之间放置调用每个插件的管道（pipes ），并将转换的结果输出到下一个管道。

Globs

Globs是引用文件的通配符模式。globs(glob 字符串)或glob的数组用作任务源中的输入。

Watchers

当检测到更改时，Watchers观察源文件以进行更改和调用任务。

gulpfile.js

gulp项目的配置文件。它包含从任务（tasks）到Watchers或任务使用的其他代码片段的所有内容。

一个简单的任务 (A Straightforward Task)

开始之前，你需要 Node.js和具有可运行管理员访问权限的命令行的shell。你可以从这下载 Node.js，安装好后，您可以运行以下命令，以确保npm是最新的。

sudo npm install npm -g

-g 标志 表示安装将是全局的。 现在你可以真正开始安装gulp并开始调用一些简单的任务。使用以下命令全局安装gulp。

sudo npm install gulp -g

请注意，你也可以使用相同的命令进行更新。 你可以从toptal-gulp-tutorial/step1下载入门工具包，帮助你完成第一个任务。它包含一个将SCSS文件编译为 cs的简单任务。它使用一个名为 gulp-sass插件，这个插件基于libsass。我在这里选择使用libsass， 因为它比Ruby的替代方法更快，尽管它缺少一些功能。一旦在项目的根目录中，你可以使用以下命令安装所需的所有插件。

npm install

此命令读取package.json文件并安装所需的所有依赖项。我们在这里使用“npm install”作为下面这些命令的缩写：

npm install gulp --save-dev
npm install gulp-sass --save-dev

“-save-dev”标志将选定的插件添加到package.json devDependencies中，以便下次安装所有内容时，可以直接使用方便的“npm install”。 此时您可以运行第一个任务。运行以下命令并观察，/ scss文件夹中的所有SCSS文件都将编译到相应目录中的CSS中：

gulp scss

请注意，在本示例中，我们指定了要运行的任务。如果我们省略了任务名称，则会运行名为“default”的任务。

代码演练

以上需要7行JavaScript代码完成。

var gulp = require('gulp');
var scss = require('gulp-sass');

一开始我们需要初始化我们将要使用的所有插件。

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

我们定义名为“scss”的任务。

return gulp.src('scss/*.scss')

设置任务的源文件。这些被定义为全局。在这个例子中，我们指的是以“.scss”结尾的“scss /”文件夹中的所有文件。

.pipe(scss())

在这里，我们调用之前定义好的gulp-sass插件

.pipe(gulp.dest('css'));

最后，我们使用“gulp.dest”定义文件的目标文件夹。如果文件内容连接在一起，也可以是单个文件名。 为了进一步改进此过程自动化实现，您可以尝试添加一些其他Gulp插件。例如，您可能希望使用 gulp-minify-css 来最小化您的任务的最终产品，并使用gulp-autoprefixer自动添加供应商的前缀（vendor prefixes）。

使用Watcher

我创建了一个可以直接使用的watcher入门工具包。你可以从 toptal-gulp-tutorial/step2下载它，它包括之前创建的SCSS任务的增强版本，以及一个观察检测源文件并调用任务的watcher。为了启动它，请使用以下命令：

gulp

这个命令启动名为 “default”并开启watcher.的任务，此时，您可以编辑任何SCSS文件，并重新编译CSS文件。您将可以在命令行中看到Gulp的通知。

代码演练

我们已经为我们的任务设置了一个watcher，而且只有3个额外的代码行。也就是说这个watcher入门工具包与之前的引导例子没有特别大的差异。在本节中，我们将介绍所有的添加和更改。

return gulp.src(['scss/**/*.scss', '!scss/**/_*'])

在这个例子中，Gulp源提供了一个glob数组。第一个表示包括在子文件夹在内所有文件夹中以“.scss”结尾的文件，第二个表示排除以“_”开头的文件。。这样我们可以使用SCSS的内置函数@import来连接_page.scss文件。

gulp.task('default', ['scss'], function() {

这里我们定义名为“default” 的任务。“scss”任务在“default” 之前作为依赖运行。

gulp.watch('scss/**/*.scss', ['scss']);

最后，我们调用Gulp的watch函数指向以“.scss”结尾的任何文件，并且每当发生更改事件时，运行“scss”任务。 现在，你可以为其他自动化流程创建新的观察者，例如JavaScript连接，代码提示，CoffeeScript编译或其他可能出现的任何操作。要深入了解这个JavaScript自动化实现，我建议添加 gulp-notify ，当任务运行时通知你。此外，您可以创建一个单独的任务来最小化生成的CSS代码，并使“scss”任务作为依赖关系运行。最后，您可以使用gulp-rename将“.min”后缀添加到生成的文件中。

用于JavaScript自动化的高级Gulp插件

Gulp的插件库中存在数千个插件，其中一些远远超出了构建过程的简单JavaScript自动化。以下是几个杰出的例子：

BrowserSync

BrowserSync注入CSS，JavaScript，并在进行更改时自动刷新浏览器。此外，它还包含一个ghostMode功能，可用于吓唬您的同事或大大加快您的浏览器测试。

Browserify

Browserify分析应用程序中的“require”调用并将其转换为捆绑的JavaScript文件。另外，还有一个可以转换成浏览器代码的npm软件包列表。

Webpack

与Browserify类似，Webpack旨在将具有依赖关系的模块转换为静态文件。这一个就如何设置模块依赖关系给 了用户更多的自由，而不是追求Node.js的代码风格。

Karma

Gulp-karma 将臭名昭着的测试环境带到Gulp。Karma遵循Gulp也认可的最小配置方法。

结论

在这个过程自动化教程中，我演示了使用Gulp作为构建工具的优美和简单。通过遵循本教程中描述的步骤，您将可以在将来和您的旧项目中完全自动完成软件开发过程。投入一些时间为您的旧项目建立一个构建系统，一定会为您节省宝贵的时间。 请继续关注更高级的Gulp教程即将推出。 [/toggle]

参考资料

入门指南-Gulp 中文网 An Introduction to JavaScript Automation with Gulp gulp详细入门教程 package.json文件