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

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

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

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

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

基础配置：

var gulp = require('gulp'); // 基础库
var uglify = require('gulp-uglify'), // js压缩
  rename = require('gulp-rename'); // 文件重命名
gulp.task('script', function() {
  return gulp.src('src/js/*.js') // 指明源文件路径、并进行文件匹配
    .pipe(rename({ suffix: '.min' })) // 重命名
    .pipe(uglify({ preserveComments:'some' })) // 使用uglify进行压缩，并保留部分注释
    .pipe(gulp.dest('dist/js')); // 输出路径
});

执行命令：
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'); // 基础库
var uglify = require('gulp-uglify'), // js压缩
  rename = require('gulp-rename'), // 文件重命名
  sourcemaps = require('gulp-sourcemaps'); // 来源地图
gulp.task('script', function() {
  return gulp.src(['src/js/*.js','!*.min.js']) // 指明源文件路径、并进行文件匹配，排除 .min.js 后缀的文件
    .pipe(sourcemaps.init()) // 执行sourcemaps
    .pipe(rename({ suffix: '.min' })) // 重命名
    .pipe(uglify({ preserveComments:'some' })) // 使用uglify进行压缩，并保留部分注释
    .pipe(sourcemaps.write('maps')) // 地图输出路径（存放位置）
    .pipe(gulp.dest('dist/js')); // 输出路径
});

执行命令：
gulp script

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

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

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

基础配置：

var gulp = require('gulp'); // 基础库
var imagemin = require('gulp-imagemin'), // 图片压缩
  pngquant = require('imagemin-pngquant'), // 深度压缩
  changed = require('gulp-changed'); // 只操作有过修改的文件
gulp.task('images', function(){
  return gulp.src('src/images/**/*.{png,jpg,gif,svg}') // 指明源文件路径、并进行文件匹配
    .pipe(changed('dist/images')) // 对比文件是否有过改动（此处填写的路径和输出路径保持一致）
    .pipe(imagemin({
      progressive: true, // 无损压缩JPG图片
      svgoPlugins: [{removeViewBox: false}], // 不移除svg的viewbox属性
      use: [pngquant()] // 使用pngquant插件进行深度压缩
    }))
    .pipe(gulp.dest('dist/images')); // 输出路径
});

执行命令：
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'); // 基础库
var concat = require("gulp-concat"); // 文件合并
gulp.task('concat', function () {
    gulp.src('js/*.min.js')  // 要合并的文件
    .pipe(concat('libs.js'))  // 合并成libs.js
    .pipe(gulp.dest('dist/js'));
});

执行命令：
gulp concat

3.5 文件清理(gulp-clean)：

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

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

基础配置：

var gulp = require('gulp'); // 基础库
var clean = require('gulp-clean'); // 文件清理
gulp.task('clean', function() {
  return gulp.src(['dist/css/maps','dist/js/maps'], {read: false})
    .pipe(clean());
});

执行命令：
gulp clean