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.
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!
Related
Problem
When executing the compiled handlebars templates the global Handlebars object isn't exported. NOTE: the global Backbone object is working.
See, when the code App.templates.todos attempts to execute in the todos.js file it fails because App.templates.todos isn't defined. Well ultimately that's because the third line in the templates.js file can't execute because the global Handlebars object isn't defined.
Why wouldn't that object get defined? What did I do wrong with require.js here?
UPDATE: I've verified that the handlebars.runtime.js file is in fact executing before the templates.js file and so require.js is running them in the right order when loading the todos.js file.
Bower Components
{
"name": "todomvc-backbone-requirejs",
"version": "0.0.0",
"dependencies": {
"backbone": "~1.1.0",
"underscore": "~1.5.0",
"jquery": "~2.0.0",
"todomvc-common": "~0.3.0",
"backbone.localStorage": "~1.1.0",
"requirejs": "~2.1.5",
"requirejs-text": "~2.0.5",
"handlebars": "~2.0.0"
},
"resolutions": {
"backbone": "~1.1.0"
}
}
main.js
/*global require*/
'use strict';
// Require.js allows us to configure shortcut alias
require.config({
// The shim config allows us to configure dependencies for
// scripts that do not call define() to register a module
shim: {
backbone: {
deps: [
'underscore',
'jquery'
],
exports: 'Backbone'
},
backboneLocalstorage: {
deps: ['backbone'],
exports: 'Store'
},
handlebars: {
exports: 'Handlebars'
},
templates: {
deps: ['handlebars'],
exports: 'App'
},
underscore: {
exports: '_'
}
},
paths: {
jquery: '../bower_components/jquery/jquery',
underscore: '../bower_components/underscore/underscore',
backbone: '../bower_components/backbone/backbone',
backboneLocalstorage: '../bower_components/backbone.localStorage/backbone.localStorage',
handlebars: '../bower_components/handlebars/handlebars.runtime',
templates: '../../../templates',
text: '../bower_components/requirejs-text/text'
}
});
require([
'backbone',
'views/app',
'routers/router'
], function (Backbone, AppView, Workspace) {
/*jshint nonew:false*/
// Initialize routing and start Backbone.history()
new Workspace();
Backbone.history.start();
// Initialize the application view
new AppView();
});
todos.js
/*global define*/
define([
'jquery',
'backbone',
'handlebars',
'templates',
'common'
], function ($, Backbone, Handlebars, Templates, Common) {
'use strict';
var TodoView = Backbone.View.extend({
tagName: 'li',
template: App.templates.todos,
...
});
return TodoView;
});
templates.js
this["App"] = this["App"] || {};
this["App"]["templates"] = this["App"]["templates"] || {};
this["App"]["templates"]["stats"] = Handlebars.template({"1":function(depth0,helpers,partials,data) {
From official documentation of RequireJS:
The shim config only sets up code relationships. To load modules that
are part of or use shim config, a normal require/define call is
needed. Setting shim by itself does not trigger code to load.
So first you need to somehow call the Handlebars and after try to use it in templates.js.
I recently switched to ember-data#canary, then r.js started failing.
[Error: Error: ENOENT, no such file or directory
'/scripts/lib/ember-data/ember-data/core.js'
In module tree:
app/main
app/app
ember-data
at Object.fs.openSync (fs.js:427:18)
]
This is the build configuration file
`File: build.js`
var config = {
mainConfigFile: '/scripts/common.js',
}
This is the requirejs configuration file
requirejs.config({
paths: {
ember: 'ember/ember',
jquery: 'jquery/dist/jquery',
requirejs: 'requirejs/require',
handlebars: 'handlebars/handlebars',
'ember-data': 'ember-data/ember-data',
},
shim: {
ember: {
deps: [
'handlebars',
'jquery'
],
exports: 'Ember'
},
'ember-data': {
deps: [
'ember'
],
exports: 'DS'
},
}
});
This is how i use ember-data:
define(['ember', 'ember-data'], function(Ember, DS) {
});
You can see the ember-data canary builds here.
This bug have meet from ember-data 1.0.0-beta.9, because in this version has been updated function require in sources. You can revert to beta.8 or try to fix this problem with plugin derequire (grunt-derequire, gulp-derequire).
I've fix it with this task:
gulp.task('build-derequire', function() {
return gulp.src([paths.src.common + '/bower_components/**/ember-data*.js'])
.pipe($.derequire([
{
from: 'require',
to: '_dereq_'
},
{
from: 'define',
to: '_defi_'
}
]))
.pipe(gulp.dest(paths.dev_dist + '/scripts/lib'));
});
I have a directory structure like this:
assets
modules
module1
models
templates
views //contains individual modules
app.js
build.js
require.js
text.js
And here is my build profile
({
paths: {
jquery: 'assets/js/jquery',
underscore: 'assets/js/underscore',
Backbone: 'assets/js/backbone',
bootstrap:'assets/js/bootstrap',
flexslider:'assets/js/jquery.flexslider',
fullCalendar:'assets/js/fullcalendar'
},
shim: {
underscore: {
exports: "_"
},
Backbone: {
deps: ['underscore', 'jquery'],
exports: "Backbone"
},
flexslider:{
deps:['jquery'],
exports:"flexslider"
},
fullCalendar:{
deps:['jquery'],
exports:"fullCalendar"
}
},
baseUrl : "./",
name: 'app',
out: "dist/app.js",
removeCombined: true,
findNestedDependencies: true
})
When i run the optimizer, I just get one app.js file in dist folder and it doesn't include anything from the modules directory. How do I optimize the whole project? Or i am lacking some fundamental understanding?
I'm using r.js to create a one file script for my application using the following command:
r.js -o ./scripts/require.build.json baseUrl=public/js/ name=main out=main.min.js
were require.build.json has the following options:
{
"paths": {
"jquery": "plugins/jquery.1.8.2.min",
"underscore": "plugins/underscore.1.4.2.min",
"backbone": "plugins/backbone.0.9.2.min"
},
"shim": {
"backbone": {
"deps": ["jquery", "underscore"],
"exports": "Backbone"
},
"underscore": {
"exports": "_"
}
}
}
my main file is just a simple test case:
/*jslint browser: true */
/*global define: false*/
define(function (require) {
"use strict";
var $ = require("jquery"),
Backbone = require("backbone");
window.console.log($);
window.console.log(Backbone);
});
I wonder, how can I avoid r.js from minifying the already minified files of my dependencies (jQuery, Underscore and Backbone) to save time?
I'm using in my project require.js and it's plugin use.js.
require.config({
// Initialize the application with the main application file
deps: ["main"],
paths: {
// JavaScript folders
libs: "../assets/js/libs",
plugins: "../assets/js/plugins",
// Libraries
jquery: "../assets/js/libs/jquery",
underscore: "../assets/js/libs/underscore",
backbone: "../assets/js/libs/backbone",
jqueryUI: "../assets/js/libs/jqueryUI",
jquerySlider: "../assets/js/libs/slider",
jqueryMouseWheel: "../assets/js/libs/jquery.mousewheel",
jquerySelectBox: "../assets/js/libs/selectBox",
jqueryMouse: "../assets/js/libs/mouse",
bookReader: "../assets/js/libs/newReader",
// Shim Plugin
use: "../assets/js/plugins/use"
},
use: {
backbone: {
deps: ["use!underscore", "jquery"],
attach: "Backbone"
},
underscore: {
attach: "_"
},
jqueryUI: {
deps: ["jquery"]
},
jquerySlider: {
deps: ["jquery", "jqueryMouse"]
},
jquerySelectBox: {
deps: ["jquery"]
},
jqueryMouse: {
deps: ["jquery", "jqueryUI"]
},
jqueryMouseWheel: {
deps: ["jquery", "jqueryUI"]
},
bookReader: {
deps: ["jquery", "jqueryUI", "jqueryMouse", "jquerySlider", "jqueryMouseWheel", "jquerySelectBox"],
attach: "Reader"
}
}
});
The problem is that scripts start load simultaneously, and because of that there are unmet dependencies, often there are these two errors
Uncaught TypeError: Object function (a, b) {return new e.fn.init (a, b, h)} has no method 'widget': 4444/assets/js/libs/mouse.js: 15
Uncaught TypeError: Cannot read property 'mouse' of undefined: 4444/assets/js/libs/slider.js: 20
Once the files are in the cache, the problem no longer occurs.
So, my question. How do I specify that the script must loaded consistently?
It is possible to build scripts that wrap them into one file. But this option is not very desirable
Thank you!
Have a look at this AMD loader plugin called STEP, it allows you to load scripts in sequential order.
https://github.com/requirejs/step