Durandal optimization with Gulp and Gulp-Durandal not working

5
votes

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!

2
requirejsgulpdurandalbundling-and-minification

2 Answers

1
votes

I downloaded your project and tried building it with the latest versions of gulp and durandal. Initially it didn't build and gave me the following error:

 TypeError: Cannot read property 'normalize' of undefined

This is a problem with the text-plugin of rjs and you can solve this by adding the following to your gulp-file (next to the almond, minify, output... properties):

rjsConfigAdapter : function(rjsConfig){
            rjsConfig.deps = ['text'];
            return rjsConfig;
        }

Once I did that, the build finished and I could build with or without minify, almond and require and the application works fine.

1
votes

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