Using require-js and grunt.js - error missing either a "name", "include" or"modules" option - requirejs

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;
});

Related

"define is not defined" - jasmine-node requirejs in Nodejs

I am trying to run jasmine tests on files that are using requirejs. I have a require.config.js file which provides all the configuration for the requirejs and I am passing to this command to run the jasmine test.
jasmine-node --runWithRequireJs --captureExceptions --requireJsSetup spec/require.config.js spec/modules/test.spec.js
My require.config.js looks like this -
var require = {
baseUrl: "../app",
urlArgs: 'cb=' + Math.random(),
paths: {
jquery: '../assets/js/libs/jquery-1.8.2',
underscore: '../assets/js/libs/underscore-min',
backbone: '../assets/js/libs/backbone-min',
jasmine: '../spec/lib/jasmine',
jasminehtml: '../spec/lib/jasmine-html',
boot: '../spec/lib/boot',
spec: '../spec/',
handlebars : '../assets/js/libs/handlebars-1.0.0.beta.6',
// plugins
jqueryui : '../assets/js/plugins/jquery-ui',
jqgrid : '../assets/js/plugins/jqGrid',
jqgridlocale : '../assets/js/plugins/i18n/grid.locale-en',
jqform : '../assets/js/plugins/jquery.form',
jqfiledownload : '../assets/js/plugins/jquery.fileDownload',
migrate: '../assets/js/plugins/jquery-migrate',
text : '../assets/js/plugins/text'
},
shim: {
'underscore': {
exports: "_"
},
'backbone': {
deps: ['underscore', 'jquery'],
exports: 'Backbone'
},
'jasmine': {
exports: 'jasmine'
},
'jasminehtml': {
deps: ['jasmine'],
exports: 'jasmine'
},
'boot': {
deps: ['jasmine', 'jasminehtml'],
exports: 'window.jasmineRequire'
},
'handlebars' : {
exports : 'Handlebars'
},
'text' : {
exports : 'text'
},
'jqueryui' : [ 'jquery' ],
'jqgrid' : [ 'jquery' ],
'jqgridlocale' : [ 'jquery' ],
'jqform':['jquery'],
'jqfiledownload':['jquery'],
'migrate':['jquery']
}};
And my test.spec.js file looks like this -
define(['modules/models/RouteModel','modules/models/RestWebService'], function(RouteModel,RestWebService){
describe("RouteModel :", function(){
it("should create an test instance", function(){
expect(RouteModel).not.toBe(null);
});
});
After running the command I am getting in the console
ReferenceError: define is not defined at C:\Users\TestProject\spec\modules\test.spec.js:1:1
What can be the problem in this case? Is this a path configuration issue?
P.S. - I want complete console output of jasmine, not browser output in jasmine.
Error is pretty much straight forward you need to load requirejs before calling it's function. you can find more clear idea from below link:
https://stackoverflow.com/a/29317859/1607130

Grunt not compiling sass

I am working with an old project which uses grunt as a build tool, I had to install newer version of node-sass since to be able to rebuild node-sass. Now when I am trying to make changes in sass files, and run grunt I don't that anything has compiled. This is my Gruntfile.js:
module.exports = function(grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
sass: {
dist: {
options: {
outputStyle: 'compressed',
sourceComments: 'none'
},
files: {
'css/app.css': 'scss/app.scss'
}
},
dev: {
options: {
outputStyle: 'expanded',
sourceComments: 'map',
sourceMap: 'app.css.map'
},
files: {
'css/app.css': 'scss/app.scss'
}
}
},
watch: {
grunt: { files: ['Gruntfile.js'] },
sass: {
files: 'assets/scss/**/*.scss',
tasks: ['sass:dev']
},
css: {
files: ['assets/css/*.css'],
tasks: [],
options: {
livereload: true
}
}
}
});
grunt.loadNpmTasks('grunt-sass');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.registerTask('build', ['sass:dist']);
grunt.registerTask('default', ['sass:dev', 'watch']);
}
How can I fix this?
Looks like your path is wrong in your SASS task.
Replace:
'scss/app.scss'
with
'assets/scss/app.scss'

Why my r.js won't include the 3rd parties js files when generating one? How to include them?

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?

Requirejs Gruntfile cannot locate almond

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.

Require.js + SignalR

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

Resources