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