i'm trying to use almond.js in grunt to combine my files into on .js and uglify it.
My configuration in grunt is like this:
requirejs: {
compile: {
options: {
baseURL: "www/js/lib",
mainConfigFile: 'www/js/main.js',
name: '../../../node_modules/almond/almond',
include: '../main',
out:'../target/app.min.js',
findNestedDependencies: true,
optimize: 'uglify',
}
}
},
my main.js is this:
require.config({
baseUrl: "js/lib",
paths: {
app: '../app',
tpl: '../tpl'
},
shim: {
'backbone': {
deps: ['underscore', 'jquery'],
exports: 'Backbone'
},
'underscore': {
exports: '_'
},
'backbone-indexeddb': {
deps: ['backbone', 'IndexedDBShim']
},
'IndexedDBShim': {
deps: ['backbone']
}
}
});
If i try to run grunt requirejs i get an error:
Error: Error: ERROR: module path does not exist: project/www/js/js/lib/../../../node_modules/almond/almond.js for module named: ../../../node_modules/almond/almond. Path is relative to: project
at /project/node_modules/grunt-contrib-requirejs/node_modules/requirejs/bin/r.js:25964:35
which i do not understand, where does the second /js/ in the path come from? It does not exist in my file structure, i have my project folder set up like this
project
gruntfile
node_modules
almond
almond.js
www
index.html
js
app
lib
main.js
Oh, i'm configuring the baseurl twice, shouldn't do that. If i remove the baseurl parameter in the gruntfile it works fine.
Related
I'm using requirejs in my web app, and have several 3rd party libraries(e.g. jquery, underscore), and my own js files.
Here is the "main.js" which will be loaded by requirejs:
require.config({
baseUrl: 'public/js',
paths: {
jquery: '../vendor/jquery/jquery',
underscore: '../vendor/underscore/underscore',
modernizr: '../vendor/modernizr/modernizr'
},
shim: {
underscore: {
exports: "_"
},
modernizr: {
exports: "Modernizr"
}
}
});
require(['app']);
And here is my grunt config:
requirejs: {
compileJs: {
options: {
baseUrl: "src/main/resources/public/js",
mainConfigFile: "src/main/resources/public/js/main.js",
dir: "src/main/resources/public/min/js",
optimize: "uglify2",
removeCombined: true,
generateSourceMaps: true,
modules: [
{
name: "main"
}
]
}
}
}
grunt.loadNpmTasks('grunt-contrib-requirejs');
When I run the task, it will generate a minified "main.js" which contains all my own code. But I also want it to contain the 3rd libraries(jquery, underscore, modernizr).
I tried again and again, but never succeed, nor find the reason. Why and how to include them?
I'm using requirejs with Grunt in my project. I could able to successfully perform the folder level optimization through grunt-requirejs tool as below.
requirejs : {
std: {
options: {
mainConfigFile: 'src/js/main.js',
appDir: "src",
baseUrl: "js",
dir: "dist",
modules: [
{
name: "main"
}
],
removeCombined: true,
wrap: true,
almond: true,
replaceRequireScript: [{
files: ['dist/index.html'],
module: 'main'
}]
}
}
}
All the js files are concatenated and minified in main.js and css files in style.css. How can I rename these files main.js and style.css into something like app.min.js and app.min.css. Can I able to accomplish this using r.js or I've to use some external plugin?
I'm using require JS.
I want to marge two files into one.
I'm using for that require js plugin for grunt.
First file is raty jquery script.
Second is my own file like this:
define('userGlosowanie', ['jquery', 'raty'], function ($) {
'use strict';
return {
init: function () {
}
}
});
And here is my grunt script:
requirejs: {
userGlosowanie: {
options: {
baseUrl: "js/libs",
paths: {
userGlosowanie: "../dev/uzytkownik-glosowanie",
raty: "raty/jquery.raty",
},
name: "userGlosowanie",
out: "js/build/uzytkownik.min.js",
preserveLicenseComments: false,
}
},
},
Problem is that I've got error:
Running "requirejs:user" (requirejs) task
>> Error: ENOENT, no such file or directory
>> 'D:\strony\www\polskieszlaki\js\libs\jquery.js'
>> In module tree:
>> user
Warning: RequireJS failed. Use --force to continue.
my jquery file is in separate file and I don't want to include it in compiled file. How to do it?
If you don't want to include jquery in build file just mark it as empty: in path config.
options: {
paths: {
userGlosowanie: "../dev/uzytkownik-glosowanie",
raty: "raty/jquery.raty",
jquery: "empty:"
}
}
You can exclude a particular module/file from getting included in the combined/optimized file using the exclude option
In your case it will look like -
requirejs: {
userGlosowanie: {
options: {
baseUrl: "js/libs",
paths: {
userGlosowanie: "../dev/uzytkownik-glosowanie",
raty: "raty/jquery.raty",
},
out: "js/build/uzytkownik.min.js",
name: "userGlosowanie",
exclude: "jquery"
preserveLicenseComments: false,
}
}
}
With modules and dir(output dir) option, you may not be able to set the output file name, but the optmized file with same name as the module will be placed in the directory set by option dir
requirejs: {
userGlosowanie: {
options: {
baseUrl: "js/libs",
paths: {
userGlosowanie: "../dev/uzytkownik-glosowanie",
raty: "raty/jquery.raty",
},
dir: "../public",
modules : [{
name: "userGlosowanie",
exclude: "jquery"
}],
preserveLicenseComments: false,
}
}
}
Sample usage/explanation is here
My Gruntfile.js file:
module.exports = function (grunt) {
grunt.initConfig({
pkg : grunt.file.readJSON('package.json'),
requirejs : {
compile: {
options: {
baseUrl: "public_html/js",
mainConfigFile: "public_html/js/config.js",
out: "public_html/app.min.js"
}
}
}
});
grunt.loadNpmTasks('grunt-contrib-requirejs');
grunt.registerTask('default', ['requirejs']);
};
My config.js file:
'use strict';
require.config({
deps: ['main'],
paths: {
jquery: 'vendor/jquery',
jquery_tokeninput: 'vendor/jquery.tokeninput',
underscore: 'vendor/underscore',
backbone: 'vendor/backbone'
},
shim: {
jquery: [],
jquery_tokeninput: {
deps: ['jquery']
},
backbone: {
deps: ['vendor/underscore', 'vendor/jquery', 'vendor/jquery.tokeninput'],
exports: 'Backbone'
},
underscore: {
exports: '_'
}
}
});
require(['views/app'], function(AppView) {
new AppView;
});
When I run grunt requirejs it errors with:
Running "requirejs:compile" (requirejs) task
[Error: Error: Missing either a "name", "include" or "modules" option at function.build.createConfig (D:\project\node_modules\grunt-contrib-requirejs\node_modules\requirejs\bin\r.js:24829:19)]
First time using gruntjs and requirejs so not sure why I'm getting the error.
Updated the grunt.js file to use name:
module.exports = function (grunt) {
grunt.initConfig({
pkg : grunt.file.readJSON('package.json'),
requirejs : {
compile: {
options: {
name: "views/app",
baseUrl: "public_html/js",
mainConfigFile: "public_html/js/config.js",
out: "public_html/app.min.js"
}
}
}
});
grunt.loadNpmTasks('grunt-contrib-requirejs');
grunt.registerTask('default', ['requirejs']);
};
and removed the following from the config.js:
require(['views/app'], function(AppView) {
new AppView;
});
I have been working with Require.JS and SignalR over the past few days and I noticed that when I load my site sometimes the SignalR/Hubs seems to get loaded before jquery despite my require.js configuration appearing to be correct.
Here's my config:
require.config({
paths: {
jQuery: 'libs/jquery/jquery',
Underscore: 'libs/underscore/underscore',
Backbone: 'libs/backbone/backbone',
Marionette: 'libs/backbone/backbone.marionette'
}
});
require([
'app',
'order!libs/jquery/jquery-min',
'order!libs/jQueryUI/jquery-ui-1.8.11.min',
'order!libs/jqGrid/grid.locale-en',
'order!libs/jqGrid/jquery.jqGrid.min',
'order!libs/underscore/underscore-min',
'order!libs/backbone/backbone-min',
'order!Marionette',
'order!libs/jquery.signalR-0.5.1',
'order!noext!signalr/hubs'
], function (app) {
app.initialize();
});
When this fails I get an error on line 16 of the hubs file. It says uncaught TypeError: Cannot read property 'signalR' of undefined.
Upgraded to V2 and modified my config.
var fRequire = require.config({
paths: {
jQuery: 'libs/jquery/jquery',
Underscore: 'libs/underscore/underscore',
Backbone: 'libs/backbone/backbone',
Marionette: 'libs/backbone/backbone.marionette',
sigr: 'libs/jquery.signalR-0.5.1'
},
shims: {
"libs/jquery.signalR-0.5.1": {
deps: ["jQuery"]
},
"libs/jqGrid/jquery.jqGrid.min": {
deps: ["jQuery"]
},
"libs/jquery/jquery-ui-1.8.19.min": {
deps: ["jQuery"]
},
"libs/jqGrid/grid.locale-en": {
deps: ["jQuery"]
},
"noext!signalr/hubs": {
deps: ["sigr"]
}
}
});
fRequire([
'app'
], function (app) {
app.initialize();
});
Now require is looking in the wrong locations for jquery, underscore, etc...despite my telling it specifically where to look. Perhaps this has something to do with me following an old tutorial when I configured require using v1.
http://backbonetutorials.com/organizing-backbone-using-modules/
FINAL UPDATE:
Here is my working config. Hopefully it'll help any newbies like myself get passed this issue.
require.config({
baseUrl: '/js',
paths: {
"jquery": 'libs/jquery/jquery-min',
"underscore": 'libs/underscore/underscore-min',
"backbone": 'libs/backbone/backbone-min',
"marionette": 'libs/backbone/backbone.marionette',
"sigr": 'libs/jquery.signalR-0.5.1'
},
shims: {
"backbone": {
deps: ["underscore", "jquery"],
exports: "Backbone"
},
"underscore": {
deps: ["jquery"]
},
"marionette": {
deps: ["backbone", "jquery"]
},
"sigr": {
deps: ["jquery"]
},
"libs/jqGrid/jquery.jqGrid.min": {
deps: ["jquery"]
},
"libs/jquery/jquery-ui-1.8.19.min": {
deps: ["jquery"]
},
"libs/jqGrid/grid.locale-en": {
deps: ["jquery"]
},
"noext!signalr/hubs": {
deps: ["sigr"]
}
}
});
// for future ref, I loaded jquery here because app.js references sigr which requires it.
// without enabling it before the module is loaded sigr would complain jquery was not enabled.
require([
'libs/domReady',
'app',
'jquery'
], function (domReady, app, $) {
domReady(function () {
app.initialize();
});
});
It was mandatory that I load jquery in the function(domready, app, $). Failing to do so will result in signalr reporting that it cannot be found.
If you're using requirejs 2.x you can use the "shims" config attribute. There you can specify the dependencies between files that are not AMD compliant, like jquery, jqueryui, etc..
Using your configuration as example:
require.config({
paths: {
jQuery: 'libs/jquery/jquery',
Underscore: 'libs/underscore/underscore',
Backbone: 'libs/backbone/backbone',
Marionette: 'libs/backbone/backbone.marionette'
},
// specify depedencies
shim: {
"libs/jquery.signalR-0.5.1" : {
deps: ["jQuery"]
},
"libs/jqGrid/jquery.jqGrid.min" : {
deps: ["jQuery"]
}
}
});
Also, configure the dependencies in "shims" eliminates the use of the "order!" plugin.
Tip: Use "paths" to set a friendly name for apis that your system use, so when a new version of that api is released you can just change in "paths" and you're done.
Just to follow up on the answer provided and why you are still having to pre-include jQuery... the config setting for require is "shim", not "shims". Require won't recognize and preload the dependencies specified without the correct spelling of the config setting. I got hammered by this recently and posted about it: http://mikeycooper.blogspot.com/2013/01/requirejs-20-dependencies-seemingly.html