gulp自动化压缩合并、加版本号解决方案

虽然网上有很多的 gulp 构建文章,但是很多都已经随着 gulp 插件的更新无法运行了。因此,我写了这个比较简单的构建方案。

如果还不熟悉 gulp 的插件,可以阅读上一篇文章:精通gulp常用插件

这个方案主要是为了实现js/css的压缩合并、自动添加版本号和压缩html。

  • gulp-csso 压缩优化css
  • gulp-uglify 压缩js
  • gulp-html-minify 压缩html
  • gulp-rev-all 生成版本号

主要通过上面插件实现功能,其他插件配合使用。

// gulpfile.js
var gulp = require('gulp'),
    htmlmini = require('gulp-html-minify'),
    useref = require('gulp-useref'),
    uglify = require('gulp-uglify'),
    csso = require('gulp-csso'),
    filter = require('gulp-filter'),
    RevAll = require('gulp-rev-all'),
    del = require('del');

gulp.task('default',['del'], function () {
    var jsFilter = filter('**/*.js',{restore:true}),
        cssFilter = filter('**/*.css',{restore:true}),
        htmlFilter = filter(['**/*.html'],{restore:true});
    gulp.src('/*.html')
        .pipe(useref())                         // 解析html中的构建块
        .pipe(jsFilter)                         // 过滤所有js
        .pipe(uglify())                         // 压缩js
        .pipe(jsFilter.restore)
        .pipe(cssFilter)                        // 过滤所有css
        .pipe(csso())                           // 压缩优化css
        .pipe(cssFilter.restore)
        .pipe(RevAll.revision({                 // 生成版本号
            dontRenameFile: ['.html'],          // 不给 html 文件添加版本号
            dontUpdateReference: ['.html']      // 不给文件里链接的html加版本号
        }))
        .pipe(htmlFilter)                       // 过滤所有html
        .pipe(htmlmini())                       // 压缩html
        .pipe(htmlFilter.restore)
        .pipe(gulp.dest('/dist'))
})

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

在html中,我们需要先定义好构建块。




    
    gulp自动化构建解决方案
         // 定义了构建后引用的css路径
    
    
    


    ......
    
            // 定义了构建后引用的js路径
    
    
    
    


执行构建完成后,会生成 dist 文件夹,目录为:

|-dist
|   |-static
|       |-css
|           |-index.96cf44da.css
|       |-js
|           |-index.42ce3282.js
|   |-index.html

构建完的index.html,我们忽略压缩的html,完成了压缩合并添加版本号等功能。

// dist/index.html



    
    gulp自动化构建解决方案
    


    ......

    


更多文章可以访问我的博客:lin-xin/blog

你可能感兴趣的:(gulp自动化压缩合并、加版本号解决方案)