5

There's gulp-requirejs plugin, but it's blacklisted with the following message: "use the require.js module directly".

The docs are quite sparse, how would I best use it in conjunction with Gulp build task?

In the docs there's an example:

var requirejs = require('requirejs');

var config = {
    baseUrl: '../appDir/scripts',
    name: 'main',
    out: '../build/main-built.js'
};

requirejs.optimize(config, function (buildResponse) {
    //buildResponse is just a text output of the modules
    //included. Load the built file for the contents.
    //Use config.out to get the optimized file contents.
    var contents = fs.readFileSync(config.out, 'utf8');
}, function(err) {
    //optimization err callback
});

But that doesn't help me much... Here's my best try:

var gulp = require('gulp'),
    r = require('requirejs').optimize;

var config2 = {
    baseUrl: 'src/js',
    name: 'config',
    out: 'dist/js/main-built.js'
};

gulp.task('scripts3', function() {
    gulp.src(['src/js/**/*.js'])
        .pipe(r(config)
   .pipe(gulp.dest(config.out))
});

But the requirejs module doesn't use streams, so it won't work.

There's also the very Gulp friendly amd-optimize but it's not the same as r.js, yet.

Community
  • 1
  • 1
any_h
  • 530
  • 3
  • 10
  • 27
  • Well I have not used gulp. But I have good expertise around RequireJS and grunt and non grunt... So what is this streams, cant we use like normal task in gulp? – Vishwanath Mar 12 '15 at 14:46
  • Gulp uses [Node streams](https://nodejs.org/api/stream.html), and [vinyl](https://github.com/wearefractal/vinyl). Vinyl is black magic for me at this point, [here's](https://medium.com/@contrahacks/gulp-3828e8126466) a great post on it. I also just found [this issue](https://github.com/jrburke/r.js/issues/785) dealing with just this. – any_h Mar 12 '15 at 15:05
  • I could just run the shell command with gulp-shell. – any_h Mar 12 '15 at 15:07
  • Using amd-optimize is fine. Please check this answer http://stackoverflow.com/questions/23978361/using-gulp-to-build-requirejs-project-gulp-requirejs#26079448 – Remo H. Jansen Mar 12 '15 at 15:39
  • @OweRReLoaDeD amd-optimize is pretty great! But it has it's limitations compared to r.js. – any_h Mar 12 '15 at 15:58

2 Answers2

8

To do this without invoking the shell, you can do it like:

var gulp = require('gulp'),
    rjs = require('requirejs'),

    config = {
        baseUrl: '../appDir/scripts',
        name: 'main',
        out: '../build/main-built.js'
    };

gulp.task('scripts', function(cb){
    rjs.optimize(config, function(buildResponse){
        // console.log('build response', buildResponse);
        cb();
    }, cb);
});

see: https://github.com/phated/requirejs-example-gulpfile/blob/master/gulpfile.js

D Mo
  • 121
  • 1
  • 2
4

I just ended up running the r.js build command with gulp-shell:

var gulp = require('gulp'),
    shell = require('gulp-shell');

// Run the r.js command, so simple taks :)
gulp.task('scripts', shell.task([
    'r.js -o build/r/build.js'
]))

It takes roughly 2 seconds to run, not too long at all.

The r settings are defined in an external build.js file that Gulp knows nothing about.

any_h
  • 530
  • 3
  • 10
  • 27