Gulp和Gulp-Durandal的Durandal优化不起作用

Question

我们正在使用Durandal构建一个应用程序,目前这个应用程序非常庞大,我们目前正在考虑将位于App文件夹中的所有JS文件捆绑到main-built.js文件中.我猜是非常基本和平常的东西.

我正在使用Gulp和Gulp-Durandal扩展.这里是我们的gulpfile:

var gulp = require('gulp');
var durandal = require('gulp-durandal');

gulp.task('build-portal', function () {
    durandal({
        baseDir: 'app',
        main: 'main.js',
        output: 'main-built.js',
        almond: false,
        minify: false
    }).pipe(gulp.dest('app'));
});

这是我们的main.js文件的片段

require.config({
paths: {
    'text': '../Scripts/text',
    'durandal': '../Scripts/durandal',
    'plugins': '../Scripts/durandal/plugins',
    'transitions': '../Scripts/durandal/transitions'
},
shim: {
},
waitSeconds: 0
});

define('jquery', [], function () { return jQuery; });
define('knockout', [], function () { return ko; });
define('ga', function () { return ga; });

define(
    ["require", "exports", "durandal/app", "durandal/viewLocator", "durandal/system", "plugins/router", "services/logger", "modules/knockout.extensions", "modules/knockout.validation.custom"],
    function (require, exports, __app__, __viewLocator__, __system__, __router__, __logger__, __koExtensions__, __koValidationCustom__) {
        var app = __app__;
        var viewLocator = __viewLocator__;
        var system = __system__;
        var router = __router__;

正如您在gulpfile中看到的那样,我们不想使用Almond而是使用RequireJs,出于某些原因,杏仁不能用于我们的项目,无论如何,我们更喜欢RequireJs,最后它是否比杏仁更大.这就是刹车的地方.运行命令来构建main-built.js文件花了一些时间,但最后我得到了使用其中的所有内容构建的文件.

问题是当我尝试加载应用程序时,它会粘在加载屏幕上.它没有进一步发展,在浏览器控制台中根本没有任何错误.

我创建了一个新项目,以测试我们的代码是否有些错误,并发现它可能没有.你可以在这里找到这个项目:https: //github.com/maroy1986/DurandalGulpBundling

如果我使用杏仁选项构建该项目为true,一切正常,但如果我关闭almound告诉gulp使用RequireJs,我的行为与我们的应用程序相同.你被卡在加载屏幕上,没有任何错误.

所以我在这里,我确实阅读了很多关于这个问题,但没有找到任何解决这个问题.希望有人在这里已经遇到这些行为,并有一个分享的解决方案.

谢谢!

Answer 1

我有同样的要求和问题。require.js 似乎没有调用将启动 Durandal 应用程序的主模块，这就是它卡在加载屏幕中的原因。我能够通过隐式调用主模块来解决它：

gulp.task("durandal", function() {
    return durandal({
        baseDir: "app",
        main: "main.js",
        output: "main-built.js",
        almond: false,
        minify: true,
        rjsConfigAdapter: function(config) {
            //Tell requirejs to load the "main" module
            config.insertRequire = ["main"];
            return config;
        }
    })
    .pipe(gulp.dest("dist"));
});