当使用Watchify时，Browserify+Babelify Gulp任务没有终止

Browserify + Babelify Gulp task is not terminating, when Watchify is used

本文关键字：任务 Gulp 终止 Browserify+Babelify Watchify      更新时间：2023-09-26

我在我的Angular项目中用babelify做了一个浏览任务，我正在WebStorm中开发这个项目。首先，我应该说，这个代码确实可以完美地工作。

我的浏览捆绑包类似于：

const appBundle = browserify({
    entries: config.client.src.appModule, // main angular app file 
    debug: TRUE,
    packageCache: {},
    cache: {}
}).transform(babelify, {only: './src/client'}).on('log', gutil.log);

我的任务是：

gulp.task('browserify', ['jshint'], function () {
        return appBundle.bundle()
            .on('error', function (err) {
                gutil.log('Browserify error: ' + gutil.colors.red(err.message));
            })
            .pipe(source('app.js')) // main dist file
            .pipe(gulp.dest('./dist'));
});

这个问题我根本不明白：

我的问题是：为什么我的吞咽任务在完成任务后没有终止我应该总是通过点击我的WebStorm中的方形按钮手动停止它。

更新1

我已经发现，如果我直接传递"browserfy"bundle，而不使用变量appBundle，那么问题就消除了。所以代码变成：

browserify({
    entries: config.client.src.appModule, // main angular app file 
    debug: TRUE,
    packageCache: {},
    cache: {}
}).transform(babelify, {only: './src/client'}).on('log', gutil.log) 
  .bundle().on('error', function (err) {
         gutil.log('Browserify error: ' + gutil.colors.red(err.message));
   })
   .pipe(source('app.js')) // main dist file
   .pipe(gulp.dest('./dist'));

它有效但主要的困难是，我在watchify任务中使用了这个appBundle，所以我不想复制捆绑包。

更新2

几个小时后，我再次发现，这就是我的watchify任务所涉及的问题。漏洞代码是这样的：

const appBundle = browserify({
    entries: config.client.src.appModule, // main js file 
    debug: TRUE,
    packageCache: {},
    cache: {}
}).transform(babelify, {only: './src/client'});
const b = watchify(appBundle);
function rebundle(bundler) {
    return bundler
        .bundle()
        .on('error', function (err) {
            gutil.log('Browserify error: ' + gutil.colors.red(err.message));
        })
        .pipe(source('app.js'))
        .pipe(gulp.dest('./dist'));
}
gulp.task('watchify', function () {
    rebundle(b);
    b.on('update', function () {
        rebundle(b)
    });
    b.on('log', gutil.log); // output build logs to terminal
});
gulp.task('browserify', ['jshint'], function () {
    rebundle(appBundle);
});

当我把const b的声明放到我的watchify任务中时，一切都开始正常工作了。

但最后一个问题是：为什么它开始起作用了

看到这个文件，我认为它会帮助你

/*
 *  Task Automation to make my life easier.
 *  Author: Jean-Pierre Sierens
 *  ===========================================================================
 */
// declarations, dependencies
// ----------------------------------------------------------------------------
var gulp = require('gulp');
var browserify = require('browserify');
var source = require('vinyl-source-stream');
var gutil = require('gulp-util');
var babelify = require('babelify');
var browserSync = require('browser-sync').create();
// Static server
gulp.task('serve', ['scripts'], function() {
    browserSync.init({
        server: "./"
    });
    gulp.watch(['./app/**/*.js'], ['scripts']);
    gulp.watch('./index.html').on('change', browserSync.reload);
   // gulp.watch("app/scss/*.scss", ['sass']);
  //  gulp.watch("app/*.html").on('change', browserSync.reload);
});
// External dependencies you do not want to rebundle while developing,
// but include in your application deployment
var dependencies = [
    'react',
    'react-dom'
];
// keep a count of the times a task refires
var scriptsCount = 0;
// Gulp tasks
// ----------------------------------------------------------------------------
gulp.task('scripts', function () {
    bundleApp(false);
});
gulp.task('deploy', function (){
    bundleApp(true);
});
gulp.task('watch', function () {
    gulp.watch(['./app/*.js'], ['scripts']);
});
// When running 'gulp' on the terminal this task will fire.
// It will start watching for changes in every .js file.
// If there's a change, the task 'scripts' defined above will fire.
gulp.task('default', ['serve']);
// Private Functions
// ----------------------------------------------------------------------------
function bundleApp(isProduction) {
    scriptsCount++;
    // Browserify will bundle all our js files together in to one and will let
    // us use modules in the front end.
    var appBundler = browserify({
        entries: './app/app.js',
        debug: true
    })
    // If it's not for production, a separate vendors.js file will be created
    // the first time gulp is run so that we don't have to rebundle things like
    // react everytime there's a change in the js file
    if (!isProduction && scriptsCount === 1){
        // create vendors.js for dev environment.
        browserify({
            require: dependencies,
            debug: true
        })
            .bundle()
            .on('error', gutil.log)
            .pipe(source('vendors.js'))
            .pipe(gulp.dest('./web/js/'));
    }
    if (!isProduction){
        // make the dependencies external so they dont get bundled by the
        // app bundler. Dependencies are already bundled in vendor.js for
        // development environments.
        dependencies.forEach(function(dep){
            appBundler.external(dep);
        })
    }
    appBundler
    // transform ES6 and JSX to ES5 with babelify
        .transform("babelify", {presets: ["es2015", "react"]})
        .bundle()
        .on('error',gutil.log)
        .pipe(source('bundle.js'))
        .pipe(gulp.dest('./web/js/'))
        .pipe(browserSync.stream());
}
相关文章：