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:
npm install -g gulp
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/'));
});