Why is gulp-rigger not fully picking up the html file?

D

Dark192016-08-28 17:51:15

gulp.js

Dark19, 2016-08-28 17:51:15

I can’t understand what the problem is, I run the files through gulp-rigger, but they are not fully collected, for some reason the head.html file is almost never collected in index.html when gulp is launched, but when watching (watch task) everything is fine: I change something in head.html - everything builds fine even though the same tasks are used.
Here is the structure of the project: joxi.ru/GrqLp6afN3WYNA
Here is the index.html file that collects all the files from the src/template folder:

<!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>

Here is the head.html file

<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/[email protected]@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>

Here is the gulpfile.js file itself:

"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']);

Tell me why head.html is almost never going to index.html when running gulp?
And maybe someone has some recommendations in general for the project, assembly, optimization of the gulpfile.js file, I will be very grateful.