Handling Promise rejection in gulp code

Viewed 3162

I am trying to minify JS and CSS files using gulp. The script is working for minifying JS files but it's giving below error when I try to minify CSS file

(node:10533) UnhandledPromiseRejectionWarning: Unhandled promise rejection (rejection id: 1): Error: write callback called multiple times

(node:10533) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

The gulp file is as below:

var gulp = require('gulp');
var concat = require('gulp-concat');
var ngAnnotate = require('gulp-ng-annotate');
var uglify = require('gulp-uglify');
var ngmin = require('gulp-ngmin');
var minify_css = require('gulp-minify-css');
var import_css = require('gulp-cssimport');

// ================== Configure this path as per the deployed server ===============
var dev_static_path = '/home/shan/';
var minified_static_path = '/home/shan/minified_assets/';

var ngFiles_site = [
    dev_static_path+'/angular/js/abc.js',
    dev_static_path+'/angular/js/abc-configurator.js',
    dev_static_path+'/angular/js/controller/hostme-ctrl.js',
    dev_static_path+'/angular/js/controller/static-page-ctrl.js'

];
var cssFiles = [
    dev_static_path+'/css/bootstrap.css',
    dev_static_path+'/css/settings.css',
    dev_static_path+'/css/style.css',
    dev_static_path+'/css/custom.css',
    dev_static_path+'/css/site-custom.css'
];
//
//==================================================================================
// minify css files
gulp.task('build-css', function(){
gulp.src(cssFiles)
    .pipe(import_css())
    .pipe(minify_css())
    .pipe(concat('abc.min.css'))
    .pipe(gulp.dest(minified_static_path))
});
// minify site module js files
gulp.task('build-site-js', function(){
gulp.src(ngFiles_site)
    .pipe(ngAnnotate())
    .pipe(concat('abc.min.js'))
    .pipe(uglify({mangle: false}))
    .pipe(gulp.dest(minified_static_path))
});


// ============================= This is the main execution manager =========================
gulp.task('abcsite',['build-css']);

I am not an expert in node JS and I tried changing it to

gulp.task('abcsite',['build-css']).catch(function(err){
   console.log(err)
});

in a hope to get a promise, but it gave

TypeError: gulp.task(...).catch is not a function

There are no links available to tell me how to handle promise for a gulp task.

Can anyone help me with this ?

UPDATE 1: tried below, didnt work. same error

gulp.task('turacos',function(){
  return gulp.src(cssFiles)
    .pipe(import_css())
    .pipe(minify_css())
    .pipe(concat('turacos.min.css'))
    .pipe(gulp.dest(minified_static_path))
 }).catch(function(err){
console.log(err)
 })
1 Answers

You need to return the gulp.src() call, so gulp will know when the child task has completed:

gulp.task('build-css', function(){
    return gulp.src(cssFiles)
    .pipe(import_css())
    ...
Related