现在做的一个项目提出了一个优化方案,需要把js、css中的内容直接写入html中,减少浏览器请求次数。
之前发现gulp-usemin可以实现这个功能,但是需要在被替换的标签前后加上注释,这样改动量比较大,有没有类似的插件能够实现这个功能,并且不需要在标签前后加上注释的。
初学者,不是太懂,请高人指点,多谢多谢。
不引用外部的静态资源文件,而直接通过<style>
或<script>
写入的css与js,一般叫做inline resources。
用gulp inline
作为关键字搜索,就可以找到gulp-inline-source和gulp-inline。我觉得比较适合题主的要求。
你可以看看webpack , 应该可以
有啊,gulp-cheerio https://github.com/knpwrs/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/'));
});
关于gulp更多内容
https://github.com/Platform-CUF/use-gulp