进阶篇1. Gulp介绍
gulp是前端开发过程中对代码进行构建的工具，是自动化项目的利器；它不仅能对网站资源进行优化，而且在开发过程中很多重复的任务能够使用它来自动完成；使用Gulp，我们不仅可以很愉快的编写代码，而且大大提高我们的工作效率。
gulp是基于Nodejs的自动任务运行器，能自动化地完成 javascript/coffee/sass/less/html/image/css 等文件的的测试、检查、合并、压缩、格式化、浏览器自动刷新、部署文件生成，并监听文件在改动后重复指定的这些步骤。
在第一篇中我们自己动手写了一些CSS代码。然而，现在我们很少会直接写Html和CSS代码，而是写与之对应Jade、SCSS或者LESS代码，然后利用工具编译成HTML和CSS代码。Gulp就可以帮我完成这个编译的动作。（而且HTML代码虽然在Drupal主题中不能直接使用，但是它依然很有用。）
（我们通常会在主题文件夹的根目录中专门建立一个文件夹来放置所有开发时的SCSS、LESS和JS代码，然后把经过Gulp处理后的HTML、CSS和JS代码放到根目录中对应的HTML、CSS和JS文件夹中，再通过第一篇中讲述的方法来引入CSS和JS代码，而HTML代码则即可以作为我们覆写主题的参考，也可以作为展示网页设计和前端效果的静态页面代码。）
gulp的大致安装步骤：
首先当然是安装nodejs，通过nodejs的npm全局安装和项目安装gulp，其次在项目里安装所需要的gulp插件，然后新建gulp的配置文件gulpfile.js并写好配置信息（定义gulp任务），最后通过命令提示符运行gulp任务即可。
运行gulp的任务之前，还需要下载并安装任务相关的插件，这里先对一些常用插件进行介绍，我们将在下一节中具体介绍gulp的安装。
gulp-if
这个插件的功能也很简单，可以条件性的添加stream，如.pipe($.if(flag, action1()))，则只会在flag变量为true时才会将action1()添加到stream中去。其实就是在gulpfile.js中实现if判断。
gulp-eslint：
用于检查JS代码的语法错误并统一代码的风格。
gulp-sass：
用于编译SASS和SCSS文件。
gulp-livereload:
当监听文件发生变化时，浏览器自动刷新。
gulp-autoprefixer:
根据设置浏览器版本自动处理浏览器前缀。使用她我们可以很潇洒地写代码，不必考虑各浏览器兼容前缀。
gulp-sourcemaps：
这是个非常有用的插件，我们在压缩、合并等操作之后，调试时所看到的内容，都是编译后的代码。这样就导致一个问题，调试过程中无法和源码（编译时的代码）位置相对应，让调试变的十分困难。
例如：一个jQuery，源码接近1万行。但压缩后只有短短的3-4行，并且变量名称也已发生改变。此时一旦报错，你很难从错误信息中直接找到对应代码的原始位置。同样，CSS也会遇到类似问题。
而sourcemaps作用，便是成一个.map文件，里面储存着对应的源码位置。并内嵌在你转换后的文件底部/# sourceMappingURL=maps/filename.css.map /。这样在我们调试时，就会直接显示（映射）源码，而不时编译后的代码。
gulp-imagemin：图片压缩
imagemin-pngquant：深度压缩
gulp-concat:合并javascript文件，减少网络请求。
gulp-uglify:压缩javascript文件，减小文件大小。
gulp-clean-css:压缩css文件，减小文件大小，并给引用url添加版本号避免缓存。
gulp-htmlmin:压缩html，可以压缩页面javascript、css，去除页面空格、注释，删除多余属性等。