gulp-dependency-directive
Version:
Resolve dependency directives in assets (e.g. "@requires" or "//= require" in JavaScript)
96 lines (65 loc) • 3.06 kB
Markdown
# gulp-dependency-directive
A Gulp 4 compatible fork of [gulp-resolve-dependencies](https://github.com/backflip/gulp-resolve-dependencies). All credit due to [Thomas Jaggi](https://github.com/backflip).
> Resolve dependency directives in assets, e.g. ```@depend``` ([Juicer](https://github.com/cjohansen/juicer)) or ```//= require``` ([Sprockets](https://github.com/sstephenson/sprockets))). Inspired by [grunt-concat-in-order](https://github.com/miensol/grunt-concat-in-order). Useful in combination with [gulp-concat](https://github.com/wearefractal/gulp-concat).
## Usage
First, install `gulp-dependency-directive` as a development dependency:
```shell
npm install --save-dev gulp-dependency-directive
```
Then, add it to your `gulpfile.js` (probably together with [gulp-concat](https://github.com/wearefractal/gulp-concat)):
```javascript
var resolveDependencies = require('gulp-dependency-directive');
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):
```javascript
/**
* @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.
## 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:
```javascript
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
* @huang64: [Circular dependencies](https://github.com/backflip/gulp-resolve-dependencies/pull/7)
* @doronin: [Path resolver option](https://github.com/backflip/gulp-resolve-dependencies/pull/8)