GULP有什么插件能够对HTML文件的css进行合并

Question

GULP对HTML文件中引用的css或js资源列表进行合并与压缩；

Answer 1

gulp-useref
更多gulp内容，可以参考 https://github.com/Platform-CUF/use-gulp

Answer 2

分享一下团队框架里合并与压缩的 task，使用到 gulp-merge，gulp-concat 和 gulp-uglify 三个插件，gulp-concat 可以合并静态资源文件，gulp-merge 可以根据规则改写 HTML 里对应的资源引用，gulp-uglify 是专门压缩 Js 的插件。

// 定义需要合并的资源规则到一个 JSON 文件 mergeRule.json 中
{
  "../public/js/all.js" : ["../public/js/prettify.js", "../public/js/lang-css.js", "../public/js/main.js"]
}

// 合并变更文件
var concat = require('gulp-concat'),
    merge = require('gulp-merge'),
    uglify = require('gulp-uglify');
    
gulp.task('merge', function() {
  // 读取合并规则并保存起来
  var _mergeRule = require('mergeRule.json');

  // 合并文件
  for(var _key in _mergeRule) {

    var _resultFile = _key,
        _resultFileName = path.basename(_resultFile),
        _resultFilePath = path.dirname(_resultFile),
        _value = _mergeRule[_key]; // 来源文件原始路径获取

    gulp.src(_value)
        .pipe(plugins.plumber({
          errorHandler: function(_error) {
            // 出错处理
          }}))
        .pipe(concat(_resultFileName))
        .pipe(uglify()) // 压缩文件
        .pipe(gulp.dest(_resultFilePath));
  }
  // 变更 HTML 中的文件引用路径
  gulp.src('*.html')
      .pipe(merge(_mergeRule))
      .pipe(gulp.dest('dest'));
});

实际运行可以参考 https://github.com/QMUI/qmui_web