gulp-requirejs

Information

A small, simple, very easy wrapper around the require.js optimizer to work with gulp.js.

Installation

Simply add gulp-requirejs as a dev-dependency in your package.json or run

$ 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.

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.

Error handling

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.

Source maps

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
});

Options

The options object supports the same parameters as the require.js optimizer.