Search code examples
javascriptoptimizationrequirejsgulpr.js

r.js optimizer not taking from config


I am using gulp and requirejs-optimize

My init.js

;
(function(require) {

    "use strict";

    //Constants

    require.config({

        paths: {
            "angular": "app/libs/angular/angular.min",
            "domready": "app/libs/domReady/domReady",
            "angular-ui-router": "app/libs/angular-ui-router/release/angular-ui-router.min",
            "angular-bootstrap": "app/libs/angular-bootstrap/ui-bootstrap.min",
            "App": "app/app",
            "angular-animate": "app/libs/angular-animate/angular-animate.min",
            "ui-bootstrap-tpls": "app/libs/angular-bootstrap/ui-bootstrap-tpls.min",
            "enums": "app/enums"
        },
        waitSecond: 0,
        shim: {
            "angular": {
                exports: "angular",
                deps: []
            },

            "angular-ui-router": {
                deps: ["angular"]
            },

            "angular-bootstrap": {
                deps: ["angular"]
            },

            "ui-bootstrap-tpls": {
                deps: ["angular-bootstrap"]
            },

            "domready": {
                deps: []
            },

            "App": {
                deps: ["angular"]
            },

            "angular-animate": {
                deps: ["angular"],
                exports: "angular"
            }
        }
    });

    //This module defines all the Global constants for the app
    define("CONST", [], {
        templatesPath: "views/",
        URL: "https://saltjs-nirus.c9.io/service"
    });

    define(["require", "domready"], function(require, domready) {
        domready(function() {
            require(["angular", "App", "app/router"], function(angular, app) {
                angular.bootstrap(document, ["salt"]);
            });
        });
    });

})(window.requirejs);

and my Build config file is as below

var gulp = require("gulp");
var requirejsOptimize = require('gulp-requirejs-optimize');

gulp.task('scripts', function() {
    return gulp.src(["./../ClientApp/init.js", "./../ClientApp/app/libs/domReady/domReady.js"])
        .pipe(requirejsOptimize(function(file) {
            return {
                baseUrl: "./../ClientApp/",
                useStrict: true,
                optimize: "uglify",                 
                paths: {
                    "angular": "app/libs/angular/angular.min",
                    "domready": "app/libs/domReady/domReady",
                    "angular-ui-router": "app/libs/angular-ui-router/release/angular-ui-router.min",
                    "angular-bootstrap": "app/libs/angular-bootstrap/ui-bootstrap.min",
                    "App": "app/app",
                    "angular-animate": "app/libs/angular-animate/angular-animate.min",
                    "ui-bootstrap-tpls": "app/libs/angular-bootstrap/ui-bootstrap-tpls.min",
                    "enums": "app/enums"
                },
                shim: {
                    "angular": {
                        exports: "angular",
                        deps: []
                    },

                    "angular-ui-router": {
                        deps: ["angular"]
                    },

                    "angular-bootstrap": {
                        deps: ["angular"]
                    },

                    "ui-bootstrap-tpls": {
                        deps: ["angular-bootstrap"]
                    },

                    "domready": {
                        deps: []
                    },

                    "App": {
                        deps: ["angular"]
                    },

                    "angular-animate": {
                        deps: ["angular"],
                        exports: "angular"
                    }
                }
            }
        }))
        .pipe(gulp.dest('./../build/final.js'));
});

gulp.task("default", ['scripts'])

Problem: When run gulp i am getting below error

ENOENT, no such file or directory '/home/ubuntu/workspace/ClientApp/domReady.js'

Here the requirejs optimizer is not taking the path option specified in the build-config file, instead its searching for the physical path which is throwing the error. How can i force the optimizer to lookup to the path option specified in the r.js build config and pick up the files from there for optimization.


Solution

  • Finally i figured out to make it work:

    I switched from gulp-optimizer to straight Node r.js as Gulp dev have suggested to use the optimizer directly as r.js is not compatible with gulp.

    Git Blacklist.json:

    "gulp-module-requirejs": "use the require.js module directly",

    Below is my config file:

    ({
        mainConfigFile: "./../ClientApp/app/init.js",
        name: "init",
        baseUrl: "./../ClientApp/app/",
        insertRequire:["init"],
        findNestedDependencies: true,
        out: "./../ClientApp/build/final.js",
        wrap: true,
        optimize: "uglify",
        uglify: {
            toplevel: true,
            ascii_only: true,
            beautify: false,
            max_line_length: 1000,
            defines: {
                DEBUG: ['name', 'false']
            },
            no_mangle: true
        }
    });
    

    I am using uglify for minification provided by require.js

    Explanation:

    • mainConfigFile: Use this option to point out to the file where you have defined your paths, shims, deps etc. RequireJs is intelligent enough to pick the config from this declaration for processing(they use regex pattern to filter this part, so be careful. Refer their DOC)
    • name : An entrypoint module name. Define this where your executin kicks-off. PS: If you have config and EP is the same file, require will detect this and add the name to your defined call.
    • insertRequire: This will insert a require statement at the end which will trigger the execution of your code. See the DOC.
    • findNestedDependencies : Instruct require to pick the dependencies from your entrypoint file. Traverse thorough the files and grab the dependencies for final build.

    Rest is self explanatory or refer the documentation

    Well this saved me.

    To use with the gulp build system see gulp shell module, by this you can wireup your build system to automate the complete process.

    Refer this answer to know how to achieve this.

    Hope this answer helps someone stuck same as me!