Building Durandal with Grunt (R.js + Text)

Question

I would like to use Grunt to build a Durandal project, because Weyland remains completely undocumented and isn't as standard as Grunt.

To do this, the grunt task needs to pull in all the js and html files during optimization, but I am unable to get RequireJS to inline the html files via the text module.

It looks like weyland copies the text files manually, but I can't figure out what it's doing to get requirejs (or almond, in this case), to actually use them. I have seeen this question, but it requires the text modules to be referenced in the define call, which isn't done in Durandal.

My gruntfile for require uses this config

requirejs: {
            build: {
                options: {                  
                    name: '../lib/require/almond-custom', //to deploy with require.js, use the build's name here instead
                    insertRequire: ['main'], //needed for almond, not require
                    baseUrl: 'src/client/app',
                    out: 'build/main-built.js',
                    mainConfigFile: 'src/client/app/main.js', //needed for almond, not require
                    wrap: true, //needed for almond, not require
                    paths: {
                        'text': '../lib/require/text',
                        'durandal':'../lib/durandal/js',
                        'plugins' : '../lib/durandal/js/plugins',
                        'transitions' : '../lib/durandal/js/transitions',
                        'knockout': '../lib/knockout-2.3.0',
                        'bootstrap': '../lib/bootstrap.min',
                        'jquery': '../lib/jquery-1.9.1',
                        'Q' : '../lib/q.min'
                    },
                    inlineText: true,
                    optimize: 'none',
                    stubModules: ['text']               
                }
            }
        }

Its not about optimizing them, its about bundling them. RequireJS's text module makes async calls for text, in Durandal's case it is HTML files which it uses as partials. R.js's purpose is to bundle up your JS in one file, and it makes sense to bundle the "require"-d html for Durandal. This operation is supported, but in Duranda's case the requests are dynamic. I do not know how to do dynamic bundling, or if it's even possible. — Kyeotic, Jan 15 '14 at 19:04

score 5 · Accepted Answer · answered Jan 15 '14 at 21:55

5

You might want to give https://npmjs.org/package/grunt-durandal a try. I'm using this as part of a grunt based build process. See https://github.com/RainerAtSpirit/HTMLStarterKitPro for an example.

durandal: {
    main: {
        src: ['app/**/*.*', 'lib/durandal/**/*.js'],
            options: {
            name: '../lib/require/almond-custom',
                baseUrl: requireConfig.baseUrl,
                mainPath: 'app/main',
                paths: mixIn({}, requireConfig.paths, { 'almond': '../lib/require/almond-custom.js' }),
                exclude: [],
                optimize: 'none',
                out: 'build/app/main.js'
        }
    }
},

answered Jan 15 '14 at 21:55

RainerAtSpirit

3,723
1
17
18

This looks great! The documentation needs to let you know that `name` is how you override the almond path, but this is a solid start. Thanks Rainer! – Kyeotic Jan 15 '14 at 22:19
That's why the documentation call the `grunt build` task experimental :). – RainerAtSpirit Jan 15 '14 at 22:26
What does the optimize property do and what other values does it take? I can't seem to find any info on it. – Norbert Jun 30 '14 at 19:42
options are passed through to `r.js` documentation can be found at https://github.com/jrburke/r.js/blob/master/build/example.build.js. I never let r.js optimize the output, there's a separate `uglify` task for that. – RainerAtSpirit Jul 02 '14 at 13:32
@RainerAtSpirit What would be the best approach for r.js optimisation? With HTMLStarterKitPro build I get `TypeError: req.toUrl is not a function` from Almond not doing dynamic loading in the final build directory. – MrYellow Nov 01 '14 at 21:57

score 2 · Answer 2 · answered Jan 15 '14 at 21:31

As a possible alternative to Grunt I would suggest looking at Mimosa. It's not as widely used as Grunt but is well documented and requires a good deal less configuration and if you start with the durandal skeleton everything is configured for you including inlining html.

Durandal also recommends it and tells you how to get started with it: http://durandaljs.com/pages/get-started/

You can run make start to start developing and make dist to have it package everything up for release.

Building Durandal with Grunt (R.js + Text)

2 Answers2