Answer the question
In order to leave comments, you need to log in
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$
"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 '>', so replace it.
.pipe(replace('>', '>'))
// 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
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 questionAsk a Question
731 491 924 answers to any question