在一个文件夹中使用咕噜来查看多个文件

Question

我把这个要点用在我的文档中：https://gist.github.com/httpNick/708219f5002b6a9dc578

它对ES6 Babelfiying非常有效，但我想查看我的系统中的所有文件/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将监视通过您指定的入口点（在您的示例中为index.js）传递到browserify命令的所有文件。因此，通过索引所需的一切。js文件应自动监视。

您的watchify命令似乎不正确。您正在将watchify参数传递给browserify函数，而不是您应该传递的watchify函数。

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

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