Есть небольшой проект:
www
|__ app
|__ css
|__ js
index.html
|__ dist
|__ css
|__ js
index.html
gulpfile.js
Стили и скрипты собираю gulp-useref .
Содержимое index.html:
<!-- build:css css/vendor/vendor.css -->
<link rel="stylesheet" href="css/vendor/normalize.min.css">
<link rel="stylesheet" href="css/vendor/jquery.fancybox.css">
<link rel="stylesheet" href="css/vendor/slick.css">
<!-- endbuild -->
<!-- build:css css/style.css -->
<link rel="stylesheet" href="css/style.css">
<!-- endbuild -->
...
<!-- build:js js/vendor/vendor.js -->
<script src="js/vendor/jquery-1.11.2.min.js"></script>
<script src="js/vendor/jquery.fancybox.js"></script>
<script src="js/vendor/slick.min.js"></script>
<!-- endbuild -->
<!-- Main script -->
<!-- build:js js/main.js -->
<script src="js/main.js"></script>
<!-- endbuild -->
После build
скрипты и стили минифицируются.
gulpfile.js:
'use strict';
var gulp = require('gulp'),
uncss = require('gulp-uncss'),
gulpif = require('gulp-if'),
autoprefixer = require('gulp-autoprefixer'),
cleanCSS = require('gulp-clean-css'),
uglify = require('gulp-uglify'),
useref = require('gulp-useref'),
watch = require('gulp-watch');
// Пути
var path = {
app : { // Исходники
html : 'app/*.html',
css : 'app/css/*.css',
js : 'app/js/*.js',
images : 'app/images/**/*.*',
fonts : 'app/fonts/**/*.*'
},
dist : { // Релиз
html : 'dist/',
css : 'dist/css/**/*.css',
js : 'dist/js/',
images : 'dist/images/',
fonts : 'dist/fonts/'
},
watch : { // Наблюдение
html : 'app/**/*.html',
css : 'app/css/**/*.css',
js : 'app/js/**/*.js',
images : 'app/images/**/*.*',
fonts : 'app/fonts/**/*.*'
}
};
// Работа с HTML
gulp.task('html', function(){
gulp.src(path.app.html)
.pipe(useref())
.pipe(gulpif('*.js', uglify()))
.pipe(gulpif('*.css', cleanCSS()))
.pipe(gulp.dest(path.dist.html));
});
// Работа с CSS
gulp.task('css', ['html'], function(){
gulp.src(path.dist.css)
.pipe(uncss({ html: [ '*.html' ] }))
.pipe(gulp.dest(path.dist.css));
});
// Наблюдение
gulp.task('watch', function () {
gulp.watch(path.watch.html, ['html']);
gulp.watch(path.dist.css, ['css']);
});
// Задачи по-умолчанию
gulp.task('default', [
'html',
'css'
]);
Возникла проблема с gulp-uncss
.
Если прописать в таске .pipe(gulpif('*.css', uncss({ html: [ '*.html' ] })))
, то сборка проходит нормально, но стили удаляются из app/index.html
.
Пыталась задать .pipe(gulpif('*.css', uncss({ html: [ 'dist\*.html' ] })))
– тоже самое все.
Вопрос:
Как поправить gulpfile.js чтобы стили и скрипты собирались gulp-useref
, минифицировались и + применялся корректно gulp-uncss (уже для собранного style.css
)?