简介：
gulp是前端开发过程中对代码进行构建的工具，是自动化项目的构建利器；它不仅对网站资源进行优化，而且在开发过程中很多重复的任务，他可以通过明确的工具自动完成，使用它我们不仅可以很愉快的编写代码，而且大大的提高了我们的工作效率。
gulp是基于Node.js的自动化任务运行器，它能自动化的完成JavaScript、coffee、sass、less、html、image、css等文件的测试、检查、合并、压缩、格式化、浏览器自动刷新、部署文件生成，并监听文件在改动后重复指定的这些步骤。在实现上，它借助了Unix操作系统的管道(pipe)思想，前一级的输出等于后一级的输入，使操作非常的简单。通过本文，我们将学习如何使用gulp来改变开发流程，从而使开发更加高效。
gulp与grunt非常类似，但相比于grunt非常频繁的IO操作，gulp的流操作，能更快捷的完成构建工作。
本文以gulp-pug为例（将pug编译为html的gulp插件）展示gulp的基本用法，只要我们学会一个插件之后，其他插件可以看一下帮助文档
gulp常用地址：
gulp官方网址：http://gulpjs.com
gulp插件地址：http://gulpjs.com/plugins
gulp官方API：https://github.com/gulpjs/gulp/blob/master/docs/API.md
gulp中文API：http://www.ydcss.com/archives/424
gulp构建流程
安装nodejs-->全局安装gulp-->项目安装gulp以及gulp插件 -->配置gulpfile.js-->运行任务
1.安装nodejs
说明：gulp是基于nodejs，所以需要配置node环境
安装方法：打开nodejs官网，点击Download按钮，它会根据系统信息选择对应的版本（.msi文件）。然后直接安装就可以了
2.使用命令行（熟悉命令行可跳过此步）
说明：命令行在OSX是终端（Teminal），在Windows是命令提示符（Command Prompt）；
注意：之后操作都是在Windows系统下
简介：
打开命令的方式（window+r 输入cmd回车）
node -v 查看安装的nodejs版本号，出现版本号证明安装成功，未出现请重启重试
npm -v 查看npm版本号，npm是随着nodejs一同安装的nodejs包管理器
cd 定位到目录，用法：cd+路径；
dir 列出文件列表
cls清空命令提示符窗口内容
3.npm介绍
说明：npm（node package manager）nodejs的包管理器，用于nodejs插件的安装、卸载、管理依赖等；
安装插件：
命令提示符执行 npm install <name> [-g] [--save-dev];
<name>: nodejs插件的名称；例如npm install pug --save-dev
-g：全局安装。将会安装到C:\Users\Administrator\AppData\Roaming\npm，并且写入环境变量；非全局安装：将会安装到当前定位目录；全局安装可以通过命令行在任何地方调用，本地安装会在定位目录的node_modules文件夹下，通过require()调用；
--save：将保存配置信息到package.json（package.json是nodejs项目配置文件）
-dev：保存到package.json的devDependencies节点，不指定-dev将保存到dependencies节点
卸载插件：
命令提示符执行 npm uninstall <name> [-g] [--save-dev]
删除全部插件 借助rimraf npm install rimraf -g 用法： rimraf node_modules
更新插件
命令提示符执行 npm update <name> [-g] [--save-dev]
更新全部插件： npm update [--save-dev]
查看npm帮助
命令提示符执行 npm help
当前目录已安装插件
命令提示符执行 npm list
npm安装插件过程是从：http://registry.npmjs.org下载对应的插件包（该网站服务器位于国外，所以经常下载缓慢或出现异常），解决办法往下看↓↓↓↓↓↓。
4.选装cnpm
说明：因为npm安装插件是从国外服务器下载，受网络影响大，可能出现异常，如果npm的服务器在中国就好了，所以我们乐于分享的淘宝团队干了这事，来自官网:
这是一个完整 npmjs.org 镜像，你可以用此代替官方版本(只读)，同步频率目前为 10分钟 一次以保证尽量与官方服务同步。
官方网址：http://npm.taobao.org；
安装：
命令提示符执行 npm install cnpm -g --registry=https://registry.npm.taobao.org ；
cnpm和npm用法完全一致，只是在执行命令的时候把npm改成cnpm
5.全局安装gulp
说明：全局安装gulp是为了通过它执行gulp任务
安装：
命令提示符执行 cnpm install gulp -g ；
查看是否正确安装，命令提示符执行 gulp -v ；出现版本号证明安装成功
6.新建package.json文件
说明：package.json是nodejs项目中必不可少的配置文件，它包含了nodejs的配置信息以及插件信息
{
"name": "font-test", /*项目名称*/
"version": "1.0.0", /*项目版本*/
"description": "font-size", /*项目介绍*/
"main": "gulpfile.js", /*执行js入口*/
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"devDependencies": {
"autoprefixer": "^7.1.1",
"browser-sync": "^2.18.8",
"compass": "^0.1.1",
"gulp": "^3.9.1",
"gulp-changed": "^2.0.0",
"gulp-compass": "^2.1.0",
"gulp-html-beautify": "^1.0.1",
"gulp-load-plugins": "^1.5.0",
"gulp-plumber": "^1.1.0",
"gulp-postcss": "^7.0.0",
"gulp-pug": "^3.3.0",
"gulp-sass": "^3.1.0",
"gulp-sourcemaps": "^2.6.0",
"precss": "^1.4.0",
"pug": "^2.0.0-beta.12",
"cssgrace": "^3.0.0"
},
"dependencies": {
"express": "^4.15.2",
"pug": "^2.0.0-beta.12"
}
}
我们可以使用命令行工具来配置它： cnpm init
查看package.json帮助文档，命令提示符执行cnpm help package.json
特别注意：package.json是一个普通的json文件，所以不能添加任何注释。
7.本地安装gulp插件
安装：定位到项目目录后，执行 cnpm install <name> --save-dev
实例：安装gulp-pug，执行 cnpm install gulp-pug --save-dev
将会安装到node_modules的gulp-pug目录下
为了能正常使用，我们还得本地安装gulp cnpm install gulp --save-dev
全局安装gulp是为了执行gulp命令，本地安装gulp是为了调用gulp插件功能
8.新建gulpfile.js文件（重要）
说明：gulpfile.js是gulp项目的配置文件，一般位于项目根目录（需要在package.json的main中指定该文件）
（package.json设置图）
var gulp = require("gulp");
var plugins = require("gulp-load-plugins")();
var browserSync = require("browser-sync").create();
//编译pug
gulp.task("pug:compile",function() {
gulp.src("src/*.pug")
.pipe(plugins.changed("./build/",{extension:".html"}))
.pipe(plugins.pug({
pretty:"\t"
}))
.pipe(gulp.dest("./build/"))
})
9.运行gulp
说明：命令提示符执行 gulp+任务名称
当执行gulp就是执行gulp default的所有任务；