A small, simple, very easy wrapper around the require.js optimizer to work with gulp.js.
| Package | gulp-requirejs |
| Description | uses require.js’s r.js optimizer to combine require.js AMD modules into one file |
| Node Version | ≧ 4 |
Simply add gulp-requirejs as a dev-dependency in your package.json or run
$ npm install --save-dev gulp-requirejsBecause the require.js optimizer (r.js) is a kind of build system in itself we can’t use the gulp.src([...]) syntax at the moment (I might add this in future), instead this wrapper itself emits a pipable stream, holding a ‘virtual’ file, in which the result of the r.js build process are saved.
The resulting stream can be treated like a regular gulp.src(...) stream.
NOTE: The built in minification/obfuscation is deactivated by default. It is recommended to use a gulp plugin like gulp-uglify for minification, but you can enable r.js minification by setting the
optimizeoption touglifyto minify using r.js.
var gulp = require('gulp'),
rjs = require('gulp-requirejs');
gulp.task('requirejsBuild', function() {
return rjs({
baseUrl: 'root/directory/of/js/files/',
out: 'FILENAME_TO_BE_OUTPUTTED',
name: 'mainfile', // no extension
shim: {
// standard require.js shim options
},
// ... more require.js options
})
.pipe(gulp.dest('./deploy/')); // pipe it to the output DIR
});If you use instead of out the dir option, you do not need the pipe at all, see this example in Gulp 4 syntax and mocha test:
const rjs = require('gulp-requirejs');
async function requirejsBuild(cb) {
return rjs({
dir: 'deploy',
mainConfigFile: 'config.js',
path: {
'config': '../config_init'
},
modules: [{
name: 'FILENAME_TO_BE_OUTPUTTED', // no extension
include : [ .. ]
...
}]
}) ...
};
exports.requirejsBuild = requirejsBuild;Note: In order to let gulp know that the optimization completes, return the rjs stream.
See requirejs.org for more information about the supported parameters.
gulp-requirejs will emit errors when you don’t pass an options object, if the baseUrl or out properties are undefined or when the requirejs optimizer detects an error.
When source maps are enabled via the r.js generateSourceMaps option the file in the stream rjs() contains a sourceMap property with the sourcemap as an object.
Use gulp-sourcemaps to process this object in your gulp configuration.
var gulp = require('gulp'),
rjs = require('gulp-requirejs')
sourcemaps = require('gulp-sourcemaps');
gulp.task('requirejsBuild', function() {
return rjs({
baseUrl: 'root/directory/of/js/files/',
out: 'FILENAME_TO_BE_OUTPUTTED',
name: 'mainfile', // no extension
generateSourceMaps: true,
shim: {
// standard require.js shim options
},
// ... more require.js options
})
.pipe(sourcemaps.init({loadMaps: true})) // initialize gulp-sourcemaps with the existing map
.pipe(sourcemaps.write()) // write the source maps
.pipe(gulp.dest('./deploy/')); // pipe it to the output DIR
});The options object supports the same parameters as the require.js optimizer.
https://github.com/jorrit/gulp-requirejs
