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.
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.
"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:
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
to your defined call.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!