gulp是前端开发过程中一种基于流的代码构建工具，是自动化项目的构建利器；它不仅能对网站资源进行优化，而且在开发过程中很多重复的任务能够使用正确的工具自动完成；使用它，不仅可以很愉快的编写代码，而且大大提高我们的工作效率。
gulp是基于Nodejs的自动任务运行器， 它能自动化地完成 javascript、coffee、sass、less、html/image、css 等文件的测试、检查、合并、压缩、格式化、浏览器自动刷新、部署文件生成，并监听文件在改动后重复指定的这些步骤。在实现上，它借鉴了Unix操作系统的管道（pipe）思想，前一级的输出，直接变成后一级的输入，使得在操作上非常简单。
流(stream)
流,简单来说就是建立在面向对象基础上的一种抽象的处理数据的工具。在流中，定义了一些处理数据的基本操作，如读取数据，写入数据等，程序员是对流进行所有操作的，而不用关心流的另一头数据的真正流向。流不但可以处理文件，还可以处理动态内存、网络数据等多种数据形式。
而gulp正是通过流和代码优于配置的策略来尽量简化任务编写的工作。这看起来有点“像jQuery”的方法，把动作串起来创建构建任务。早在Unix的初期，流就已经存在了。流在Node.js生态系统中也扮演了重要的角色，类似于*nix将几乎所有设备抽象为文件一样，Node将几乎所有IO操作都抽象成了stream的操作。因此用gulp编写任务也可看作是用Node.js编写任务。当使用流时，gulp去除了中间文件，只将最后的输出写入磁盘，整个过程因此变得更快。
特点
易于使用
通过代码优于配置的策略，gulp 让简单的任务简单，复杂的任务可管理。
构建快速
利用 Node.js 流的威力，你可以快速构建项目并减少频繁的 IO 操作。
易于学习
通过最少的 API，掌握 gulp 毫不费力，构建工作尽在掌握：如同一系列流管道。
插件高质
gulp 严格的插件指南确保插件如你期望的那样简洁高质得工作。
上面的叙述，只是为了有个大概的了解，不看也没有关系。
第一步：安装Node
首先，最基本也最重要的是，我们需要搭建node环境（前文所知，gulp基于nodo.js）。访问http://nodejs.org，然后点击大大的绿色的install按钮（可能是install，可能不是，但是绝对是原谅绿。安装路径随意），下载完成后直接运行程序，就一切准备就绪。npm会随着安装包一起安装，稍后会用到它。
第二步：使用命令行（如果你熟悉命令行，可以直接跳过）
说明：什么是命令行？命令行在OSX是终端（Terminal），在windows是命令提示符（Command Prompt）；
注：之后操作都是在windows系统下；
简单介绍gulp在使用过程中常用命令，打开命令提示符执行下列命令（打开方式：window + r 输入cmd回车）：
node -v 查看安装的nodejs版本，出现版本号，说明刚刚已正确安装nodejs。PS：未能出现版本号，请尝试注销电脑重试；
npm -v 查看npm的版本号，npm是在安装nodejs时一同安装的nodejs包管理器，那它有什么用呢？稍后解释；
cd 定位到目录，用法：cd + 路径 ；
dir 列出文件列表；
cls 清空命令提示符窗口内容。
输入node -v 和 npm -v 都能得到版本号，那就证明安装成功。如果不行，可以先重新命令行工具，还不行，请返回到第一步进行重装。
发起进攻( ´-ω ･)▄︻┻┳══━一
第三步： 定位到项目 （如果你熟悉命令行，可以直接跳过）
现在，我们已经大致了解了命令行并且知道如何简单使用它，接下来只需要两个简单的命令就能定位到文件目录并看看目录里都有些什么文件。
cd，定位到目录
ls，列出文件列表
建议多敲敲这两个命令，了解文件系统并知道文件都在哪里。
习惯使用了这两个命令后，就要进入我们的项目目录，这个目录各不相同，举个例子，这是我进入我项目目录的命令：
cd /htdocs/test
成功进入项目目录后，我们开始安装gulp。
第四步：安装gulp
我们已经知道如何使用命令行，现在尝试点新的东西，认识npm然后安装gulp。
npm介绍
说明：npm（node package manager）nodejs的包管理器，用于node插件管理（包括安装、卸载、管理依赖等）；
使用npm安装插件：命令提示符执行npm install [-g] [--save-dev]；
node插件名称。例：npm install gulp-less --save-dev
-g：全局安装。将会安装在C:\Users\Administrator\AppData\Roaming\npm，并且写入系统环境变量； 非全局安装：将会安装在当前定位目录； 全局安装可以通过命令行在任何地方调用它，本地安装将安装在定位目录的node_modules文件夹下，通过require()调用；
--save：将保存配置信息至package.json（package.json是nodejs项目配置文件）；
-dev：保存至package.json的devDependencies节点，不指定-dev将保存至dependencies节点；一般保存在dependencies的像这些express/ejs/body-parser等等。
为什么要保存至package.json？因为node插件包相对来说非常庞大，所以不加入版本管理，将配置信息写入package.json并将其加入版本管理，其他开发者对应下载即可（命令提示符执行npm install，则会根据package.json下载所有需要的包，npm install --production只下载dependencies节点的包）。
使用npm卸载插件：npm uninstall [-g] [--save-dev] PS：不要直接删除本地插件包
删除全部插件：npm uninstall gulp-less gulp-uglify gulp-concat ……???太麻烦
借助rimraf：npm install rimraf -g 用法：rimraf node_modules
使用npm更新插件：npm update [-g] [--save-dev]
更新全部插件：npm update [--save-dev]
查看npm帮助：npm help
当前目录已安装插件：npm list
选装cnpm
PS:npm安装插件过程：从http://registry.npmjs.org下载对应的插件包（该网站服务器位于国外，所以经常下载缓慢或出现异常），解决办法往下看↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓
先说明一下：因为npm安装插件是从国外服务器下载，受网络影响大，可能出现异常，如果npm的服务器在中国就好了，所以我们乐于分享的淘宝团队干了这事。
官网：飞机票
安装：命令提示符执行npm install cnpm -g --registry=https://registry.npm.taobao.org； 注意：安装完后最好查看其版本号cnpm -v或关闭命令提示符重新打开，安装完直接使用有可能会出现错误；
注：cnpm跟npm用法完全一致，只是在执行命令时将npm改为cnpm（以下操作将以cnpm代替npm）
*安装gulp
全局安装：命令提示符执行 cnpm install gulp -g；
查看是否正确安装：命令提示符执行gulp -v，出现版本号即为正确安装。
新建package.json文件
说明：package.json是基于nodejs项目必不可少的配置文件，它是存放在项目根目录的普通json文件；
它是这样一个json文件（注意：json文件内是不能写注释的！）
当然，我们也可以手动创建这个配置文件，但是作为一个名程序员，能懒则懒，我们可以使用命令提示符执行
查看package.json帮助文档，命令提示符执行 cnpm help package.json
项目本地安装gulp：命令提示符执行 cnpm install gulp --save-dev
这里，我们使用—-save-dev来更新package.json文件，更新devDependencies值，以表明项目需要依赖gulp。（结尾有点补充。）
本地安装gulp插件
安装：定位目录命令后提示符执行cnpm install --save-dev；
本示例以gulp-less为例（编译less文件），命令提示符执行cnpm install gulp-less --save-dev；
将会安装在node_modules的gulp-less目录下，该目录下有一个gulp-less的使用帮助文档README.md；
PS：细心的你可能会发现，我们全局安装了gulp，项目也安装了gulp，全局安装gulp是为了执行gulp任务，本地安装gulp则是为了调用gulp插件的功能。
第五步：新建gulpfile.js文件，运行gulp（重要！重要！重要）
安装好gulp后我们需要告诉它要为我们执行哪些任务，首先，我们自己需要弄清楚项目需要哪些任务。
例如：
检查Javascript
编译Sass（或Less之类的）文件
合并Javascript
压缩并重命名合并后的Javascript
安装依赖
cnpm install gulp-jshint gulp-sass gulp-concat gulp-uglify gulp-rename --save-dev
新建gulpfile文件
说明：gulpfile.js是gulp项目的配置文件，是位于项目根目录的普通js文件（其实将gulpfile.js放入其他文件夹下亦可）。（鼠标右键-》新建）
现在，组件都安装完毕，我们需要新建gulpfile文件以指定gulp需要为我们完成什么任务。
gulp只有五个方法： task，run，watch，src，和dest。在项目根目录新建一个js文件并命名为gulpfile.js，把下面的敲进去：
gulpfile.js
好，现在新建完gulpfile.js，我们分析一下。
引入组件
这一步，我们引入了核心的gulp和其他依赖组件，接下来，分开创建lint, sass, scripts 和 default这四个不同的任务。
lint任务
lint任务会检查js/目录下得js文件有没有报错或者警告
sass任务
Sass任务会编译scss/目录下的scss文件，并把编译完成的css文件保存到/css目录中。
scripts 任务
scripts任务会合并js/目录下得所有得js文件并输出到dist/目录，然后gulp会重命名、压缩合并的文件，也输出到dist/目录。
default任务
这时，我们创建了一个基于其他任务的default任务。使用.run()方法关联和运行我们上面定义的任务，使用.watch()方法去监听指定目录的文件变化，当有文件变化时，会运行回调定义的其他任务。
第六步：运行gulp
说明：命令提示符执行 gulp 任务名称；
编译sass：命令提示符执行gulp sass；
当执行gulp default或gulp将会调用default任务里的所有任务。好比如
当执行 gulp default 或 gulp调用了 ['vendor','jsmin','sass']任务。（上图注释不用管，上个项目的，懒得删掉，各位包含。）
补充：
1、devDependencies 与 dependencies
npm install 在安装 npm 包时，有两种命令参数可以把它们的信息写入 package.json 文件，一个是npm install --save另一个是 npm install --save-dev，他们表面上的区别是--save 会把依赖包名称添加到 package.json 文件 dependencies 键下，--save-dev 则添加到 package.json 文件 devDependencies 键下。devDependencies 下列出的模块，是我们开发时用的，比如 我们安装 js的压缩包gulp-uglify 。因为我们在发布后用不到它，而只是在我们开发才用到它。dependencies 下的模块，则是我们发布后还需要依赖的模块，譬如像jQuery库或者Angular框架类似的，我们在开发完后后肯定还要依赖它们，否则就运行不了。
结束语
现在已经做到了设置gulp任务然后运行他们，现在再回顾下之前学习的。
学习了安装Node环境
学习了简单使用命令行
学习了用命令行进入项目目录
学习了使用npm和安装gulp
学习了如何运行gulp任务
网友评论