2

我想使用 gulp、browserfiy 输出多个包,并且还使用 babel 和 watchify 的功能。我可以生成多个包,但我不知道使用 babel 和 watchify 的功能。

这是我为多个捆绑所做的

var gulp = require('gulp');
var minifyCSS = require('gulp-minify-css');
var uglify = require('gulp-uglify');
var browserify = require('browserify');
var source = require('vinyl-source-stream');
var reactify = require('reactify'); 
var babel = require('babelify');
var watchify = require('watchify');

var cssSrcDir = './css/';
var jsSrcDir = './js/react/';
var buildDir = './build/';
var distDir = './dist/';
var mapsDir = './maps/';


gulp.task('minify-css',function(){
    return gulp.src(cssSrcDir + '**/*.css')
    .pipe(minifyCSS())
    .pipe(gulp.dest(buildDir+'/css'))
});

gulp.task('uglify',function(){
    return gulp.src(jsSrcDir + '/**/*.js')
    .pipe(uglify())
    .pipe(gulp.dest(buildDir+'/js/'))
});

gulp.task('js', function (done) {
  [
    "homepage",
    "Filter",
    "listing",
  ].forEach(function (entry, i, entries) {
    // Count remaining bundling operations to track
    // when to call done(). Could alternatively use
    // merge-stream and return its output.
    entries.remaining = entries.remaining || entries.length;

   browserify('./js/react/' + entry + '.jsx').transform(babel,reactify)
      .bundle()
      .pipe(
        require('fs').createWriteStream(buildDir + entry + 'Bundle.js')
        .on('finish', function () {
          if (! --entries.remaining) done();
        })
      );
  });
});


gulp.task('minify',['minify-css','uglify','js']);

我应该怎么做才能享受 watchify 和 babel 的功能?

4

0 回答 0