gulpgulp-watchgulp-babel

Show success message when gulp task is completed


I created a simple Gulp task to check for changes in my ES6 files. I would like to transpile them and show an error message when something went wrong.

The error screen is being displayed. However, I would like to show a different message when everything is successful. I tried the .on('end') method but this method will also be called when there are some errors.

My current Gulpfile looks like this:

const gulp = require('gulp');
const babel = require('gulp-babel');
const uglify = require('gulp-uglify');
const pump = require('pump');
const imagemin = require('gulp-imagemin');
const sass = require('gulp-sass');
const DISTRIBUTION_PATH = 'public/theme/js/app';
const plumber = require('gulp-plumber');
const gutil = require('gulp-util');
const clear = require('clear');

gulp.task('transpile', () =>
    gulp.watch('theme/js/**/*.js', () => {
        return gulp.src('theme/js/**/*.js')
            .pipe(plumber())
            .pipe(babel({
                presets: ['es2015'],
                plugins: [
                    'transform-object-rest-spread'
                ]
            }))
            .on('error', err => {
                clear();
                gutil.log(gutil.colors.red('[Compilation Error]'));
                gutil.log(err.fileName + ( err.loc ? `( ${err.loc.line}, ${err.loc.column} ): ` : ': '));
                gutil.log(gutil.colors.red('error Babel: ' + err.message + '\n'));
                gutil.log(err.codeFrame);
            })
            .pipe(gulp.dest(DISTRIBUTION_PATH));
    })
);

Any ideas how to achieve this?


Solution

  • Answer might be a bit late, but for the Googler like myself I've created a solution. I've added a boolean isSuccess to determine whether the transpilation was successful. If there is an error isSuccess becomes false and the message is not shown "on end."

    const gulp = require('gulp');
    const babel = require('gulp-babel');
    const uglify = require('gulp-uglify');
    const pump = require('pump');
    const imagemin = require('gulp-imagemin');
    const sass = require('gulp-sass');
    const DISTRIBUTION_PATH = 'public/theme/js/app';
    const plumber = require('gulp-plumber');
    const gutil = require('gulp-util');
    const clear = require('clear');
    
    gulp.task('transpile', () =>
        gulp.watch('theme/js/**/*.js', () => {
            let isSuccess = true;
            return gulp.src('theme/js/**/*.js')
                .pipe(plumber())
                .pipe(babel({
                    presets: ['es2015'],
                    plugins: [
                        'transform-object-rest-spread'
                    ]
                }))
                .on('error', err => {
                    isSuccess = false;
                    clear();
                    gutil.log(gutil.colors.red('[Compilation Error]'));
                    gutil.log(err.fileName + ( err.loc ? `( ${err.loc.line}, ${err.loc.column} ): ` : ': '));
                    gutil.log(gutil.colors.red('error Babel: ' + err.message + '\n'));
                    gutil.log(err.codeFrame);
                })
                .pipe(gulp.dest(DISTRIBUTION_PATH))
                .on('end', ()=> {
                    if( isSuccess )
                        console.log('Yay success!');
                });
        })
    );