扫码关注官方订阅号
我根目录下有多个html文件,我想通过gulp-usemin处理,但是他的pipelineId不能重复,而且我每个页面都有一些公共库和样式,我总不能每个页面都生成一份吧?所以想问一下你们都是怎么处理的??请详细说明一下,谢谢!!!!
ringa_lee
我的建议是
不要用 gulp-usemin,用gulp-inject。
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-injecthttps://github.com/Platform-CUF/use-gulp
微信扫码关注PHP中文网服务号
QQ扫码加入技术交流群
扫描下载App
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
PHP学习
技术支持
返回顶部
我的建议是
不要用
gulp-usemin
,用gulp-inject
。先将公共库和公共样式合并压缩好,再替换到每个html页面。
写个思路,仅供参考,唯一麻烦的是每个html页面都得加一段注释
当然如果html比较多的话,你不愿意写注释, 也可以使用这个 gulp-cheerio
参考资料
https://github.com/klei/gulp-inject
https://github.com/Platform-CUF/use-gulp