我正在与以下问题作斗争：
我的gullfile.js编译了所有.less，缩小了它，并将所有CSS插入其中/dist/all.min.css
有没有一种方法可以重写HTML文件，删除所有样式标记，只在加载缩小的CSS时放入一个样式标记？
处理此问题的最佳方法是从一开始就使用其中一个HTML注入器。到目前为止，我正在使用gulp-inject取得一些成功。
为您的项目添加gullow-inject:
npm i --save-dev gulp-inject
假设你有一个类似的文件夹布局：
- 构建/
- src/
- index.html
- 少/
- main.less
- js/
- app.js
您的HTML应该在您希望注入CSS或JS文件的地方包括这一点，可以是两者的头，也可以是CSS的头和JS文件的正文之前：
<!-- inject:css -->
<!-- any *.css files among your sources will go here as: <link rel="stylesheet" href="FILE"> -->
<!-- endinject -->
<!-- inject:js -->
<!-- any *.js files among your sources will go here as: <script src="FILE"></script> -->
<!-- endinject -->
然后你的gulpfile看起来像这样：
gulp.task('build-styles', function() {
// the return is important!
return gulp.src('src/less/main.less')
.pipe(less())
.pipe(gulp.dest('build'));
});
gulp.task('build-js', function() {
// the return is important if you want proper dependencies!
return gulp.src('src/js/**/*.js')
// lint, process, whatever
.pipe(gulp.dest('build'));
});
gulp.task('build-html', function() {
// We src all files under build
return gulp.src('build/**/*.*')
// and inject them into the HTML
.pipe(inject('src/index.html', {
addRootSlash: false, // ensures proper relative paths
ignorePath: '/build/' // ensures proper relative paths
}))
.pipe(gulp.dest('build'));
});
gulp.task('build', ['build-styles', 'build-js'], function(cb) {
gulp.run('build-html', cb);
});
gulp.task('default', ['build'], function() {
gulp.watch('src/**/*.less', function() {
gulp.run('build-styles');
});
gulp.watch(['build/**/*.*','!build/index.html', 'src/index.html'], function() {
gulp.run('build-html');
});
});
这只是一个粗略的想法，对于增量构建，您可以使用gulp-watch做更多的工作，但这里的关键是，我们观察build目录来选择何时重建HTML文件，并观察src目录来了解其他所有内容。
注意：
由于这得到了很多支持，除了
gulp-inject之外，还有其他几个插件可以进行引用替换。你可能想看看它们，看看其中一个是否更适合你，尤其是如果你没有使用gulp-rev:
- 吞咽usemin
- gullow useref
还有两个CDN库做着类似的事情，但对于CDN资源
- 吞下谷歌cdn
- gullow-cdnizer(完全披露：这是我写的)
您想在构建过程中重写它吗？为什么不在源代码中用指向all.min.CSS的单个链接替换所有CSS链接？无论如何，您可以使用gulp-replaceplug-in在构建过程中搜索和替换文件中的字符串。这是另一个可以查看的示例项目：
Web应用程序Boilerplate-HTML5 Boilerpoard前端Web应用程序模板，使用LESS样式表和Gulp.js构建系统进行扩展。
另请参阅吞咽烟雾器。示例：
index.html
<html>
<head>
<!-- smoosh -->
<link rel='stylesheet' href='styles.css'>
<!-- endsmoosh -->
</head>
样式.css
body {
background: red;
}
Gulpfile.js
gulp.task('default', function () {
gulp.src('index.html')
.pipe(smoosher())
.pipe(gulp.dest('dist'));
});
dist/index.html
<html>
<head>
<style>body {
background: red;
}</style>
</head>