Использование глотка смотреть несколько файлов в папке

Question

Я использовал эту суть для моего gulpfile: https://gist.github.com/httpNick/708219f5002b6a9dc578

Он прекрасно работает для ES6 babelfiy-ков, но я хотел бы, чтобы посмотреть все файлы в моих ./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(); 
})