Я борюсь со следующим:
Мой gulpfile.js компилирует все .less, минимизирует его и объединяет весь CSS в ./dist/all.min.css
Есть ли способ переписать файл HTML, удалить все теги стиля и добавить в него только один тег стиля, загружая минимизированный CSS?
Лучший способ справиться с этим — использовать один из HTML-инжекторов с самого начала. Я использую gulp-inject до сих пор с некоторым успехом.
Добавьте gulp-inject в свой проект:
npm i --save-dev gulp-inject
Предполагая, что у вас есть макет папки, подобный этому:
Ваш 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:Также есть две библиотеки CDN, которые делают то же самое, но для ресурсов CDN
- gulp-google-cdn
- gulp-cdnizer (полное раскрытие: я написал это)
Вы хотите переписать его во время сборки? Почему бы не заменить все ссылки CSS одной ссылкой на all.min.css в вашем исходном коде? В любом случае, вы можете использовать подключаемый модуль gulp-replace для поиска и замены строки в ваших файлах во время сборка. Вот еще один пример проекта для просмотра:
Шаблон веб-приложения – шаблон интерфейса веб-приложения HTML5 Boilerplate дополнен таблицами стилей LESS и Gulp.js система сборки.
См. также gulp-smoosher. Пример:
index.html
<html>
<head>
<!-- smoosh -->
<link rel='stylesheet' href='styles.css'>
<!-- endsmoosh -->
</head>
styles.css
body {
background: red;
}
Gulpfile.js
gulp.task('default', function () {
gulp.src('index.html')
.pipe(smoosher())
.pipe(gulp.dest('dist'));
});
расстояние/index.html
<html>
<head>
<style>body {
background: red;
}</style>
</head>
