Не могу понять в чем проблема, проганяю файлы через gulp-rigger, а они не до конца собираются, почему то файл head.html при запуске gulp почти никогда не собирается в index.html, но при наблюдении (задача watch) все нормально: изменяю что-то в head.html - все собирается отлично, хотя используются одни и те же задачи.
Вот структура проэкта:
joxi.ru/GrqLp6afN3WYNA
Вот файл index.html который собирает в себе все файлы из папки src/template:
<!DOCTYPE html>
<html>
//= template/head.html
<body>
<div class="l-wrapper">
//= template/header.html
<main class="content">
</main>
<!-- .content -->
</div>
<!-- .wrapper -->
//= template/footer.html
</body>
</html>
Вот файл head.html
<head>
<meta charset="utf-8"/>
<title>SMACSS</title>
<meta name="keywords" content=""/>
<meta name="description" content=""/>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/font-awesome.css"/>
<link rel="stylesheet" href="css/simple-line-icons.css"/>
<link rel="stylesheet" href="css/owl.carousel.css"/>
<link rel="stylesheet" href="css/jquery.fancybox.css"/>
<link rel="stylesheet" href="css/jquery.formstyler.css"/>
<link rel="stylesheet" href="css/animate.css"/>
<link rel="stylesheet" href="css/bootstrap.css"/>
<link rel="stylesheet" href="css/normalize.css"/>
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i,800,800i&subset=cyrillic" rel="stylesheet">
<link rel="stylesheet" href="css/main.css?rev=@@hash"/>
<script src="js/jquery-1.11.1.min.js" type="text/javascript"></script>
<script src="js/jquery-migrate-1.3.0.js" type="text/javascript"></script>
<script src="js/jquery.fancybox.js"></script>
<script src="js/owl.carousel.js"></script>
<script src="js/jquery.formstyler.js" type="text/javascript"></script>
<script src="js/jquery.columnizer.js" type="text/javascript"></script>
<script src="js/jquery.easytabs.js" type="text/javascript"></script>
<script src="js/jquery-ui.js" type="text/javascript"></script>
<script src="js/jquery.touch-punch.min.js" type="text/javascript"></script>
<script src="js/main.js" type="text/javascript"></script>
<!--[if lt IE 9]>
<script src="js/html5shiv.js"></script>
<script src="js/respond.js"></script>
<![endif]-->
</head>
Вот сам файл gulpfile.js:
"use strict";
var gulp = require('gulp'),
spritesmith = require('gulp.spritesmith'),
notify = require('gulp-notify'),
rev = require('gulp-rev-append'),
autoprefixer = require('gulp-autoprefixer'),
csscomb = require('gulp-csscomb'),
plumber = require('gulp-plumber'),
sass = require('gulp-sass'),
rigger = require('gulp-rigger'),
imagemin = require('gulp-imagemin'),
pngquant = require('imagemin-pngquant'),
rimraf = require('rimraf'),
watch = require('gulp-watch'),
mainBowerFiles = require('main-bower-files');
var path = {
build: {
html: 'build/',
js: 'build/js/',
css: 'build/css/',
img: 'build/images/',
fonts: 'build/css/fonts/',
sprite: 'build/css/sprite-build/'
},
src: {
html: 'src/*.html',
js: 'src/js/main.js',
css: 'src/css/main.scss',
img: 'src/images/*.*',
fonts: 'src/css/fonts/*.*',
sprite: 'src/images/sprite/*.png'
},
watch: {
html: 'src/**/*.html',
js: 'src/js/*.js',
css: 'src/css/*/*.scss',
img: 'src/images/*.*',
fonts: 'src/css/fonts/*.*',
sprite: 'src/images/sprite/*.png'
}
};
gulp.task('clean', function (cb) {
rimraf(path.clean, cb);
});
gulp.task('html:build', function () {
return gulp.src(path.src.html)
.pipe(rigger())
.pipe(gulp.dest(path.build.html));
});
gulp.task('js:build', function () {
return gulp.src(path.src.js)
.pipe(gulp.dest(path.build.js));
});
gulp.task('css:build', function () {
return gulp.src(path.src.css)
.pipe(sass().on('error', sass.logError))
.pipe(plumber())
.pipe(autoprefixer({
browsers: ['last 2 versions'],
cascade: false
}))
.pipe(csscomb('.csscomb.json'))
.pipe(gulp.dest(path.build.css))
.pipe(notify("Done!"));
});
gulp.task('image:build', function () {
return gulp.src(path.src.img)
.pipe(imagemin({
progressive: true,
svgoPlugins: [{removeViewBox: false}],
use: [pngquant()],
interlaced: true
}))
.pipe(gulp.dest(path.build.img));
});
gulp.task('fonts:build', function() {
return gulp.src(path.src.fonts)
.pipe(gulp.dest(path.build.fonts));
});
gulp.task('rev', function() {
return gulp.src('./src/template/head.html')
.pipe(rev())
.pipe(gulp.dest('./src/template/'));
});
//sprite
gulp.task('sprite', function () {
var spriteData = gulp.src(path.src.sprite).pipe(spritesmith({
imgName: 'sprite.png',
cssName: 'sprite.css'
}));
return spriteData.pipe(gulp.dest(path.build.sprite));
});
gulp.task('mainJS', function() {
return gulp.src(mainBowerFiles('**/*.js'))
.pipe(gulp.dest('build/js'))
});
gulp.task('mainCSS', function() {
return gulp.src(mainBowerFiles('**/*.css'))
.pipe(gulp.dest('build/css'))
});
gulp.task('build', [
'html:build',
'js:build',
'css:build',
'fonts:build',
'image:build',
'rev',
'sprite',
'mainJS',
'mainCSS'
]);
gulp.task('watch', function(){
watch([path.watch.html], function(event, cb) {
gulp.start('html:build');
});
watch([path.watch.css], function(event, cb) {
gulp.start('css:build')
});
watch([path.watch.js], function(event, cb) {
gulp.start('js:build');
});
watch([path.watch.img], function(event, cb) {
gulp.start('image:build');
});
watch([path.watch.fonts], function(event, cb) {
gulp.start('fonts:build');
});
watch([path.src.css], function(event, cb) {
gulp.start('rev');
});
watch([path.watch.sprite], function(event, cb) {
gulp.start('sprite');
});
watch(['bower_components'], function(event, cb) {
gulp.start('mainJS');
gulp.start('mainCSS');
});
});
gulp.task('default', ['build', 'watch']);
Подскажите почему head.html при запуске gulp почти ни когда не собирается в index.html?
И может у кого есть рекомендации какие в общем по проекту, сборке, оптимизации файла gulpfile.js буду очень признателен.
Простой
