使用Gulp构建requireJS项目- 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({
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: '/' });
});
});输出只是这两个文件的组合，这并不是我所期望的。
回答 7
Stack Overflow用户
发布于 2014-09-28 05:34:35
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)的依赖项，其顺序在加载时可以正确解析。然后，在将这些文件写入dist文件夹之前，通过concat将这些文件连接在一起，形成单个文件main-bundle.js。
您还可以缩小此文件，并根据需要执行其他转换。
顺便说一句，在我的例子中，我是将TypeScript编译成AMD模块进行捆绑。通过进一步思考，我意识到当捆绑所有东西时，我不需要AMD/RequireJS提供的异步加载。我将尝试让TypeScript编译CommonJS模块，然后使用webpack或browserify捆绑它们，这两种方法在gulp中似乎都有很好的支持。
Stack Overflow用户
发布于 2015-07-18 01:32:00
更新
我之前的回答总是报告taskReady，即使requirejs报告了错误。我重新考虑了这种方法，并添加了错误日志。此外，我尝试完全失败构建，正如这里描述的gulp-jshint: How to fail the build?，因为静默的失败真的会耗费你的时间。请参阅下面的更新代码。
Drew关于黑名单的评论是非常有帮助的，吞咽的人建议直接使用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);
});
});./dist/app.js处的文件已构建并进行了美化。这样，当require完成构建时，gulp就会知道。因此，该任务可以用作依赖项。
Stack Overflow用户
发布于 2015-05-12 03:24:34
我的解决方案是这样的：
./client/js/main.js：
require.config({
paths: {
jquery: "../vendor/jquery/dist/jquery",
...
},
shim: {
...
}
});
define(["jquery"], function($) {
console.log($);
});./gupfile.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中。
https://stackoverflow.com/questions/23978361
复制相似问题