node package manager

gulp-requirejs

gulp-requirejs

gulp-requirejs on npm Dependency Status Build Status Coverage

Information

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

Packagegulp-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: 'path/to/your/base/file.js',
        out: 'FILENAME_TO_BE_OUTPUTTED',
        shim: {
            // standard require.js shim options 
        },
        // ... more require.js options 
    })
    .pipe(gulp.dest('./deploy/')); // pipe it to the output DIR 
});

Note: In order to let gulp know that the optimization completes, return the rjs stream.

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: 'path/to/your/base/file.js',
        out: 'FILENAME_TO_BE_OUTPUTTED',
        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.