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:

    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!