We Keep Coding

Gulp4 - tasks did not complete and forget to signal async completion

Just started learning gulp and followed this tutorial series:https://www.youtube.com/watch?v=oRoy1fJbMls&list=PLriKzYyLb28lp0z-OMB5EYh0OHaKe91RV
It works perfectly on gulp 3 but after updating npm to the current version it broke down and i tried converting my gulpfile.js from version 3 to 4, and after running the gulp command i have this error:
The following tasks did not complete: default, Did you forget to signal async completion? How do i solve this?
Here's my gulpfile:
const gulp = require('gulp');
const rename = require('gulp-rename');
const sass = require('gulp-sass');
const uglify = require('gulp-uglify');
const autoprefixer = require('gulp-autoprefixer');
const sourcemaps = require('gulp-sourcemaps');
const browserify = require('browserify');
const babelify = require('babelify');
const source = require('vinyl-source-stream');
const buffer = require('vinyl-buffer');
let styleSource = 'src/scss/style.scss';
let styleDestination = './build/css/';
let styleWatch = 'src/scss/**/*.scss';
let jsSource = 'main.js';
let jsFolder = 'src/js/';
let jsDestination = './build/js/';
let jsWatch = 'src/js/**/*.js';
let jsFILES = [jsSource];
let htmlWatch = '**/*.html';
/* Converting Sass to CSS */
gulp.task('styles',function(){
return gulp.src(styleSource)
.pipe(sourcemaps.init())
.pipe(sass({
errorLogToConsole: true,
outputStyle: 'compressed'
}))
.on('error', console.error.bind(console))
.pipe(autoprefixer({
browsers: ['last 2 versions'],
cascade: false
}))
.pipe(rename({suffix:'.min'}))
.pipe(sourcemaps.write('./'))
.pipe(gulp.dest(styleDestination));
});
/* Converting ES6 to Vanilla JS */
gulp.task('js',function(){
return jsFILES.map(function(entry){
return browserify({
entries: [`${jsFolder}${entry}`]
})
.transform(babelify, {presets:['env']})
.bundle()
.pipe(source(entry))
.pipe( rename({extname:'.min.js'}) )
.pipe(buffer())
.pipe(sourcemaps.init({loadMaps: true}))
.pipe(uglify())
.pipe(sourcemaps.write('./'))
.pipe(gulp.dest(jsDestination))
});
})
// default task to run all tasks
const compile = gulp.parallel(['styles','js']);
compile.description = 'Compile all styles and js files';
gulp.task('default', compile);
// watch default
const watch = gulp.series('default', function(){ // ,'browser-sync'
// keep running, watching and triggering gulp
gulp.watch(styleWatch, gulp.parallel('styles')); //, reload
gulp.watch(jsWatch, gulp.parallel('js')); //, reload
gulp.watch(htmlWatch);
});
watch.description = 'watch all changes in every files and folders';
gulp.task('watch', watch);
And here's the error after i run gulp:

Your js task returns an array, gulp doesn't understand that. A task can return a stream or a promise - or it must call the callback parameter to signal completion, like so:
gulp.task('js', function(cb) {
// Your js task code here
cb();
})
Also, read the latest gulp4 documentation.

How to speed up React building?

I'm using gulp to compile React JSX to JS, Sass to css and for live reloading. Everything works pretty good but 'building' .js files taking 2.5s-3s. When I tried import React-Bootstrap in my .jsx gulp finished build after 9-10s. Is there any way to speed up building? Here is my gulp.config:
var gulp = require('gulp');
var browserify = require('browserify');
var babelify = require('babelify');
var source = require('vinyl-source-stream');
var browserSync = require('browser-sync').create();
var sass = require('gulp-sass');
function swallowError(error) {
console.log(error.toString())
this.emit('end')
}
gulp.task('build', function() {
return browserify({ entries: './docs/Main.jsx', extensions: ['.jsx'], debug: true })
.transform('babelify', { presets: ['es2015', 'react'] })
.on('error', swallowError)
.bundle()
.on('error', swallowError)
.pipe(source('bundle.js'))
.on('error', swallowError)
.pipe(gulp.dest('docs/dist'))
.pipe(browserSync.stream())
.on('error', swallowError);
});
gulp.task('serve', ['sass'], function() {
browserSync.init({
server: "./docs"
});
gulp.watch("docs/scss/*.scss", ['sass']);
gulp.watch('docs/*.js*', ['build']);
gulp.watch(["docs/*.html"]).on('change', browserSync.reload);
});
// Compile sass into CSS & auto-inject into browsers
gulp.task('sass', function() {
return gulp.src("docs/scss/*.scss")
.pipe(sass())
.on('error', swallowError)
.pipe(gulp.dest("docs/css"))
.pipe(browserSync.stream());
});
gulp.task('default', ['serve']);

