使用Gulp构建requireJS项目 - gulp-requirejs

Question

我正在尝试使用gulp-requirejs来构建一个演示项目.我希望结果是一个包含所有js依赖项和模板的文件.这是我的gulpfile.js

var gulp = require('gulp');
var rjs = require('gulp-requirejs');
var paths = {
  scripts: ['app/**/*.js'],
  images: 'app/img/**/*'
};

gulp.task('requirejsBuild', function() {
    rjs({
        name: 'main',
        baseUrl: './app',
        out: 'result.js'
    })
    .pipe(gulp.dest('app/dist'));

});

// The default task (called when you run `gulp` from cli)
gulp.task('default', ['requirejsBuild']);

上面的构建文件没有错误,但result.js只包含main.js和config.js的内容.不包括所有视图文件,jquery,下划线,主干.

如何配置gulp-requirejs将每个js模板放入一个js文件？如果不是正确的方法,请您建议其他方法吗？

编辑

config.js

require.config({
    paths: {
        "almond": "/bower_components/almond/almond",
        "underscore": "/bower_components/lodash/dist/lodash.underscore",
        "jquery": "/bower_components/jquery/dist/jquery",
        "backbone": "/bower_components/backbone/backbone",
        "text":"/bower_components/requirejs-text/text",
        "book": "./model-book"
    }
});

main.js

// Break out the application running from the configuration definition to
// assist with testing.
require(["config"], function() {
    // Kick off the application.
    require(["app", "router"], function(app, Router) {
        // Define your master router on the application namespace and trigger all
        // navigation from this instance.
        app.router = new Router();

        // Trigger the initial route and enable HTML5 History API support, set the
        // root folder to '/' by default.  Change in app.js.
        Backbone.history.start({ pushState: false, root: '/' });
    });
});

输出只是这两个文件的组合,这不是我的预期.

Answer 1

gulp-requirejs被大佬们列入黑名单.他们将RequireJS优化器视为自己的构建系统,与gulp不兼容.我对此并不了解,但我确实找到了另一种替代方案amd-optimize.

npm install amd-optimize --save-dev

然后在你的gulpfile中:

var amdOptimize = require('amd-optimize');
var concat = require('gulp-concat');

gulp.task('bundle', function ()
{
    return gulp.src('**/*.js')
        .pipe(amdOptimize('main'))
        .pipe(concat('main-bundle.js'))
        .pipe(gulp.dest('dist'));
});

输出amdOptimize是一个流,它包含主模块的依赖关系(main在上例中),按加载时正确解析的顺序.然后,这些文件在写入文件夹之前通过concat一个文件连接在一起.main-bundle.jsdist

您还可以根据需要缩小此文件并执行其他转换.

顺便说一句,在我的情况下,我正在将TypeScript编译成AMD模块以进行捆绑.通过进一步思考,我意识到捆绑所有东西时我不需要AMD/RequireJS提供的异步加载.我将与具有打字稿编译CommonJS的模块来代替,然后使用捆绑他们进行实验的WebPack或browserify,这两者似乎有一口内良好的支持.

Answer 2

UPDATE

我的上一个答案总是报告taskReady即使requirejs报告错误.我重新考虑了这种方法并添加了错误记录.另外我尝试完全失败,如此处所述gulp-jshint:如何使构建失败？因为沉默的失败真的会耗费你的时间.请参阅下面的更新代码

Drew关于黑名单的评论非常有帮助,而且人们建议直接使用requirejs.所以我发布了我的直接requirejs解决方案:

var DIST = './dist';
var requirejs = require('requirejs');
var requirejsConfig = require('./requireConfig.js').RJSConfig;

gulp.task('requirejs', function (taskReady) {
    requirejsConfig.name = 'index';
    requirejsConfig.out = DIST + 'app.js';
    requirejsConfig.optimize = 'uglify';
    requirejs.optimize(requirejsConfig, function () {
        taskReady();
    }, function (error) {
        console.error('requirejs task failed', JSON.stringify(error))
        process.exit(1);
    });
});

文件at ./dist/app.js是构建和uglified.通过这种方式gulp将知道何时需要完成构建.因此,任务可以用作依赖项.

Answer 3

我的解决方案是这样的:

./client/js/main.js:

require.config({
    paths: {
        jquery: "../vendor/jquery/dist/jquery",
        ...
    },
    shim: {
        ...
    }
});

define(["jquery"], function($) {
    console.log($);
});

./gulpfile.js:

var gulp = require('gulp'),
    ....
    amdOptimize = require("amd-optimize"),
    concat = require('gulp-concat'),
    ...

gulp.task('scripts', function(cb) {

    var js = gulp.src(path.scripts + '.js')
        .pipe(cached('scripts'))
        .pipe(jshint())
        .pipe(jshint.reporter('default'))
        .pipe(remember('scripts'))
        .pipe(amdOptimize("main",
            {
                name: "main",
                configFile: "./client/js/main.js",
                baseUrl: './client/js'
            }
        ))
        .pipe(concat('main.js'));

        .pipe(gulp.dest(path.destScripts));
}
...

这部分很重要:

configFile: "./client/js/main.js",
baseUrl: './client/js'

这使我可以将配置保存在一个地方.否则我不得不复制我的路径和垫片到gulpfile.js.