Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including gulp-resolve-dependencies with all npm packages installed. Try it out:

var gulpResolveDependencies = require("gulp-resolve-dependencies")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

gulp-resolve-dependencies v3.0.1

Resolve dependency directives in assets (e.g. "@requires" or "//= require" in JavaScript)

gulp-resolve-dependencies

Resolve dependency directives in assets, e.g. @depend (Juicer) or //= require (Sprockets)). Inspired by grunt-concat-in-order. Useful in combination with gulp-concat.

Usage

First, install gulp-resolve-dependencies as a development dependency:

npm install --save-dev gulp-resolve-dependencies

Then, add it to your gulpfile.js (probably together with gulp-concat):

var resolveDependencies = require('gulp-resolve-dependencies');
var concat = require('gulp-concat');

gulp.task('js', function(){
  gulp.src(['app/assets/js/main.js'])
    .pipe(resolveDependencies({
      pattern: /\* @requires [\s-]*(.*\.js)/g
    }))
        .on('error', function(err) {
            console.log(err.message);
        })
    .pipe(concat())
    .pipe(gulp.dest('dest/assets/js/'));
});

And use the directives in your JS files (dependencies can be nested, they are handled recursively):

/**
 * @requires libs/jquery/jquery.js
 * @requires ../modules/slideshow/slideshow.js
 */

(function(window, document, $, undefined) {
    'use strict';

    $(document).on('ready', function() {
        $('.slideshow').slideshow();
    });

})(window, document, jQuery);

Warning: This might not be very efficient (especially in case of nested dependencies). Some kind of caching mechanism could come in handy.

Circular dependencies are either silently ignored or emit an error. See options.ignoreCircularDependencies below.

gulp.src will not necessarily return files in a deterministic way. If this turns out to be an issue, using a plugin like gulp-sort or gulp-rder right after gulp.src might be an option for you. Thanks to @fabiospampinato for pointing this out.

API

resolveDependencies(options)

options.pattern

Type: RegExp

The matching pattern (defaults to /\* @requires [\s-]*(.*?\.js)/g).

options.resolvePath

Type: Function

Resolver for matched paths. Default:

function(match, targetFile) {
    return path.join(path.dirname(targetFile.path), match);
}

Parameters:

  • match {String} Matched file path (in the example above this would be libs/jquery/jquery.js and ../modules/slideshow/slideshow.js, respectively)
  • targetFile {Vinyl file object} Currently parsed file (where the matches were found)

The path package is available in this context.

options.log

Type: Boolean

Whether to log the resolved dependencies (defaults to false).

options.ignoreCircularDependencies

Type: Boolean

Whether to just continue instead of emitting an error if circular dependencies are detected (defaults to false).

Contributors

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free