Gulp JavaScript Resolve Dependencies

Gulp-JavaScript-Resolve-Dependencies.md

Gulp JavaScript Resolve Dependencies

This Gulp task will resolve JavaScript dependencies and build individual bundles.

Install pre-requisites:

npm i --save-dev gulp gulp-resolve-dependencies gulp-uglify gulp-if gulp-foreach

Specify dependencies in your files:

/**
 * @require foo.js
 * @require bar.js
 * @require ../../bower_components/baz/src/baz.js
 */
(function (window, $) {

  'use strict';
  
  // You code ...
  
})(window, jQuery);

Introduce Gulp task:

var gulp = require('gulp');
var path = require('path');
var resolveDependencies = require('gulp-resolve-dependencies');
var uglify = require('gulp-uglify');
var gulpIf = require('gulp-if');
var foreach = require('gulp-foreach');

var sourceDir = './assets/';
var targetDir = './build/';
var dist = false;


gulp.task('build:scripts', function buildScripts () {
  var scriptsDir = path.join(sourceDir, 'scripts');
  return gulp
    .src([
      // Specify all source scripts that need to be processed.
      scriptsDir + '/*.js',
      scriptsDir + '/widgets/*.js'
    ])
    // Splitting each file into it's separate stream.
    .pipe(foreach(function (stream, file) {
      var relativePath = path.dirname(path.relative(scriptsDir, file.path));
      return stream
        .pipe(resolveDependencies({
          pattern: /\s*\*\s*@require\s*(.+\.js)/g,
          log: true
        }))
        // Stitching resolved files together.
        .pipe(concat(path.basename(file.path)))
        // Pipe any plugins here as you see fit.
        .pipe(gulpif(dist, uglify()))
        .pipe(gulp.dest(path.join(targetDir, 'js', relativePath)))
      ;
    }))
  ;
});