Durandal optimization with Gulp and Gulp-Durandal not working

Question

We are building an application with Durandal which is quite big at the moment and we currently looking into bundling all JS files located in the App folder into a main-built.js file. Pretty basic and usual stuff I guess.

I'm using Gulp with the Gulp-Durandal extension. Here our 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'));
});

And here's a snippet of our main.js file

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

As you can see in the gulpfile, we do not want to use Almond but RequireJs instead, for some reasons almond isn't workin with our project and anyhow, we prefer RequireJs whether its bigger than almond at the end. That's where it look to brake. Running the command to build the main-built.js file took sometime but at the end I get the file built with everything in it.

The problem is that when I try to load the application, it is stuck to the loading screen. It doesn't go any further and there's no errors at all in the browser console.

I created a new project on the side to test if our code was somewhat faulty and found that it might not. You can found that project here : https://github.com/maroy1986/DurandalGulpBundling

If I build that project with almond option to true, everything works fine but if I switch almound off to tell gulp to use RequireJs, I got the same behavior as our app. You got stuck at the loading screen, without any errors.

So here I am, I do read a lot on the subject but didn't found anything to solve this. Hope someone here already encounter these behavior and have a solution to share.

Thanks!

Answer 1

I had the same requirement and issue. It seems require.js wasn't calling the main module which will startup the Durandal app, that's why it's stuck in the loading screen. I was able to resolve it by implicitly calling the main module:

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