使用 Gulp 构建 requireJS 项目 - gulp-requirejs [英] Using Gulp to build requireJS project - gulp-requirejs

问题描述

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

I am trying to use gulp-requirejs to build a demo project. I expect result to be a single file with all js dependencies and template included. Here is my 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、下划线、主干.

The above build file works with no error, but the result.js only contains the content of main.js and config.js. All the view files, jquery, underscore, backbone is not included.

如何配置 gulp-requirejs 将每个 js 模板放入一个 js 文件?如果这不是正确的方法，你能建议其他方法吗?

How can I configure gulp-requirejs to put every js template into one js file? If it is not the right way to go, can you please suggest other method?

编辑

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: '/' });
    });
});

输出只是这两个文件的组合，这不是我所期望的.

The output is just a combination this two files, which is not what I expected.

推荐答案

gulp-requirejs 已被 gulp 人员列入黑名单.他们将 RequireJS 优化器视为自己的构建系统，与 gulp 不兼容.我对此了解不多，但我确实在 amd-optimize 中找到了适合我的替代方案.

gulp-requirejs has been blacklisted by the gulp folks. They see the RequireJS optimizer as its own build system, incompatible with gulp. I don't know much about that, but I did find an alternative in amd-optimize that worked for me.

npm install amd-optimize --save-dev

然后在你的 gulpfile 中:

Then in your 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.js 中，然后再写入 dist 文件夹.

The output of amdOptimize is a stream which contains the dependencies of the primary module (main in the above example) in an order that resolves correctly when loaded. These files are then concatenated together via concat into a single file main-bundle.js before being written into the dist folder.

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

You could also minify this file and perform other transformations as needed.

顺便说一句，在我的例子中，我将 TypeScript 编译到 AMD 模块中以进行捆绑.通过进一步思考，我意识到在捆绑所有内容时，我不需要 AMD/RequireJS 提供的异步加载.我将尝试让 TypeScript 编译 CommonJS 模块，然后使用 webpack 或 browserify，这两个似乎在 gulp 中都有很好的支持.

As an aside, in my case I was compiling TypeScript into AMD modules for bundling. Thinking this through further I realized that when bundling everything I don't need the asynchronous loading provided by AMD/RequireJS. I am going to experiment with having TypeScript compile CommonJS modules instead, then bundling them using webpack or browserify, both of which seem to have good support within gulp.

这篇关于使用 Gulp 构建 requireJS 项目 - gulp-requirejs的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！