S
S
Sergey Burduzha2018-03-23 17:20:23
gulp.js
Sergey Burduzha, 2018-03-23 17:20:23

How to solve problem with gulp4?

I decided to switch to gulp4 and then errors fell down.

[email protected]:/var/www/start-template.loc$ gulp html
[16:14:04] Using gulpfile /var/www/start-template.loc/gulpfile.js
[16:14:04] Starting 'html'...
[16:14:04] Finished 'html' after 82 ms
[email protected]:/var/www/start-template.loc$ gulp build
[16:14:11] Using gulpfile /var/www/start-template.loc/gulpfile.js
[16:14:11] Starting 'build'...
[16:14:11] Starting 'clean'...
[16:14:11] Finished 'clean' after 41 ms
[16:14:11] Starting 'html'...
[16:14:11] Starting 'css:build'...
[16:14:11] Starting 'js:build'...
[16:14:11] Starting 'image:build'...
[16:14:11] Starting 'libs'...
[16:14:11] Starting 'favicon'...
[16:14:11] Starting 'fonts'...
[16:14:11] Finished 'favicon' after 336 ms
[16:14:12] Finished 'libs' after 648 ms
[16:14:12] Finished 'html' after 920 ms
[16:14:12] Finished 'js:build' after 923 ms
[16:14:12] Finished 'css:build' after 927 ms
[16:14:12] The following tasks did not complete: build, <parallel>, image:build, fonts
[16:14:12] Did you forget to signal async completion?
[email protected]:/var/www/start-template.loc$

I understand that you need to finish task. The whole problem is in gulp default and in gulp build. But how to close requests?
Here is the code
"use strict";

let gulp = require("gulp"),
    clean = require("gulp-clean"),
    autoprefixer = require("gulp-autoprefixer"),
    rename = require("gulp-rename"),
    gp = require("gulp-load-plugins"),
    notify = require("gulp-notify"),
    sass = require("gulp-sass"),
    //less = require("gulp-less"),
    cssnano = require("gulp-cssnano"),
    rigger = require("gulp-rigger"),
    uglify = require("gulp-uglify"),
    babel = require("gulp-babel"),
    watch = require("gulp-watch"),
    sourcemaps = require('gulp-sourcemaps'),
    //svgSprite = require('gulp-svg-sprite'),
    //svgSprites = require("gulp-svg-sprites"),
    //svgmin = require('gulp-svgmin'),
    //svg2png   = require('gulp-svg2png'),
    plumber = require("gulp-plumber"),
    spritesmith = require('gulp.spritesmith'),
    tinypng = require('gulp-tinypng'),
    run = require("run-sequence"),
    newer = require('gulp-newer'),
    browserSync = require('browser-sync').create();

/* browser-sync
=========================*/
gulp.task('browser-sync', function(){

    browserSync.init({
        server: {
            baseDir: "./build"
        },
        notify: true
    });
});

/* html:build
====================================================*/
gulp.task("html", function(){
    return gulp.src('src/index.html')
        .pipe(sourcemaps.init())
        .pipe(plumber())
        .pipe(rigger())
        .pipe(sourcemaps.write())
        .pipe(gulp.dest('build/'))
        .on('end', browserSync.reload);
});

/* css:dev
====================================================*/
gulp.task("css:dev", function(){
   return gulp.src('src/assets/sass/style.scss')
        .pipe(sourcemaps.init())
        .pipe(plumber())
        .pipe(sass())
        .pipe(autoprefixer({
            browsers: ['last 2 versions'],
            cascade: false
        }))
        .pipe(sourcemaps.write())
        .pipe(gulp.dest('build/assets/css/'))
        .pipe(browserSync.reload({
            stream: true
        }));
});

/* css:build
====================================================*/
gulp.task("css:build", function(){
   return gulp.src('src/assets/sass/style.scss')
        .pipe(sourcemaps.init())
        .pipe(plumber())
        .pipe(sass())
        .pipe(autoprefixer({
            browsers: ['last 2 versions'],
            cascade: false
        }))
        .pipe(sourcemaps.write())
        .pipe(gulp.dest('build/assets/css/'))
        .pipe(cssnano({
            zindex: false,
            discardComments: {
                removeAll: true
            }
        }))
        .pipe(rename("style.min.css"))
        .pipe(gulp.dest('build/assets/css/'))
        .pipe(browserSync.reload({
            stream: true
        }));
});


/* js:dev
====================================================*/
gulp.task("js:dev", function(){
   return gulp.src('src/assets/js/main.js')
        .pipe(sourcemaps.init())
        .pipe(plumber())
        .pipe(rigger())
        .pipe(gulp.dest('build/assets/js/'))
        .pipe(babel({
            presets: ['env']
        }))
        .pipe(sourcemaps.write())
        .pipe(gulp.dest('src/build/assets/js/'))
        .pipe(browserSync.reload({
            stream: true
        }));
});

/* js:build
====================================================*/
gulp.task("js:build", function(){
   return gulp.src('src/assets/js/main.js')
        .pipe(sourcemaps.init())
        .pipe(plumber())
        .pipe(rigger())
        .pipe(gulp.dest('build/assets/js/'))
        .pipe(babel({
            presets: ['env']
        }))
        .pipe(uglify())
        .pipe(rename("main.min.js"))
        .pipe(sourcemaps.write())
        .pipe(gulp.dest('src/build/assets/js/'))
        .pipe(browserSync.reload({
            stream: true
        }));
});

