gulp-ify

gulp-ify

gulp.task('gulpify', function() {
  gulp.src("./src/js/**")  
      .pipe($.plumber())
      //using vinyl-transform lets us use any transforms available to browserify 
      .pipe(transform(reactify))
      .on('error', $.util.log)
      .pipe($.ext.replace('.js'))
      // converting .jsx/coffee/etc. into a temp folder prior to 'bundling' reduces additional boilerplate later-on
      .pipe(gulp.dest('./temp'))
      .pipe($.filter('init.js'))
      // I design 'browserify' builds with one file at the top of the tree, not sure if this will work with multiple entries
      .pipe($.tap(function(file) {
        file.contents = mdeps(file.path)
        //this creates a json file containing all of the files, ordered, meant to be plugged into browser-pack
          .pipe(sort({index: true}))
          //this optimizes the json file, replacing long path strings with numbers
          .pipe(es.map(function (data, callback) {
            data.id = data.index;
            data.deps = data.indexDeps;
          //basic 'fork'-ish of envify to replace the NODE_ENV (necessary for React to work)
          //Using this versus envify, I noticed 2.03 s build decreased to 2-20 ms O_o wtf?
            data.source = data.source.replace(/process.env.NODE_ENV/g, '"'+process.env.NODE_ENV+'"');
            callback(null, data);
          }))
          // at this point we generate a browserify file, without any of the process/global module boilerplate
          //it's possible to add wayy more browserify features, like using insert-module-globals
          .pipe(pack({raw: true}));
      }))
      .pipe($.rename("app.js"))
      .pipe(gulp.dest('./public/build/js'))
      .pipe($.livereload())
  });