gulp浏览babel并观察输出多个包

时间:2016-01-21 07:51:27

标签: javascript gulp babeljs watchify

我想使用gulp,browserfiy输出多个包,并且还使用babel和watchify的功能。我可以生成多个包,但我不是更明智地使用babel的功能并观察。

以下是我为多次捆绑所做的工作

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']);

我应该怎么做才能享受密切和巴贝尔的特色?

0 个答案:

没有答案