Gulp

First note: We’ll eventually be using some of these packages: (also note the --save vs. --save-dev)
npm install --save-dev gulp gulp-nodemon gulp-htmlmin gulp-cssnano gulp-uglify gulp-buster browserify vinyl-source-stream gulp-util babelify babel-preset-es2015 babel-preset-react
npm install --save react react-dom
Ok, hi. Let’s start with gulp‘s .task() simple syntax:
// (in gulpfile.js)
gulp.task('temp', [], function(){
  console.log('hello world');
}
Just copy the above into the file gulpfile.js at your root directory — this is the only file gulp needs in order to run. Then run %> gulp temp and get:
hello world
And here’s how we can simply bundle together a few files, using browserify:
// (in gulpfile.js)
gulp.task('temp', [], function() {
  browserify({
    entries: 'file1.js' // or array, e.g. ['file1.js','file2.js']
  })
  .add('another2.js') // Can also add like this
  .add('another3.js') // And more...
  .add(['another4.js', 'another5.js']) // Or use an array...

  .bundle() // Finally, let's bundle!

  .pipe(source('bundle.js')) // And store result in bundle.js
  .pipe(gulp.dest('./')); // In this directory
Ok, so we have the following simple usage:
// (in gulpfile.js)
gulp.task('temp', [], function() {
  browserify({
    entries: 'file1.js'
  })
  .bundle() // Bundle!
  .pipe(source('bundle.js')) // Store result in bundle.js
  .pipe(gulp.dest('./')); // In this directory
Suppose file1.js contains:
// file1.js
var file1var = 123;
console.log('in file1.js');
Then running %> gulp temp will overwrite bundle.js to contain:
(function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
// file1.js
var file1var = 123;
console.log('in file1.js');

},{}]},{},[1]);
There you have it. The basic usage we’ve been looking for: We can bundle together multiple JS files into one, so that we could include it in from our index.html using some script tag, for example. In our modest case, though, with no index.html and just dummy code, we could run %> node bundle.js to get this output:
in file1.js

It’s time we appreciate what we already have in our hands: What bundle really does is “Bundle the files and their dependencies into a single javascript file.” Let’s see that in action, shall we? Create a file2.js:
var file2var = 456;
console.log('in file2.js');

module.exports = {
  f : function() {
    console.log('My cool function from file2.js');
  },
  c : 789
}
And add an import command to file1.js, so its updated content is:
import File2 from './file2';

// file1.js
var file1var = 123;
console.log('in file1.js');
Running %> gulp temp will FAIL, with some error like the one below, complaining about our ES2015 syntax… (namely our newly added import command in file1.js)
events.js:141
      throw er; // Unhandled 'error' event
      ^
SyntaxError: 'import' and 'export' may appear only with 'sourceType: module'
So to allow ourselves to write in ES2015 and transpile it to ordinary JS, we use babelify! Update our gulp file as follows:
// (in gulpfile.js)
gulp.task('temp', [], function() {
  browserify({
    entries: 'file1.js'
  })
  .transform("babelify", {presets: ["es2015"]}) // <= ADD THIS ROW
  .bundle() // Bundle!
  .pipe(source('bundle.js')) // Store result in bundle.js
  .pipe(gulp.dest('./')); // In this directory
And voila, running %> gulp temp overwrites bundle.js into the following:
(function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
'use strict';

var _file = require('./file2');

var _file2 = _interopRequireDefault(_file);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

// file1.js
var file1var = 123;
console.log('in file1.js');

},{"./file2":2}],2:[function(require,module,exports){
'use strict';

var file2var = 456;
console.log('in file2.js');

module.exports = {
  f: function f() {
    console.log('My cool function from file2.js');
  },
  c: 789
};

},{}]},{},[1]);
Cool! So even though we merely asked for file1.js to be bundled, browserify realized that it depends on file2.js and included it in the bundle! Awesome! The import command in file1.js first "sources" the contents of file2.js. To illustrate, try running %> node bundle.js, you'll get:
in file2.js
in file1.js

Finally, a more closer-to-reality usage is to have file1.js do something with the class / object that we imported from file2.js. For example, suppose file1.js is:
import File2 from './file2';

// file1.js
var file1var = 123;
console.log('in file1.js');

console.log(File2);
Run %> gulp temp and then %> node bundle.js and we get:
in file2.js
in file1.js
{ f: [Function: f], c: 789 }

Read more here on the import command and ways to selectively import only some of the module's members (and even give them shorter aliases if necessary). Read here on browserify. In particular, about require and external!

Leave a Reply

Your email address will not be published. Required fields are marked *