gulp 任务完成时显示成功消息

Question

我创建了一个简单的 Gulp 任务来检查我的 ES6 文件中的更改。我想转译它们并在出现问题时显示错误消息。

正在显示错误屏幕。但是，我想在一切成功时显示不同的消息。我尝试了 .on('end') 方法，但是当出现一些错误时也会调用此方法。

我当前的 Gulp 文件如下所示：

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));
    })
);

有什么实现方法吗？

Answer 1

答案可能有点晚，但对于像我这样的 Google 员工，我已经创建了一个解决方案。我添加了一个布尔值 isSuccess 来确定转译是否成功。如果出现错误 isSuccess 变为 false 并且消息不显示 "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!');
            });
    })
);

Answer 2

你可以做到

.on('error', () => {
   // some log or code for failure
 })
.on('end', () => {
   // some log or code for success
 });

gulp 任务完成时显示成功消息

Show success message when gulp task is completed

gulp

gulp-watch

gulp-babel