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

如果还不熟悉 gulp 的插件，可以阅读上一篇文章：

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

原文作者：林鑫，作者博客：https://github.com/lin-xin/blog

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

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

// gulpfile.jsvar 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中，我们需要先定义好构建块。

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

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

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

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

// dist/index.html    
            
        ......    

更多文章可以访问我的博客：