using nodemon together with gulp doesn't work

I used gulp with broswersync, to watch any front end changes. But in the same time I'm using node.js so I need nodemon to restart server if I changed anything on the server side. Not sure I'm doing it right, below is my gulpfile.js
var gulp = require('gulp');
var sass = require('gulp-sass');
var browserSync = require('browser-sync').create();
var reload = browserSync.reload;
var nodemon = require('gulp-nodemon');
gulp.task('serve', function() {
browserSync.init({
server: "./public"
});
gulp.watch(['./public/*.html', './public/js/*.js']).on('change', reload);
});
gulp.task('sass', function () {
return gulp.src('./public/sass/**/*.scss')
.pipe(sass().on('error', sass.logError))
.pipe(gulp.dest('./public/css'))
.pipe(reload({stream: true}));
});
gulp.task('sass:watch', function () {
gulp.watch('./public/sass/**/*.scss', ['sass'])
});
// our gulp-nodemon task
gulp.task('nodemon', function (cb) {
var started = false;
return nodemon({
script: './bin/www',
ext: 'js',
ignore: ['public/*'],
env: {
'NODE_ENV': 'development',
'DEBUG': 'appname:*'
}
}).on('start', function () {
if (!started) {
cb();
started = true;
}
})
.on('crash', function() {
console.log('nodemon.crash');
})
.on('restart', function() {
console.log('nodemon.restart');
})
.once('quit', function () {
process.exit();
});
});
gulp.task('default', ['serve','sass','sass:watch','nodemon']);
I run gulp but it has error of
Error: listen EADDRINUSE :::3000

Gulp + Browserify task not working (no output)

I have the following task on my gulpfile.js
gulp.task('default', ['browserify'])
gulp.task('browserify', function () {
return browserify('./public/js/x.js')
.bundle()
.pipe(source('y.js'))
.pipe(gulp.dest('./public/dist/js'))
})
But after running $ gulp it gives no output. Am I missing something?

I am not sure what your browserify is but I'm gonna assume it's not the deprecated gulp-browserify.
This should work. I tested it:
var gulp = require('gulp');
var browserify = require('browserify');
var source = require('vinyl-source-stream'); // MAKE SURE THIS IS THERE
gulp.task('default', ['browserify'])
gulp.task('browserify', function() {
return browserify('./public/js/x.js').bundle() // .bundle is a browserify function
.pipe(source('y.js')) // Pass to output using vinyl-source-stream
.pipe(gulp.dest('./public/dist/js'));
});
Since my code looks exactly as yours, can you make sure you have vinyl installed?
npm install --save vinyl-source-stream
and if you haven't already:
npm install --save gulp browserify
npm install -g gulp

I'm now maintaining a repository which collecting all the gulp tasks I use in daily work.
This is the browserify task code
var gulp = require('gulp')
var gulpif = require('gulp-if')
var browserify = require('browserify')
var gutil = require('gulp-util')
var through2 = require('through2')
var watchify = require('watchify')
var assign = require('object-assign')
var babelify = require('babelify')
var config = require('config').gulp
module.exports = function (is_dev) {
var options = {
paths: [config.src.js]
}
if (is_dev) {
options = assign({}, options, {
debug: true,
cache: {},
packageCache: {}
})
}
var bundler = function () {
return through2.obj(function (file, enc, next) {
var b = browserify(file.path, options)
.transform(babelify.configure({
presets: ['es2015', 'react'],
compact: false
}))
if (is_dev) {
b = watchify(b)
b.on('update', bundle)
b.pipeline.on('file', function (filename) {
gutil.log(gutil.colors.green('Bundled: '), filename)
})
}
return b.bundle(function (err, res) {
if(err) {
return next(err)
}
file.contents = res
next(null, file)
})
})
}
function bundle() {
is_dev ? gutil.log(gutil.colors.yellow('Bundling...')) : null
return gulp.src([
config.src.js + '/**/*.js',
'!' + config.src.js + '/lib/**/*.js'
])
.pipe(bundler())
.on('error', function(e) {
gutil.log(gutil.colors.red(e.message))
is_dev ? this.emit('end') : null
})
.pipe(gulp.dest(config.dist.js))
}
return bundle()
}

