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

问题描述

我正尝试使用 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（{
名称：'main'，
 baseUrl：'./app'，
 out：'result.js'
}）
 .pipe（gulp.dest（'app / dist'））; 
 
}）; 
 
 //默认任务（当你从cli运行`gulp`时调用）
 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 ，
undercore：/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

  //将从配置定义运行的应用程序分解为
 //协助测试。 
 require（[config，function（）{
 //启动应用程序
 require（[app，router]，function（app，Router）{ 
 //在应用程序命名空间中定义您的主路由器，并从此实例触发所有
 //导航
 app.router = new Router（）; 
 
 / /触发初始路由并启用HTML5 History API支持，默认情况下将
 //根文件夹设置为'/'。app.js.中的更改
 Backbone.history.start（{pushState：false， root：'/'}）; 
}）; 
}）; 
  

输出结果只是这两个文件的组合，这不是我预期的结果。

解决方案

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 >）的依赖关系，其顺序可在加载时正确解析。这些文件在写入<$ c>之前通过 concat 连接在一个文件 main-bundle.js c $ c> dist 文件夹。

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

---

另外，就我而言，我正在将TypeScript编译为AMD模块进行捆绑。通过进一步思考，我意识到捆绑一切时，我不需要AMD / RequireJS提供的异步加载。我将尝试使用TypeScript编译CommonJS模块，然后使用 webpack 或browserify ，这两者似乎都有良好的支持。

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

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.

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?

Edit

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 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

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

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.

---

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屋！