一、gulp是什么
gulp 是基于 node 实现 Web 前端自动化开发的工具，利用它能够极大的提高开发效率。在 Web 前端开发工作中有很多“重复工作”，比如压缩CSS/JS文件。而这些工作都是有规律的。找到这些规律，并编写 gulp 配置代码,让 gulp 自动执行这些“重复工作”。
二、安装gulp
使用 gulp 需要全局安装和本地安装。
1、全局安装
全局安装的意思就是以后在电脑的每一个位置都可以使用 gulp 的命令，全局安装也只用进行一次，安装成功后，以后再次使用无需安装。
键入如下命令：
cnpm install gulp -g
出现如下提示，说明安装成功了。
2、本地安装
本地安装是如果你需要使用 gulp，每次都要进行安装的，这里新建一个 gulp-demo 文件夹用于演示。
命令行切换到 gulp-demo 目录，用如下命令创建一个配置文件：
npm init --yes
如下所示，创建成功：
已经初始化好配置文件了，键入如下命令本地安装 gulp：
cnpm install gulp --save-dev // 因为 gulp 是开发依赖，所以使用 --save-dev
完毕，如果成功的话，就可以在刚刚生成的配置文件 package.json 中，看到安装信息了：
三、使用gulp
安装好 gulp 之后，就可以使用它来压缩代码了。
1、压缩js
压缩 js 文件是需要安装 gulp-uglify 这个插件的。
cnpm install gulp-uglify --save-dev
安装完毕，为了演示，初始化了一下目录结构，如下：
|--gulp | |--dist | |--src | |--js | |--test.js | |--gulpfile.js | |--package.json | |--node_modules
逐一介绍下每个文件夹的作用，src 文件夹就是源文件，目录下 js 文件夹用于放置 js 文件，目前放置了一个 test.js，用于测试；dist 文件夹用于待会放置经过 gulp 压缩后的 js 代码；gulpfile.js 文件是一个只要使用 gulp 就必须存在的一个配置文件，且名字不能更改；
下面是 gulpfile.js 文件的内容：
上面代码首先引入了 gulp 和 gulp-uglify，然后就可以使用 gulp 对象的方法了，
- task(...)：新建一个任务，第一个参数为字符串，值随意，最好取一个有意义的名字，这里这个任务的作用就是用来压缩 js 代码的，所以叫 min-js 好了。第二个参数是一个函数，也就是配置 min-js 任务的具体内容。
- src(...)：对哪个目录里面的哪些文件进行处理，上面的 'src/js.js' 代表了对 'src/js' 目录下的所有 js 文件进行处理。
- pipe(uglify())：把压缩 js 的任务加入队列。
- pipe(gulp.dest('dist/js')：把压缩后的 js 文件输出到 'dist/js' 目标目录。
下面是 test.js 的文件内容：
正式开始键入命令进行压缩了：
gulp min-js
出现如下提示，说明压缩成功了：
也可以打开 dist 文件夹，看下成果，如下所示。
空格和换行已经全部去掉了。压缩成功。而且还自动在 dist 目录中给我们创建了 js 文件夹。
2、压缩css
压缩 css 文件是需要安装 gulp-clean-css 插件的，来键入如下命令安装一下：
cnpm i gulp-clean-css -D // -D 是 --save-dev 的简写，说明是开发依赖
如图所示，安装成功。
接着上面的目录结构继续，在 src 目录下，新建 css 文件夹，该文件夹下新建一个样式文件 style.css，以下是最新的目录结构和 style.css 文件的具体内容。
接着，编写 gulpfile.js 文件，添加压缩 css 文件的代码，如下图所示：
接着，就可以在命令行执行压缩 css 文件的命令了。
gulp min-css
如下图所示，压缩 css 文件成功。自动在dist目录下，生成了 css 目录和压缩后的 style.css 文件。
3、编译less
less 是可以方便我们书写 css 样式的，但是浏览器是不认识的，必须经过编译成普通的 css 文件，才会被浏览器认识，使用 gulp 也可以做到，首先安装 gulp-less 插件：
cnpm i gulp-less -D
如下图所示，安装成功：
接着上面的目录结构继续，在 css 文件夹中新建一个 index.less 文件，最新目录结构和 index.less 文件内容如下：
接着，编写 gulpfile.js 文件，引入 gulp-less 和创建编译 less 文件任务，如下图所示：
最后，就可以进行编译了：
gulp compile-less
如下图所示，成功：
4、自动监测文件的改变
手动执行gulp命令，是可以进行压缩，编译等功能，但是并不时实时的，也就是说，如果希望我改变了一些代码，会自动进行压缩，编译等时，需要编写gulpfile.js文件，编写实时监测的代码，如下：
现在，就可以执行 gulp 命令，进行实时监控了：
gulp
我现在尝试改变了一下 css 文件，看终端发生变化了，并且 dist/css 中的 style.css 也改变了。
