1

Following one of the chapters of "Developing Backbone.js Apllication" by Addy Osmani (O'Reilly) about Grunt-BBB (Backbone Boilerplate Buddy), I just couldn't manage to create a build profile.

Here is the filesystem tree used for this :

/builds
    /closure
    /rhino
    /config
        /build.js
    build.sh
/development
    /* Grunt-BBB files after init */
    /app
        /styles
            index.css
        app.js
        config.js
        main.js
        router.js
    /test
        /* Not important files used for testing */
    /vendor
        /h5bp
            /css
                main.css
                normalize.css
        /jam
            /backbone
                backbone.js
                package.json
            /bakbone.layoutmanager
                bakbone.layoutmanager.js
                package.json
            /jquery
                jquery.js
                package.json
            /lodash
                lodash.js
                lodash.min.js
                lodash.underscore.min.js
                package.json
            require.config.js
            require.js
        /js
            /libs
                almond.js
                require.js
/distribution
    /* Empty dist directory where the optimized / minified / concatenated files should go */

Here are the steps I followed in the /development directory :

1) Install Grunt-BBB (npm install -g bbb)

2) Download r.js, a part of the Require.js project (git clone https://github.com/backbone-boilerplate/grunt-bbb)

3) Initialize the files of the boilerplate (bbb init)

Here is the build.js file I used to configure the r.js AMD loader for the Google Closure compiler :

({
    appDir: '../../development',
    baseUrl: 'app',
    dir: '../../distribution',
    optimize: 'closure', // 'uglify2'
    paths: {
        backbone: '../vendor/jam/backbone/backbone',
        'backbone.layoutmanager': '../vendor/jam/backbone.layoutmanager/backbone.layoutmanager',
        jquery: '../vendor/jam/jquery/jquery',
        lodash: '../vendor/jam/lodash/backbone.min'
    },
    modules: [
        {
            name: 'main'
        }
    ],
    onBuildRead: function(moduleNames, path, contents) {
        return contents;
        //return contents.replace(/console\.log\(([^\)]+)\);/g, '')
        //              .replace(/debugger;/, '');
    }
})

and this is the build.sh file I use :

#!/usr/bin/env bash

# r.js directory
RJSDIR="r.js"
RJS="$RJSDIR/dist/r.js"

# Rhino directory
RHINODIR="rhino"
RHINO="$RHINODIR/js.jar"

# Google Closure Compiler directory
CLOSUREDIR="closure"
CLOSURE="$CLOSUREDIR/compiler.jar"

# Build config directory
CONFIGDIR="config"
CONFIG="$CONFIGDIR/build.js"

# Launch compillation
java -Xms256m -Xmx256m -classpath "$RHINO":"$CLOSURE" org.mozilla.javascript.tools.shell.Main "$RJS" -o "$CONFIG" $@

My goal is to optimize, minify, concatenate all the JavaScrit file including the libraries and templates (which I don't have yet, I am only using the boilerplate files) but also CSS files.

The result I get by running ./build.sh is that every files are correctly minimised (besides CSS rule inlining, but that is besides the point) and concatenated but resources that are loaded and managed by the Jam (package manager that combines NPM and Require.js) aren't concatenated.

The reason for that since they are already loaded / managed by Jam, they are not redeclared in the JavaScript files AMD style.

In conclusion, my questions are the following :

  • How can I rewrite my build.js configuration file so that resources that are loaded by Jam also get included and concatenated in the release / dist file ?

  • How can I make it so that the concatenated resources aren't copied in the realse / dist directory ? Is it possible to configure this in the build.js file or should this go in my build.sh file ?

Edit : New build.js file :

({
    appDir: '../../development',
    baseUrl: 'app',
    dir: '../../distribution',
    optimize: 'closure', // 'uglify2'
    paths: {
        requirejs : '../vendor/jam/require',
        backbone: '../vendor/jam/backbone/backbone',
        'backbone.layoutmanager': '../vendor/jam/backbone.layoutmanager/backbone.layoutmanager',
        jquery: '../vendor/jam/jquery/jquery',
        lodash: '../vendor/jam/lodash/backbone.min'
    },
    name: 'main',
    include: ['requirejs'],
    onBuildRead: function(moduleNames, path, contents) {
        return contents;
        //return contents.replace(/console\.log\(([^\)]+)\);/g, '')
        //              .replace(/debugger;/, '');
    }
})

And here is the error :

file:///vendor/js/libs/require.jsFailed to load resource: The requested URL was not found on this server.
file:///app/styles/index.cssFailed to load resource: The requested URL was not found on this server.
m_vdbeek
  • 3,384
  • 5
  • 40
  • 76

1 Answers1

0

require.js is never included by r.js unless you instruct it to do so. See this link:

http://requirejs.org/docs/optimization.html#onejs

The link refers to command-line options, but the build file options are broadly the same:

you need to define a dummy module for require.js in your paths:

paths: {
    requireLib : '/path/to/require.js'
    backbone: '../vendor/jam/backbone/backbone',
    'backbone.layoutmanager': '../vendor/jam/backbone.layoutmanager/backbone.layoutmanager',
    jquery: '../vendor/jam/jquery/jquery',
    lodash: '../vendor/jam/lodash/backbone.min'
},

and include it:

name "main",    
include: ["requireLib"],

You can ensure that allnested dependencies are resolved by setting:

findNestedDependencies: true,

You can configure an output path using 'out' in your build file

out: "path/to/my/builtfile-1.0.0.js",

Sorry I don't know enough about jam to say whether jam would override this setting

_Pez

underscorePez
  • 887
  • 8
  • 18
  • Ok so apparently "out" is apparently incompatible with "appDir". I changed my ´builde.js´files (see my original post) but got an error (also attached to my original post). – m_vdbeek Jul 26 '13 at 20:43
  • So the result was that all the files were concatenated including 2 versions of require.js, 1 of backbone.layoutmanager, but the other resources that are located in the jam directory are still not concatenated. – m_vdbeek Jul 26 '13 at 20:49
  • I'm pretty sure that "requirejs" is also a reserved dependency name, did you try with "requireLib"? – underscorePez Jul 26 '13 at 21:14
  • No, for some reason it didn't change anything. :S – m_vdbeek Jul 26 '13 at 21:44
  • OK, this is now looking a lot like my build file that runs fine (though obviously I don't launch it via jam) the only other thing I can suggest is findNestedDependencies: true – underscorePez Jul 26 '13 at 21:57
  • No sorry, it didn't work. :/ I will ask the question on the Yam github repository. – m_vdbeek Jul 26 '13 at 22:12