requirejs - 用吞量构建requireJS工程吞咽 requireJS

  显示原文与译文双语对照的内容
111 0

我尝试使用 gulp 来构建一个演示项目。 我期望结果是一个包含所有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: '/' });


 });


});



输出只是这两个文件的一个组合,这不是我所期望的。

时间: 原作者:

57 0

gulp-requirejs 已经被 gulp folks列入黑名单。 他们认为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.js 中,然后将它们写入到 dist 文件夹中。

你还可以缩小这个文件并根据需要执行其他转换。

另外,在我的例子中,我正在向AMD模块编译应用程序。 通过进一步思考,我意识到当捆绑所有的东西时,我不需要 amd/requirejs提供的异步加载。 现在,我将尝试使用TypeScript编译CommonJS模块,然后使用 web pack 或者 browserify进行绑定,这两个模块在gulp中似乎都有良好的支持。

...