gulp从头到尾实现压缩，合并，加版本号以及部分问题解决(初版)（mac）

使用gulp前的准备工作：

gulp的安装
1- 安装nodejs环境。然后以全局方式安装gulp：

npm install -g gulp

2- 到你的项目文件夹下执行以下命令，按照提示，生成package.json文件：

npm init

3- 全局安装gulp后，还需要在每个要使用gulp的项目中都单独安装一次。
把目录切换到你的项目文件夹中，然后在命令行中执行：

npm install gulp

如果想在安装的时候把gulp写进项目package.json文件的依赖中，则可以加上--save-dev：（我用的是这个）

npm install --save-dev gulp

4- 在项目根目录创建gulpfile.js文件
关于src路径匹配的一些规则如下：

gulp.src('./js/*.js')   // *匹配js文件夹下所有.js格式的文件
gulp.src('./js/**/*.js')                    // ** 匹配js文件夹的0个或多个子文件夹
gulp.src(['./js/*.js','!./js/index.js'])    // ! 匹配除了index.js之外的所有js文件
gulp.src('./js/**/{omui,common}.js')        // {} 匹配{}里的文件名

我的gulpfile.js文件如下（后面会给出注释）：

var gulp = require('gulp'),
    RevAll = require('gulp-rev-all'),
    useref = require('gulp-useref'),
    filter = require('gulp-filter'),
    uglify = require('gulp-uglify'),
    csso = require('gulp-csso'),
    htmlminify = require('gulp-html-minify'),
    autoprefixer = require('gulp-autoprefixer'),
    del = require('del');

gulp.task('default', ['del'], function(){
  var jsFilter = filter('js/**/*.js', {restore: true}),
      cssFilter = filter('css/**/*.css', {restore: true}),
      htmlFilter = filter(['**/*.html'], {restore: true});

  gulp.src('*.html')
      .pipe(useref())
      .pipe(jsFilter)
      .pipe(uglify())
      .pipe(jsFilter.restore)
      .pipe(cssFilter)
      .pipe(autoprefixer())
      .pipe(csso())
      .pipe(cssFilter.restore)
      .pipe(RevAll.revision())
      .pipe(htmlFilter)
      .pipe(htmlminify())
      .pipe(htmlFilter.restore)
      .pipe(gulp.dest('dist'))
});

gulp.task('del',function () {
    del('dist');
});

gulp.watch('*.html', function(){
  gulp.run('default');
});

gulp.watch('js/**/*.js', function(){
  gulp.run('default');
});

gulp.watch('css/**/*.css', function(){
  gulp.run('default');
});

相关代码注释：（有些模块并没有用到，加以注释以便了解和按需使用）

// 1、引入插件
var gulp = require('gulp'),
    //header = require('gulp-header'),//载入gulp-header模块，用于给文件头部添加信息
    //rev = require('gulp-rev'),//给静态资源文件名添加hash值:unicorn.css => unicorn-d41d8cd98f.css
    RevAll = require('gulp-rev-all'),//给静态资源文件名添加hash值，相比rev更加强大，对文件中依赖的资源的改变也会发现并更新hash值，用这个比较好。
    //revReplace = require('gulp-rev-replace'),//重写被gulp-rev重命名的文件名。
    useref = require('gulp-useref'),//解析构建块在HTML文件来代替引用未经优化的脚本和样式表。作用:src中的html文件中引用多个样式文件,通过构建工具的文件合并多个文件为注释中定义的css文件名的一个文件. 新的html文件里就自动删除以前的多个样式文件的引用,重新引用合并后的css文件 
    //htmlreplace = require('gulp-html-replace'),//替换html中的构建块（css合并后，替换掉原先html中引入的css文件）与useref的区别是可以将重命名写在任务配置里
    filter = require('gulp-filter'),//在虚拟文件流中过滤文件
    uglify = require('gulp-uglify'),//混淆压缩js文件
    //cssmin = require('gulp-cssmin'),//css压缩
    csso = require('gulp-csso'),//压缩优化css
    //uncss = require('gulp-uncss'),//去除css文件中的 未用到的css
    //less = require('gulp-less'),// less预编译 
    htmlminify = require('gulp-html-minify'),//压缩HTML
    //imagemin = require('gulp-imagemin'),//压缩图片
    //zip = require('gulp-zip'),//ZIP压缩文件
    autoprefixer = require('gulp-autoprefixer'),//自动为css添加浏览器前缀
    //rename = require('gulp-rename'),//重命名文件
    //concat = require('gulp-concat'),//合并文件
    //gulpif = require('gulp-if'),//控制流：有条件地运行一个任务
    //babel = require('gulp-babel'),//将ES6编译为ES5
    //gutil = require('gulp-util'),// 使用工具，用于打印错误日志
    //ejs = require("gulp-ejs"),// 合并html模板 批量生成演示的html文档的时候很有用 
    //clean = require('gulp-clean'),//清空文件夹
    del = require('del');//删除文件

