gulp文件压缩，添加版本号，文件路径替换的实例

关于如何搭建gulp和准备工作请看上一篇文章
gulp从头到尾实现压缩，合并，加版本号以及部分问题解决(初版)（mac）

1- 我的文件结构如下：
gulp文件压缩，添加版本号，文件路径替换的实例

2- gulpfile.js 文件配置如下：

var gulp = require('gulp'),
    rev = require('gulp-rev'), // 给静态资源文件名添加hash值:unicorn.css => unicorn-d41d8cd98f.css
	runSequence = require('run-sequence'),
	jshint = require('gulp-jshint'), // js文件压缩错误检查，具体用法可百度，很简单，这里不多说了
	uglify = require('gulp-uglify'), // js混淆压缩
	imgMin = require('gulp-imagemin'), // 图片压缩
	csso = require('gulp-csso'), // css压缩
	htmlmin = require('gulp-htmlmin'), // html压缩
	clean = require('gulp-clean'), // 清除文件、文件夹

// 定义css，js源文件路径
var cssSrc = ['css/*.css', '!./node_modules/**'];
var jsSrc = ['js/*.js', '!./node_modules/**'];
var imgSrc = ['img/**/*.{png,jpg,gif,ico,jpeg}', '!./node_modules/**'];

// 清空文件夹 (read: false:不读取文件，加快程序)
gulp.task('clean',function () {
  return gulp.src(['./dist', './rev'], {read: false})
    .pipe(clean());                     
});

// 压缩css，添加版本号
gulp.task('css', function(){
  return gulp.src(cssSrc)
    .pipe(csso())
    .pipe(rev())
    .pipe(gulp.dest('./dist/css'))
    .pipe(rev.manifest())
    .pipe(gulp.dest('./rev/css'));
});

// 压缩js，添加版本号
gulp.task('js', function(){
  return gulp.src(jsSrc)
    .pipe(rev())
    .pipe(uglify())
    .pipe(gulp.dest('./dist/js'))
    .pipe(rev.manifest())
    .pipe(gulp.dest('./rev/js'));
});

// 压缩image
gulp.task('image', function(){
    return gulp.src(imgSrc)
      .pipe(imgMin({
        optimizationLevel: 5,
        progressive: true,
        interlaced: true,
        multipass: true
      }))
      .pipe(rev())
      .pipe(gulp.dest('./dist/img'))
      .pipe(rev.manifest())
      .pipe(gulp.dest('./rev/img'));
});

//改变html引用路径
gulp.task('rev', function(){
    var options = {
      removeComments: true,//清除HTML注释
      collapseWhitespace: true,//压缩HTML
      collapseBooleanAttributes: true,//省略布尔属性的值 <input checked="true"/> ==> <input />
      removeEmptyAttributes: true,//删除所有空格作属性值 <input id="" /> ==> <input />
      removeScriptTypeAttributes: true,//删除<script>的type="text/javascript"
      removeStyleLinkTypeAttributes: true,//删除<style>和<link>的type="text/css"
      minifyJS: true,//压缩页面JS
      minifyCSS: true//压缩页面CSS
    };
    return gulp.src(['./rev/**/*.json','./*.html'])
      .pipe(revCollector({
          replaceReved: true,
      }))
      .pipe(htmlmin(options))
      .pipe(gulp.dest('./dist'));
});

gulp.task('dev', function(done){
  condition = false;
  runSequence(['clean'], ['css'], ['js'], ['image'],  ['rev'], done);
});

gulp.task('default', ['dev']);

命令行执行gulp后的文件结构如下：
gulp文件压缩，添加版本号，文件路径替换的实例

文件详情如下（以login.html为例）：

补充：文件我没有做重命名，将压缩后的文件替换为**.min.css之类的名称，也米有做监听，因为实际生产中的项目文件量过大，所以我采取上线前整体压缩打包的方式，每次要打包时，执行一次gulp就好。

仅供参考，为记录学习过程。

gulp文件压缩，添加版本号，文件路径替换的实例

相关推荐