Gulp less and then minify task

I have to make 2 steps in gulp:
Make a .css file form less
Minify generated css files
This is my gulpfile:
var gulp = require('gulp'),
watch = require("gulp-watch"),
less = require('gulp-less'),
cssmin = require('gulp-cssmin'),
rename = require('gulp-rename');
gulp.task('watch-less', function () {
watch({glob: './*.less'}, function (files) { // watch any changes on coffee files
gulp.start('compile-less'); // run the compile task
});
watch({
glob: ['./*.css', '!./*.min.css']
}, function(files) {
gulp.start('minify-css'); // run the compile task
});
});
gulp.task('compile-less', function () {
gulp.src('./*.less') // path to your file
.pipe(less().on('error', function(err) {
console.log(err);
}))
.pipe(gulp.dest('./'));
});
gulp.task('minify-css', function() {
gulp.src([
'./*.css',
'!./*.min.css'
])
.pipe(cssmin().on('error', function(err) {
console.log(err);
}))
.pipe(rename({suffix: '.min'}))
.pipe(gulp.dest('./'));
})
gulp.task('default', ['watch-less']);
When i start it only first step is done.
Help me please.

You should keep in mind that with gulp you could simply chain operations on a glob pattern.
Don't really sure why you need gulp.watch when you can use the built-in watcher, this plugin is useful on tricky situations and that's don't seems be the case here, but you can stick with it if you really want to.
Don't forget to return your stream so gulp knows when a task is finished.
I also generally wrap all my watchers inside one watch task, not need to separate them.
To me, your gulpfile should look like this:
var gulp = require('gulp'),
less = require('gulp-less'),
cssmin = require('gulp-cssmin'),
rename = require('gulp-rename');
gulp.task('watch', function () {
gulp.watch('./*.less', ['less']);
});
gulp.task('less', function () {
return gulp.src('./*.less')
.pipe(less().on('error', function (err) {
console.log(err);
}))
.pipe(cssmin().on('error', function(err) {
console.log(err);
}))
.pipe(rename({suffix: '.min'}))
.pipe(gulp.dest('./'));
});
gulp.task('default', ['less', 'watch']);

There is no needing after time, convinient solution for me was:
var gulp = require('gulp'),
less = require('gulp-less'),
cssmin = require('gulp-cssmin'),
plumber = require('gulp-plumber'),
rename = require('gulp-rename');
gulp.task('watch', function () {
gulp.watch('./styles/*.less', ['less']);
});
gulp.task('less', function () {
gulp.src('./styles/*.less')
.pipe(plumber())
.pipe(less())
.pipe(gulp.dest('./styles/'))
.pipe(cssmin())
.pipe(rename({
suffix: '.min'
}))
.pipe(gulp.dest('./styles'))
});
gulp.task('default', ['less', 'watch']);

Best of both worlds might be to add the gulp.watch to the default gulp.task and if you require browser-sync it will reload when you make any changes to the folders being watched as shown below:
var gulp = require('gulp'),
less = require('gulp-less'),
cssmin = require('gulp-cssmin'),
rename = require('gulp-rename'),
browser = require('browser-sync');
gulp.task('less', function() {
return gulp.src('./*.less')
.pipe(less().on('error', function(err) {
console.log(err);
}))
.pipe(cssmin().on('error', function(err) {
console.log(err);
}))
.pipe(rename({
suffix: '.min'
}))
.pipe(gulp.dest('./'));
});
gulp.task('server', function() {
browser({
server: {
baseDir: './'
}
});
});
gulp.task('default', ['less', 'server'], function() {
gulp.watch('./*.less', ['less', browser.reload]);
});

This is the way I did it with sass. Kind of the same with less.
The difference with the previous answers is that I wanted one more step:
Get the sass
Transform it into a css and create the file
Get that file and minify it.
So the structure would be like this:
test.scss
test.css
test.min.css
var gulp = require("gulp"),
sass = require("gulp-sass"),
rename = require("gulp-rename");
var paths = {
webroot: "./wwwroot/"
};
paths.scss = paths.webroot + "css/**/*.scss";
gulp.task('sass', function() {
gulp.src(paths.scss)
.pipe(sass())
.pipe(gulp.dest(paths.webroot + "css"))
.pipe(cssmin())
.pipe(rename({
suffix: '.min'
}))
.pipe(gulp.dest(paths.webroot + "css"));
});
Added a new answer in case someone want the same thing as me.