// 下面的任务中并没有用到上面引入的所有插件，引入只是为了展示大部分插件的作用

// 2、编写gulp自动化压缩，合并，加版本号任务模块
gulp.task('default', ['del'], function(){
  var jsFilter = filter('js/**/*.js', {restore: true}),
      cssFilter = filter('css/**/*.css', {restore: true}),
      htmlFilter = filter(['**/*.html'], {restore: true});

  gulp.src('*.html')
      .pipe(useref()) // 解析html中的构建块
      .pipe(jsFilter) // 过滤出所有js
      .pipe(uglify()) // 混淆压缩js
      .pipe(jsFilter.restore) // 取消js文件过滤（恢复）
      .pipe(cssFilter) // 过滤出所有css
      .pipe(autoprefixer()) // 自动添加浏览器前缀
      .pipe(csso()) // 压缩优化css
      .pipe(cssFilter.restore) // 取消css文件过滤（恢复）
      // .pipe(RevAll.revision({  // 生成版本号  ps:如果不过滤html，给html也添加版本号，则直接执行RevAll.revision()即可
      //   dontRenameFile: ['.html'],  // 不给 html 文件添加版本号
      //   dontUpdateReference: ['.html']  // 不给文件里链接的html加版本号
      // }))
      .pipe(RevAll.revision()) // 增加版本号
      .pipe(htmlFilter)  // 过滤出所有html
      .pipe(htmlminify())  // 压缩html
      .pipe(htmlFilter.restore)  // 取消html文件过滤（恢复）
      .pipe(gulp.dest('dist'))//设置输出路径
});

// 清空文件夹
// 方法1
// gulp.task('clean', function(){
//   return gulp.src('dist', {read: false})
//   .pipe(clean());// 构建前先删除dist文件里的旧版本
// });

// 方法2
// gulp.task('del',function () {
//     gulp.src(['dist/static/css','dist/static/js'],{read:false})
//         .pipe(del());                             
// });//删除指定旧版本

gulp.task('del',function () {
    del('dist');// 构建前先删除dist文件里的旧版本
});

// 监听文件改变
gulp.watch('*.html', function(){
  gulp.run('default');
});

gulp.watch('js/**/*.js', function(){
  gulp.run('default');
});

gulp.watch('css/**/*.css', function(){
  gulp.run('default');
});

清空文件夹的两种方式，用哪种按自己的需求而定，这里我用的del直接清空dist文件夹

5- 在使用useref 时，html页面需要合并的js、css的文件必须放置于以**释块之中

以css为例：

<!--build:css css/main.min.css -->
    
<!-- endbuild -->

拿我的html举例：


这里注意如果是通过CDN引入的文件，不要放在其中，不然会报错：

6- 配置完gulpfile.js后，在项目文件夹下执行 gulp命令，就会默认执行名为“default”的task，
如果你用了其他的命明，也可以用gulp taskName 来执行对应名称的任务。
执行成功后终端提示如下：

注意：

• 插件模块要使用前，必须先安装，不然会报类似
• Error: Cannot find module 'gulp-rev-all'... 的错误
• 模块安装用：npm install gulp-rev-all ，如果要保存在package.json的话：
• npm install gulp-rev-all --save
• 开发环境安装可以用，将配置放入dev配置项中：npm install gulp-rev-all --save-dev

我用gulp构建后的文件如下：

因为加入了watch监听，所以每次更改文件，都会删除原先的dist文件夹，重新生成新的更新后的dist文件夹。
这也是在学习使用过程中的总结，如有任何问题欢迎指正。