将 requirejs 优化器节点模块与 Gulp 一起使用答案

【问题标题】：Using requirejs optimizer node module with Gulp将 requirejs 优化器节点模块与 Gulp 一起使用
【发布时间】：2015-05-14 00:14:35
【问题描述】：

有gulp-requirejs 插件，但它是blacklisted 并带有以下消息：“直接使用require.js 模块”。

文档很少，我如何将它与 Gulp 构建任务结合使用？

在docs 中有一个例子：

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

但这对我没有多大帮助......这是我最好的尝试：

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

但是 requirejs 模块不使用流，所以它不会工作。

还有对 Gulp 非常友好的 amd-optimize，但它与 r.js 不同。

【问题讨论】：

好吧，我没用过 gulp。但是我在 RequireJS 以及 grunt 和 non grunt 方面有很好的专业知识......那么这个流是什么，我们不能像 gulp 中的正常任务一样使用吗？
Gulp 使用 Node streams 和 vinyl。在这一点上，乙烯基对我来说是黑魔法，here's 一个很棒的帖子。我也刚刚发现 this issue 正在处理这个问题。
我可以用 gulp-shell 运行 shell 命令。
使用 amd-optimize 没问题。请检查这个答案stackoverflow.com/questions/23978361/…
@OweRReLoaDeD amd-optimize 非常棒！但与 r.js 相比，它有其局限性。

标签： requirejs gulp amd r.js

【解决方案1】：

我刚刚使用 gulp-shell 运行了 r.js 构建命令：

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'
]))

运行大约需要 2 秒，一点也不长。

r 设置在 Gulp 一无所知的外部 build.js 文件中定义。

【讨论】：

抱歉，您不需要 Gupl。您可以通过以下方式运行它： npm run "task"

【解决方案2】：

要在不调用 shell 的情况下执行此操作，您可以这样做：

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

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

【讨论】：