3. 扩展优化（Extend & Optimize Task）

至此，一套简单的前端自动化工作流/Gulp工作流便已经完成。现在，我们开始优化并扩展这些插件，使我们的工作流更为”智能”。

3.1 文件重命名(gulp-rename)：

像jQuery一样，通常为了表示该文件是压缩版，会在文件名后加上 .min 后缀。

安装命令：npm install gulp-rename —save-dev

基础配置：

var gulp = require('gulp'); // 基础库

执行命令：gulp script

3.2 来源地图(gulp-sourcemaps)：

这是个非常有用的插件，我们在压缩、合并等操作之后，调试时所看到的内容，都是编译后的代码。这样就导致一个问题，调试过程中无法和源码（编译时的代码）位置相对应，让调试变的十分困难。例如：一个jQuery，源码接近1万行。但压缩后只有短短的3~4行，并且变量名称也已发生改变。此时一旦报错，你很难从错误信息中直接找到对应代码的原始位置。同样，CSS也会遇到类似问题。而sourcemaps作用，便是成一个.map文件，里面储存着对应的源码位置。并内嵌在你转换后的文件底部/# sourceMappingURL=maps/filename.css.map /。这样在我们调试时，就会直接显示（映射）源码，而不时编译后的代码。

安装命令：npm install gulp-sourcemaps —save-dev

基础配置：

var gulp = require('gulp'); // 基础库

执行命令：gulp script

3.3 只操作有过修改的文件(gulp-changed)：

比如我们有20个文件，当你修改其中1个文件时，由于任务的局限性，也会把其余19匹配的无辜的同类给一并进行处理，这样就大大降低了效率。而 gulp-changed 插件，会首先把文件进行比对，如果文件没有改动，则跳过后续任务。

安装命令：npm install gulp-changed —save-dev

基础配置：

var gulp = require('gulp'); // 基础库

执行命令：gulp images

此时我们再去 dist/images 文件夹，查看每个图片的最后修改日期，你就会发现只针对你刚才修改过的图片（文件）行了处理，而那些之前已经处理过的图片则没有再进行操作。

注：无论是 gulp-changed 还是下文中提到的 gulp-cache ，对 sass 文件无效，始终会对所有匹配文件进行操作。

3.4 文件合并(gulp-concat)：

比如我们有多个JS库，jquery.min.js、bootstrap.min.js、angular.min.js。此时可以通过合并，减少网络请求。

安装命令：npm install gulp-concat —save-dev

基础配置：

var gulp = require('gulp'); // 基础库

执行命令：gulp concat

3.5 文件清理(gulp-clean)：

简单的说，就是一键删除（清理）文件。就拿为了调试所生成的 .map 文件为例，在正式发布时并不需要，此时我们就能通过 clean任务进行清理。

安装命令：npm install gulp-clean —save-dev

基础配置：

var gulp = require('gulp'); // 基础库

执行命令：gulp clean