前言
第一次接触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
代码语言：javascript复制npm install gulp -g命令提示符执行gulp -v，出现版本号即为正确安装，该方法可用于检测是否安装成功。
项目安装gulp以及gulp插件
1.配置package.json文件
下面是一个简单的配置，仅配置了dependencies字段，用于本文章中的示例，本身不属于标准的package.json文件。dependencies字段指定了项目运行所依赖的模块。它们都指向一个对象。该对象的各个成员，分别由模块名和对应的版本要求组成，表示依赖的模块及其版本范围。
代码语言：javascript复制{
"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与插件
代码语言：javascript复制npm install这个命令可以说是下面这两行命令的缩写：
代码语言：javascript复制npm install gulp --save-dev
npm install gulp-sass --save-devnpm install会自动检索所在目录下package.json中在dependencies配置的依赖模块并下载安装。
配置gulpfile.js
说明：gulpfile.js是gulp项目的配置文件，是位于项目根目录的普通js文件（其实将gulpfile.js放入其他文件夹下亦可）。
基本格式如下：
代码语言：javascript复制/**
* 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文件
});相关api
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])
处理完后文件生成路径
运行任务
通过
代码语言：javascript复制gulp scss即可运行上面定义的任务。
若直接执行
代码语言：javascript复制gulpgulp将会自动执行名为default的任务。
总结
以上便是最简单的gulp的应用。关于Watcher应用，暂时没时间写了，可以考虑看下面英文原文或译文的，东西不多，基本看看也就懂了。
简译
简译文章内容
第一次接触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是最新的。
代码语言：javascript复制sudo npm install npm -g-g 标志 表示安装将是全局的。
现在你可以真正开始安装gulp并开始调用一些简单的任务。使用以下命令全局安装gulp。
代码语言：javascript复制sudo npm install gulp -g请注意，你也可以使用相同的命令进行更新。
你可以从toptal-gulp-tutorial/step1下载入门工具包，帮助你完成第一个任务。它包含一个将SCSS文件编译为 cs的简单任务。它使用一个名为 gulp-sass插件，这个插件基于libsass。我在这里选择使用libsass， 因为它比Ruby的替代方法更快，尽管它缺少一些功能。一旦在项目的根目录中，你可以使用以下命令安装所需的所有插件。
代码语言：javascript复制npm install此命令读取package.json文件并安装所需的所有依赖项。我们在这里使用“npm install”作为下面这些命令的缩写：
代码语言：javascript复制npm install gulp --save-dev
npm install gulp-sass --save-dev“-save-dev”标志将选定的插件添加到package.json devDependencies中，以便下次安装所有内容时，可以直接使用方便的“npm install”。
此时您可以运行第一个任务。运行以下命令并观察，/ scss文件夹中的所有SCSS文件都将编译到相应目录中的CSS中：
代码语言：javascript复制gulp scss请注意，在本示例中，我们指定了要运行的任务。如果我们省略了任务名称，则会运行名为“default”的任务。
代码演练
以上需要7行JavaScript代码完成。
代码语言：javascript复制var gulp = require('gulp');
var scss = require('gulp-sass');一开始我们需要初始化我们将要使用的所有插件。
代码语言：javascript复制gulp.task('scss', function() {我们定义名为“scss”的任务。
代码语言：javascript复制return gulp.src('scss/*.scss')设置任务的源文件。这些被定义为全局。在这个例子中，我们指的是以“.scss”结尾的“scss /”文件夹中的所有文件。
代码语言：javascript复制.pipe(scss())在这里，我们调用之前定义好的gulp-sass插件
代码语言：javascript复制.pipe(gulp.dest('css'));最后，我们使用“gulp.dest”定义文件的目标文件夹。如果文件内容连接在一起，也可以是单个文件名。
为了进一步改进此过程自动化实现，您可以尝试添加一些其他Gulp插件。例如，您可能希望使用 gulp-minify-css 来最小化您的任务的最终产品，并使用gulp-autoprefixer自动添加供应商的前缀（vendor prefixes）。
使用Watcher
我创建了一个可以直接使用的watcher入门工具包。你可以从 toptal-gulp-tutorial/step2下载它，它包括之前创建的SCSS任务的增强版本，以及一个观察检测源文件并调用任务的watcher。为了启动它，请使用以下命令：
代码语言：javascript复制gulp这个命令启动名为 “default”并开启watcher.的任务，此时，您可以编辑任何SCSS文件，并重新编译CSS文件。您将可以在命令行中看到Gulp的通知。
代码演练
我们已经为我们的任务设置了一个watcher，而且只有3个额外的代码行。也就是说这个watcher入门工具包与之前的引导例子没有特别大的差异。在本节中，我们将介绍所有的添加和更改。
代码语言：javascript复制return gulp.src(['scss/**/*.scss', '!scss/**/_*'])在这个例子中，Gulp源提供了一个glob数组。第一个表示包括在子文件夹在内所有文件夹中以“.scss”结尾的文件，第二个表示排除以“_”开头的文件。。这样我们可以使用SCSS的内置函数@import来连接_page.scss文件。
代码语言：javascript复制gulp.task('default', ['scss'], function() {这里我们定义名为“default” 的任务。“scss”任务在“default” 之前作为依赖运行。
代码语言：javascript复制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教程即将推出。
参考资料
入门指南-Gulp 中文网
An Introduction to JavaScript Automation with Gulp
gulp详细入门教程
package.json文件