/* image:dev
====================================================*/
gulp.task("image:dev", function(){
    gulp.src('src/assets/i/**/*.{jpg,png}')
        .pipe(plumber())
        .pipe(newer('build/assets/i/'))
        .pipe(gulp.dest('build/assets/i/'));
});

/* image:build
====================================================*/
gulp.task("image:build", function(){
    gulp.src('src/assets/i/**/*.{jpg,png}')
        .pipe(plumber())
        .pipe(newer('build/assets/i/'))
        .pipe(tinypng('pMP22fo3po6iGPt4OWpAMZfQsAW8C67V'))
        .pipe(gulp.dest('build/assets/i/'));
});

/*clean*/
gulp.task('clean', function () {
    return gulp.src('build/', {read: false})
        .pipe(clean());
});

/* libs:build
====================================================*/
gulp.task("libs", function(){
    return gulp.src('src/assets/libs/')
        .pipe(gulp.dest('build/assets/libs/'))
        .pipe(browserSync.stream());
});


/* favicon:build
====================================================*/
gulp.task("favicon", function(){
    return gulp.src("src/favicon.ico")
        .pipe(gulp.dest("build/"))
        .pipe(browserSync.stream());
});

/* fonts
====================================================*/
gulp.task("fonts", function(){
    gulp.src('src/assets/fonts/**/*.*')
        .pipe(gulp.dest('build/assets/fonts/'));
});

/* sprite
====================================================*/
gulp.task('sprite', function(){
    let spriteData = gulp.src('src/assets/i/icons/*.*')
        .pipe(plumber())
        .pipe(spritesmith({
            imgName: '../i/sprite.png',
            cssName: 'sprite.scss',
            cssFormat: 'scss',
            algorithm: 'binary-tree',
            padding: 20
        }));
    spriteData.img.pipe(gulp.dest('src/assets/i'));
    spriteData.css.pipe(gulp.dest('src/assets/sass/partials/'));
});


/* watch
====================================================*/
gulp.task("watch", function(){
    watch('src/**/*.html', gulp.series('html'));
    watch('src/assets/sass/**/*.scss', gulp.series('css:dev'));
    watch('src/assets/js/*.js', gulp.series('js:dev'));
    watch('src/assets/i/**/*.{jpg, png}', gulp.series('image:dev'));
    watch('src/assets/fonts/**/*.*', gulp.series('fonts'));
}); 

/* default
====================================================*/
gulp.task("default", gulp.series( 'clean',                     
            gulp.parallel('html', 'css:dev', 'js:dev', 'image:dev', 'libs', 'favicon', 'fonts'),
            gulp.parallel('watch', 'browser-sync')
));


/* build
========================================================*/
gulp.task("build", gulp.series( 'clean',                     
            gulp.parallel('html', 'css:build', 'js:build', 'image:build', 'libs', 'favicon', 'fonts'),
            gulp.parallel('watch', 'browser-sync')
));



/* spriteSvg
====================================================*/
/*gulp.task('svg', function () {
    return gulp.src('src/assets/i/icons/svg/*.svg')
    // minify svg
        .pipe(svgmin({
            js2svg: {
                pretty: true
            }
        }))
        // remove all fill, style and stroke declarations in out shapes
        .pipe(cheerio({
            run: function ($) {
                $('[fill]').removeAttr('fill');
                $('[stroke]').removeAttr('stroke');
                $('[style]').removeAttr('style');
            },
            parserOptions: {xmlMode: true}
        }))
        // cheerio plugin create unnecessary string '&gt;', so replace it.
        .pipe(replace('&gt;', '>'))
        // build svg sprite
        .pipe(svgSprite({
            mode: {
                symbol: {
                    sprite: "sprite.svg",
                    render: {
                        scss: {
                            dest:'_sprite.scss',
                            template: "src/assets/sass/partials/_sprite_template.scss"
                        }
                    }
                }
            }
        }))
        .pipe(gulp.dest('src/assets/i/'));
});*/

/*spritesSvgImg
 ===============================*/
/*gulp.task('sprites', function () {
    return gulp.src('src/assets/i/icons/svg/*.svg')
        .pipe(svgSprites())
        .pipe(gulp.dest("src/assets/i/sprite-svg-img/")) // Write the sprite-sheet + CSS + Preview
        .pipe(filter("*.svg"))  // Filter out everything except the SVG file
        .pipe(svg2png())           // Create a PNG
        .pipe(gulp.dest("src/assets/i/sprite-svg-img/"));
});*/

/*audio
 ===============================*/
/*gulp.task('audio', function () {
    return gulp.src('src/assets/audio/*.*')
        .pipe(gulp.dest("build/assets/audio/"))
});*/

Answer the question

In order to leave comments, you need to log in

1 answer(s)
E
Eugene, 2018-03-23
@serii81

If the task is asynchronous, you must tell the gulp when it will complete. To do this, you can:
- use a callback that falls as the first argument to the task
- return the thread from the task (galp will wait for it to close)
- return the promise from the task (Gulp4-only)
In your case, in almost all tasks you return the result of execution gulp.src - and this is the stream, and where you don't return gulp.src (in the "fonts" and "image:build" subtasks) - there the gulp cannot inflate whether the task is finished or not, hence the error.

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question