Я борюсь со следующим:
Мой gulpfile.js компилирует все .less, уменьшает его и объединяет все CSS в. /dist/all.min.css
Есть ли способ переписать HTML файл, удалить все теги стиля и поместить только один тег стиля в него, загружая миниатюрный CSS?
Я борюсь со следующим:
Мой gulpfile.js компилирует все .less, уменьшает его и объединяет все CSS в. /dist/all.min.css
Есть ли способ переписать HTML файл, удалить все теги стиля и поместить только один тег стиля в него, загружая миниатюрный CSS?
Лучший способ справиться с этим - использовать один из инжекторов HTML из get-go. До сих пор я использую 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
для инкрементных построений, но здесь мы видим, что мы смотрим каталог сборки, чтобы выбрать, когда перестраивать HTML файл, и смотреть каталог src для всего остального.
Примечание:
Так как это получает много upvotes, есть пара других плагинов, которые ссылаются на замену рядом с
gulp-inject
. Вы можете посмотреть на них и посмотреть, подходит ли один из них, особенно если вы не используетеgulp-rev
:Есть также две библиотеки CDN, которые делают аналогичную вещь, но для ресурсов CDN
- gulp-google-cdn
- gulp-cdnizer (полное раскрытие: я написал это)
Вы хотите переписать его во время сборки? Почему бы не заменить все ссылки CSS одной ссылкой на all.min.css в исходном коде? В любом случае вы можете использовать gulp-replace плагин для поиска и замены строки в ваших файлах во время сборки. Вот еще один примерный пример:
Шаблон для веб-приложений. HTML5. Шаблон веб-приложения с интерфейсом веб-приложений HTML5, расширенный с помощью 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>