Builds projects using require.js's optimizer
npm install gulp-requirejs| Package | gulp-requirejs |
| Description | uses require.js's r.js optimizer to combine require.js AMD modules into one file |
| Node Version | ≧ 4 |
gulp-requirejs as a dev-dependency in your package.json or run
bash
$ npm install --save-dev gulp-requirejs
`
Usage
Because 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 optimize option to uglify to minify using r.js.
`javascript
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:
`javascript
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.
$3
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.
$3
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.
`javascript
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
});
``