我根目录下有多个html文件,我想通过gulp-usemin处理,但是他的pipelineId不能重复,而且我每个页面都有一些公共库和样式,我总不能每个页面都生成一份吧?
所以想问一下你们都是怎么处理的??请详细说明一下,谢谢!!!!
我的建议是
不要用
gulp-usemin
,用gulp-inject
。先将公共库和公共样式合并压缩好,再替换到每个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