gulp-usemin怎么处理多个html文件？

Question

我根目录下有多个html文件，我想通过gulp-usemin处理，但是他的pipelineId不能重复，而且我每个页面都有一些公共库和样式，我总不能每个页面都生成一份吧？
所以想问一下你们都是怎么处理的？？请详细说明一下，谢谢！！！！

Answer 1

我的建议是

1. 不要用 gulp-usemin，用gulp-inject。

2. 先将公共库和公共样式合并压缩好，再替换到每个html页面。

写个思路，仅供参考，唯一麻烦的是每个html页面都得加一段注释

var gulp = require('gulp');
var inject = require('gulp-inject');

gulp.task('minJS', function(){
    return gulp.src('src/js/*.js')
        //此处省略压缩和合并还有rename
        .pipe(gulp.dest('src/tmp'));
});

gulp.task('minCSS', function(){
    return gulp.src('src/css/*.css')
         //此处省略压缩和合并还有rename
         .pipe(gulp.dest('src/tmp'));
});

gulp.task('inject', ['minJS', 'minCSS'], function () {
  var target = gulp.src('./src/**/*.html');
  var sources = gulp.src(['./src/tmp/*.min.js', './src/tmp/*.min.css'], {read: false});
  return target.pipe(inject(sources))
    .pipe(gulp.dest('./src'));
});

当然如果html比较多的话,你不愿意写注释, 也可以使用这个 gulp-cheerio

gulp.task('indexHtml', function() {
    return gulp.src('index.html')
        .pipe(cheerio(function ($) {
            $('script').remove();
            $('link').remove();
            $('body').append('<script src="app.full.min.js"></script>');
            $('head').append('<link rel="stylesheet" href="app.full.min.css">');
        }))
        .pipe(gulp.dest('dist/'));
});

参考资料
https://github.com/klei/gulp-inject
https://github.com/Platform-CUF/use-gulp