Стоит задача с помощью Gulp задачи минифицировать CSS, JS фалы и вставить их содержание прямо в HTML страницу что бы уменьшить количество запросов на сервер. Вопрос: Как это сделать?
1 ответ
Используйте gulp-include для объединения файлов.
Структура файлов:
+-- dist
+-- src
| +-- index.html
| +-- main.css
| +-- main.js
+-- node_modules
+-- gulpfile.js
+-- package.json
index.html
<!DOCTYPE html>
<html>
<head>
<style>
<!--=include main.min.css -->
</style>
</head>
<body>
<script>
<!--=include main.min.js -->
</script>
</body>
</html>
gulpfile.js
var gulp = require('gulp'),
rename = require('gulp-rename'),
include = require("gulp-include"),
cleanCSS = require('gulp-clean-css'),
minify = require('gulp-minify');
gulp.task('default', function () {
gulp.src('src/main.css')
.pipe(cleanCSS())
.pipe(rename('main.min.css'))
.pipe(gulp.dest('dist'));
gulp.src('src/main.js')
.pipe(minify({noSource: true}))
.pipe(rename('main.min.js'))
.pipe(gulp.dest('dist'));
gulp.src('src/index.html')
.pipe(include({
includePaths: [
"dist"
]
}))
.pipe(gulp.dest('dist'));
});