gulp-requirejs

Information

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

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',
        main: '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](https://requirejs.org/docs/optimization.html) 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](https://www.npmjs.com/package/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',
        main: '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.