使用一饮而尽到一个文件夹内观看多个文件

Question

我就是用这个主旨为我gulpfile：https://gist.github.com/httpNick/708219f5002b6a9dc578

它的伟大工程的ES6 babelfiy-ING，但我想看着我./public/js中的所有文件文件夹并将构建版本输出到构建文件夹。有没有办法修改这个gulpfile来监视文件夹中的所有js文件？

复制粘贴从要点：

var gulp = require('gulp') 

var browserify = require('browserify') 
var watchify = require('watchify') 
var babelify = require('babelify') 

var source = require('vinyl-source-stream') 
var buffer = require('vinyl-buffer') 
var merge = require('utils-merge') 

var rename = require('gulp-rename') 
var uglify = require('gulp-uglify') 
var sourcemaps = require('gulp-sourcemaps') 


/* nicer browserify errors */ 
var gutil = require('gulp-util') 
var chalk = require('chalk') 

function map_error(err) { 
    if (err.fileName) { 
    // regular error 
    gutil.log(chalk.red(err.name) 
     + ': ' 
     + chalk.yellow(err.fileName.replace(__dirname + '/public/js/', '')) 
     + ': ' 
     + 'Line ' 
     + chalk.magenta(err.lineNumber) 
     + ' & ' 
     + 'Column ' 
     + chalk.magenta(err.columnNumber || err.column) 
     + ': ' 
     + chalk.blue(err.description)) 
    } else { 
    // browserify error.. 
    gutil.log(chalk.red(err.name) 
     + ': ' 
     + chalk.yellow(err.message)) 
    } 

    this.end() 
} 
/* */ 

gulp.task('watchify', function() { 
    var args = merge(watchify.args, { debug: true }) 
    var bundler = watchify(browserify('./public/js/index.js', args)).transform(babelify, {presets: ["es2015", "react"]}) 
    bundle_js(bundler) 

    bundler.on('update', function() { 
    bundle_js(bundler) 
    }) 
}) 

function bundle_js(bundler) { 
    return bundler.bundle() 
    .on('error', map_error) 
    .pipe(source('index.js')) 
    .pipe(buffer()) 
    .pipe(gulp.dest('public/dist')) 
    .pipe(rename('index.min.js')) 
    .pipe(sourcemaps.init({ loadMaps: true })) 
     // capture sourcemaps from transforms 
     .pipe(uglify()) 
    .pipe(sourcemaps.write('.')) 
    .pipe(gulp.dest('public/dist')) 
} 

// Without watchify 
gulp.task('browserify', function() { 
    var bundler = browserify('./public/js/index.js', { debug: true }).transform(babelify, {presets: ["es2015", "react"]}) 

    return bundle_js(bundler) 
}) 

// Without sourcemaps 
gulp.task('browserify-production', function() { 
    var bundler = browserify('./src/js/app.js').transform(babelify, {presets: ["es2015", "react"]}) 

    return bundler.bundle() 
    .on('error', map_error) 
    .pipe(source('index.js')) 
    .pipe(buffer()) 
    .pipe(rename('index.min.js')) 
    .pipe(uglify()) 
    .pipe(gulp.dest('public/dist')) 
}) 

Answer 1

Watchify会看的是打通您指定的入口点传递给你的browserify命令的所有文件（在你的情况，index.js）。因此，通过index.js文件所需的所有内容都应该被自动监视。

看起来您的watchify命令不正确。您应该将您的观察参数传递给browserify函数，而不是watchify函数。

这里是我的gulpfile的相关部分，你的结构有点不同，但你会得到的要点在watchify命令：

.task('js', ['clean'], function() { 
    var b = browserify(packageJson.paths.app); 

    var w = watchify(b, watchify.args); // Pass watchify.args here vs. in browserify fn. 

    w = w 
     .transform(babelify) 
     .transform(browserifyShim); 

    w.on('update', rebundle); 
    function rebundle() { 
     // my rebundle function, pretty much same as your `bundle_js` 
    } 
    return rebundle(); 
})