Converting a grunt script to gulp

Question

I'm new with Grunt, Gulp, Browserify, React, and trying to familiarize with them by experimenting with the example given at Creating Modular View Components with React and Grunt article. The grunt file I posted here came from the article. What I'm trying to do is write an equivalent gulp file that does the same. I somehow managed to do that, see below (by copy-pasting of course!) But I'm kind of confused. I've seen some gulp files using something like:

.pipe(react())
.pipe(browserify())

But the gulp file below uses transform and passes in "reactify". It's not even part of require'd modules. Where did that come from? Was it part of gulp-react or Browserify module?

Would Gulp auto-install a missing module if it's not available like Leiningen?

Another question is: I got the gulp version working by providing:

gulp.src(['react_components/app.jsx']

If I provide react_components/*.jsx, it complains about an error. I'm assuming it takes care of the recursive dependencies by starting at the top jsx file? I see gruntfile is using *.jsx in this case. I'm confused :). What's the best way to do this react-gulp-browserify combo?

Another question: I noticed the resulting app.built.js contains the concatenated JavaScript file but it is huge (17k lines). I suppose I am missing the minification step but is there a built-in task/npm module that also get rid of unused code like Google closure compiler does?

Last question if you'll forgive me:

1. npm install -g gulp
2. npm install --save-dev gulp

The articles I've found is not clear on what the diff between the two and why do I need to execute both? Can't I just do npm install -g --save-dev gulp? My experience is with Ivy and Maven (Java projects) so I'm trying to see how npm is diff in this case.

Grunt code:

module.exports = function(grunt) {
    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),

        watch: {
            react: {
                files: 'react_components/*.jsx',
                tasks: ['browserify']
            }
        },

        browserify: {
            options: {
                transform: [ require('grunt-react').browserify ]
            },
            client: {
                src: ['react_components/**/*.jsx'],
                dest: 'scripts/app.built.js'
            }
        }
    });

    grunt.loadNpmTasks('grunt-browserify');
    grunt.loadNpmTasks('grunt-contrib-watch');

    grunt.registerTask('default', [
        'browserify'
    ]);
};

Gulp code:

var gulp = require('gulp');
var react      = require('gulp-react');
var browserify = require('gulp-browserify');
var gutil = require('gulp-util');
var rename = require('gulp-rename');

gulp.task('default', function() {
  var production = gutil.env.type === 'production';

  gulp.src(['react_components/app.jsx'], {read: false})

    // Browserify, and add source maps if this isn't a production build
    .pipe(browserify({
      debug: !production,
      transform: ['reactify'],
      extensions: ['.jsx']
    }))

    .on('prebundle', function(bundler) {
      // Make React available externally for dev tools
      bundler.require('react');
    })

    // Rename the destination file
    .pipe(rename('app.built.js'))

    // Output to the build directory
    .pipe(gulp.dest('scripts/'));
});

Answer 1

1/ reactify is an transformation for browserify. You have to install it with npm, however you don't have to require it or use it directly, browserify will require and use it for you (since you configured it to do so).

Gulp is a built tool, not a dependency/package manager, that's the job of npm. Leiningen does both, but that's specific to it. Doing both is kind of hard to do for JavaScript, as opposed to Clojure since the dependencies of the scripts don't have to be specified - usually just concatenating the files with the library is OK.

2/ I'm not sure about this, what's your error message? I found Gulp work best when you have an entry file which requires all the modules of the app, but Gulp have no problem with multiple files.

3/ You can use UglifyJS, the example Gulpfile on the project page has example for it. You can pipe it any where after browserify and before dest.

4/ npm install -g gulp install Gulp globally, provide you a gulp command, npm install --save-dev gulp install Gulp in your local project's node_modules folder and add gulp as one of the development dependencies in package.json. This is needed since a new version of Gulp might break the Gulpfile or some plugin. The gulp command is provided by your global Gulp, but the Gulp file will be running against the local version of Gulp specified in package.json.