The directory which i am running "grunt" on has node_module folder which contains all the modules including : Bootstrap, Browserify and others.
When i run "grunt"
I get :
Running "jshint:files" (jshint) task
>> 12 files lint free.
Running "copy:build" (copy) task
Created 1 directories, copied 17 files
Running "concat:vendorcss" (concat) task
File "build-css/vendor.less" created.
Running "less:libremap" (less) task
File build/css/libremap.css created.
Running "jst:compile" (jst) task
File "build-jst/templates.js" created.
Running "browserify:vendor" (browserify) task
>> Bundled build/vendor/vendor.js
Running "browserify:libremap" (browserify) task
Warning: Cannot find module 'bootstrap' Use --force to continue.
It stops at browserify and says cannot find module 'bootstrap' before this scenario, it said there wasn't "jquery" which i installed with "npm install jquery" after restarting "grunt" , a few other missing modules were also reported subsequently which i installed.However with bootstrap, even after installing and making sure it exist in node_modules directory, i still have this error.
Any help will be appreciated.
I am new to grunt, npm, nodejs etc. I am just trying to setup a
software.
Task Code Appended.
There are two Browserify tasks, i assume the first complete successfully from the output above ?
browserify: {
vendor: {
src: [],
dest: 'build/vendor/vendor.js',
options: {
shim: {
jquery: {
path: 'bower_components/jquery/jquery.min.js',
exports: '$'
},
bootstrap: {
path: 'bower_components/bootstrap/dist/js/bootstrap.min.js',
exports: 'bootstrap',
depends: {
'jquery': 'jQuery'
}
},
leaflet: {
path: 'vendor/leaflet/leaflet.js',
exports: 'L'
},
'leaflet-markercluster': {
path: 'vendor/leaflet.markercluster/leaflet.markercluster.js',
exports: 'L',
depends: {
'leaflet': 'L'
}
}
}
}
},
// browserify libremap.js -> bundle.js
libremap: {
dest: 'build/js/libremap.js',
src: [ 'src/js/libremap.js' ],
options: {
debug: grunt.option('debug'),
external: ['jquery', 'bootstrap', 'leaflet', 'leaflet-markercluster'],
shim: {
templates: {
path: 'build-jst/templates.js',
exports: 'JST',
depends: {
'underscore': '_'
}
}
}
Try this, it should help:
`bootstrap: {
path: 'bower_components/bootstrap/dist/js/bootstrap.min.js',
exports: 'bootstrap',
depends: {
'jquery': '$'
}
},`
The piont is you export $ not jQuery.
Try:
npm -g install bower
bower install bootstrap
Related
I installed a AMD module called leaflet and successfully using it as "L".
Next I need a plugin called leaflet.draw but I get confused about the dependencies. Consider the following code:
requirejs.config({
baseUrl: 'bower_components',
paths: {
leaflet: 'leaflet/dist/leaflet-src',
leafletdraw: 'leaflet-draw/dist/leaflet.draw-src'
...
requirejs(["leaflet", "leafletdraw"], function(L, leafletdraw) {
var map = new L.Map('map');
...
This gives a referenceError: L is not defined at Leaflet.draw.js:4. So I guess it needs the leaflet (L) as a dependency, right? I then tried to add it in the shim config:
shim: {
leafletdraw: {
deps: 'leaflet'
}
}
This results in a "Invalid require call". So my question is: How do I properly require a plugin with subdependencies?
The modules are installed with "bower install leaflet" and "bower
install leaflet-draw" respectivily. But im not sure if leaflet-draw
is AMD enabled. Why isnt that stated in repos docs? Can I assume it
is enabled by default?
This is what I try to achive:
http://codepen.io/osmbuildings/pen/LVJzWw, but with requirejs.
Solution: shim leaflet itself, and let it export 'L'. Then putting the deps in plugins will work. My full config:
requirejs.config({
baseUrl: 'bower_components',
paths: {
jquery: 'jquery/dist/jquery.min',
leaflet: 'http://cdn.leafletjs.com/leaflet-0.7.3/leaflet',
'leaflet-draw': 'http://cdn.osmbuildings.org/Leaflet.draw/0.2.0/leaflet.draw',
OSMBuildings: ['http://cdn.osmbuildings.org/OSMBuildings-Leaflet']
},
shim: {
leaflet: {
exports: 'L'
},
'leaflet-draw': {
deps: ['leaflet']
},
OSMBuildings: {
deps: ['leaflet'],
exports: 'OSMBuildings'
}
}
});
requirejs(["jquery", "leaflet", "leaflet-draw", "OSMBuildings"], function($, L, dummy, OSMBuildings) {
var map = new L.Map('map');
After migrating to El Capitan, it seems users are experiencing an issue with grunt installations, possibly related to the rootless changes of El Capitan. In particular, running the grunt --force command results in EPERM errors. The workflow is as follows:
Assuming npm has been installed, navigate to the grunt directory with package.json and gruntfile.js and invoke grunt:
grunt --force
Example Gruntfile.js file contents:
module.exports = function(grunt) {
// All configuration goes here
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
concat: {
// Configuration for concatenating files goes here.
dist: {
src: [
'../js/libs/owl.carousel.js',
'../js/libs/jquery.actual.js',
'../js/libs/chosen.jquery.js',
'../js/libs/jquery.parallax.js',
'../js/src/common.js'
],
dest: '../js/pro/global.js',
},
},
uglify: {
build: {
src: '../js/pro/global.js',
dest: '../js/pro/global.min.js',
},
},
imagemin: {
dynamic: {
files: [{
expand: true,
cwd: '../img/src/',
src: ['**/*.{png,jpg,gif}'],
dest: '../img/pro/'
}]
}
},
compass: {
dev: {
options: {
sassDir: '../sass',
cssDir: '../css',
fontsDir: '../fonts',
imagesDir: '../img/',
images: '../img/',
javascriptsDir: '../js/pro',
//environment: 'development',
outputStyle: 'compressed',
relativeAssets: true,
httpPath: '.',
}
},
},
watch: {
scripts: {
files: ['../js/**/**.js'],
tasks: ['concat', 'uglify'],
options: {
spawn: true,
},
},
images: {
files: ['../img/src/**.{png,jpg,gif}'],
tasks: ['imagemin'],
options: {
spawn: true,
}
},
compass: {
files: ['../**/*.{scss,sass}'],
tasks: ['compass:dev'],
}
},
svgstore: {
defaults: {
options: {
prefix : 'icon-',
},
files: {
'../img/svg-defs.svg': ['../img/svg/*.svg']
}
}
},
});
// Where we tell Grunt we plan to use this plug-in.
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-imagemin');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-compass');
grunt.loadNpmTasks('grunt-svgstore');
// Where we tell Grunt what to do when we type "grunt" into the terminal.
grunt.registerTask('default', ['concat', 'uglify', /*'imagemin',*/ 'compass', 'svgstore', 'watch']);
};
Example package.json file contents:
{
"name": "Call Me Maybe",
"version": "0.2.0",
"devDependencies": {
"grunt": "^0.4.5",
"grunt-contrib-compass": "^1.0.4",
"grunt-contrib-concat": "^0.5.1",
"grunt-contrib-imagemin": "^0.9.4",
"grunt-contrib-sass": "^0.9.2",
"grunt-contrib-uglify": "^0.9.2",
"grunt-contrib-watch": "^0.6.1",
"grunt-svgstore": "^0.5.0"
}
}
The resulting EPERM errors are as follows:
Running "concat:dist" (concat) task
Warning: Unable to write "../js/pro/global.js" file (Error code: EPERM). Used --force, continuing.
Running "uglify:build" (uglify) task
Warning: Unable to write "../js/pro/global.min.js" file (Error code: EPERM). Used --force, continuing.
Running "compass:dev" (compass) task
Warning: Command failed: /bin/sh: compass: command not found. Used --force, continuing.
Warning: You need to have Ruby and Compass installed and in your system PATH for this task to work. More info: https://github.com/gruntjs/grunt-contrib-compass Used --force, continuing.
Running "svgstore:defaults" (svgstore) task
Warning: Unable to write "../img/svg-defs.svg" file (Error code: EPERM). Used --force, continuing.
Running "watch" task
Waiting...
Interestingly, Ruby and Compass are also installed, so it does align with the theory of the rootless unable to write to folders issues, but how can the dependency cores be moved elsewhere (i.e. /usr/local/bin) so this isn't an issue?
During the El Capitan Betas, some users suggested enabling root via terminal - though this seemingly no longer works, as the error persists and /usr/bin folder still doesn't allow for permission changes.
For those running into the same issue, I had to eliminate the use of binaries installed to the path: /usr/bin, and reinstall after updating the path /usr/local/bin. Ruby tended to be the primary culprit. Because I was struggling with locating all my ruby installs, I ended up installing rbenv to manage my ruby versions.
The following terminal commands may be helpful in identifying your problematic paths:
which ruby
gem environment
gem uninstall [insert gem name here]
[google how to set your paths to /usr/local/bin... (will be in a hidden file)]
gem install [insert gem name here]
Installing non-system software on /usr/bin is a bad move, and is now prohibited in El Capitan, and with good reason.
I am not familiar with grunt, but if you can get to use /usr/local/bin instead then probably everything works.
I'm running Lion 10.9.2 with nodejs v0.10.26
I want to setup an automated compilation on sass files and a live reload with grunt, nothing complicated but...
When running grunt watch I get the following error
(node) warning: Recursive process.nextTick detected. This will break in the next version of node. Please use setImmediate for recursive deferral.
util.js:35
var str = String(f).replace(formatRegExp, function(x) {
^
RangeError: Maximum call stack size exceeded
here is the Gruntfile.js
module.exports = function(grunt) {
// Project configuration.
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
sass: {
dist: {
files: {
'assets/css/styles.css': 'assets/sass/styles.scss'
}
}
},
watch: {
all: {
files: 'index.html', // Change this if you are not watching index.html
options: {
livereload: true // Set livereload to trigger a reload upon change
}
},
css: {
files: [ 'assets/sass/**/*.scss' ],
tasks: [ 'sass' ],
options: {
spawn: false
}
},
options: {
livereload: true // Set livereload to trigger a reload upon change
}
}
});
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-sass');
grunt.registerTask('watch', [ 'watch']);
grunt.registerTask('default', [ 'sass', 'watch' ]);
};
and here is the package.json
{
"name": "application",
"version": "0.0.1",
"private": true,
"devDependencies": {
"grunt": "~0.4.2",
"grunt-contrib-watch": "~0.5.3",
"grunt-contrib-sass": "~0.7.3"
}
}
I finally figured out a similar problem I was having with SASS. I was using
grunt.registerTask('sass', [ 'sass']);
The trick was that Grunt doesn't seem to like the repetition in names. When I switch to
grunt.registerTask('styles', [ 'sass']);
Everything worked as it should.
Just had this problem. Resolved it by removing grunt.registerTask('watch', [ 'watch']);
I just fixed a similar error "Recursive process.nextTick detected" causing by command: grunt server
The solution? Use sudo grunt serve instead
you could try this one, it fixed the issue for me, working with Yeoman 1.3.3 and Ubuntu 14.04 Grunt watch error - Waiting...Fatal error: watch ENOSPC
I was getting error in even trying to install grunt. Running npm dedupe solved my problem as answered here: Grunt watch error - Waiting...Fatal error: watch ENOSPC
Alternative solution: check your watch for an empty file argument.
Here's an excerpt of my gruntfile
watch: {
all: {
options:{
livereload: true
},
files: ['src/scss/*.scss', 'src/foo.html',, 'src/bar.html'],
tasks: ['default']
}
}
In my case, I could recreate the original poster's error on demand with the empty argument above.
I am using the yeoman webapp generator with requirejs and I have installed canjs using bower.
canjs has a dir structure like the following
app/bower_components/canjs/amd/can.js
app/bower_components/canjs/amd/can/control.js
app/bower_components/canjs/amd/can/control/route.js
etc..
Inside the can.js file is the following.
define(["can/util/library", "can/control/route", "can/model", "can/view/ejs", "can/route"], function(can) {
return can;
});
All of the dependancy files (control.js, route.js) have their dependancies listed inside define() functions.
What I want to do is customise the canjs build and replace "can/view/ejs" with "can/view/mustache". I can get it to work by changing the reference to ejs within the can.js file but that means I'm editing a vendor file inside of bower_components dir.
I have tried to create a mycan.js build within my scripts dir which looks the same as the can.js file (except for the mustache dependency change) in bower_components and then I change the config to look like this.
require.config({
paths: {
jquery: '../bower_components/jquery/jquery',
can: '../bower_components/canjs/amd/can',
etc..
Then I require the mycan module in any of my files that need it.
This will work properly if I comment out the code inside bower_components/canjs/amd/can.js but if I don't comment the file out, it will require both builds (including the can/view/ejs file I didn't want).
In the require docs http://requirejs.org/docs/api.html under usage 1.1, it has an example of
• www/
• index.html
• js/
• app/
• sub.js
• lib/
• jquery.js
• canvas.js
• app.js
and in app.js:
requirejs.config({
//By default load any module IDs from js/lib
baseUrl: 'js/lib',
//except, if the module ID starts with "app",
//load it from the js/app directory. paths
//config is relative to the baseUrl, and
//never includes a ".js" extension since
//the paths config could be for a directory.
paths: {
app: '../app'
}
});
// Start the main app logic.
requirejs(['jquery', 'canvas', 'app/sub'],
function ($, canvas, sub) {
//jQuery, canvas and the app/sub module are all
//loaded and can be used here now.
});
Here they are using a path which is a directory, not a file. The sub module is getting found because it matches app/sub with the app in the paths config.
If I define my own version of can within the main.js file which contains the require.config then it seems to work but then when I go to build the app, it says
tim#machine:~/server/javascript/yoman:ruby-1.9.3: (master)$ grunt
Running "jshint:all" (jshint) task
Linting app/scripts/main.js ...ERROR
[L54:C1] W117: 'define' is not defined.
define('can', [
Warning: Task "jshint:all" failed. Use --force to continue.
Aborted due to warnings.
Elapsed time
default 567ms
jshint:all 124ms
Total 691ms
Whats the correct way for me to make a custom build of vendor libraries within bower_components?
Here is my main.js. This version works but fails when linting.
require.config({
paths: {
jquery: '../bower_components/jquery/jquery',
bootstrapAffix: '../bower_components/sass-bootstrap/js/affix',
bootstrapAlert: '../bower_components/sass-bootstrap/js/alert',
bootstrapButton: '../bower_components/sass-bootstrap/js/button',
bootstrapCarousel: '../bower_components/sass-bootstrap/js/carousel',
bootstrapCollapse: '../bower_components/sass-bootstrap/js/collapse',
bootstrapDropdown: '../bower_components/sass-bootstrap/js/dropdown',
bootstrapPopover: '../bower_components/sass-bootstrap/js/popover',
bootstrapScrollspy: '../bower_components/sass-bootstrap/js/scrollspy',
bootstrapTab: '../bower_components/sass-bootstrap/js/tab',
bootstrapTooltip: '../bower_components/sass-bootstrap/js/tooltip',
bootstrapTransition: '../bower_components/sass-bootstrap/js/transition',
can: '../bower_components/canjs/amd/can'
},
shim: {
bootstrapAffix: {
deps: ['jquery']
},
bootstrapAlert: {
deps: ['jquery']
},
bootstrapButton: {
deps: ['jquery']
},
bootstrapCarousel: {
deps: ['jquery']
},
bootstrapCollapse: {
deps: ['jquery']
},
bootstrapDropdown: {
deps: ['jquery']
},
bootstrapPopover: {
deps: ['jquery']
},
bootstrapScrollspy: {
deps: ['jquery']
},
bootstrapTab: {
deps: ['jquery']
},
bootstrapTooltip: {
deps: ['jquery']
},
bootstrapTransition: {
deps: ['jquery']
}
}
});
define('can', [
'can/util/library',
'can/control/route',
'can/construct/proxy',
'can/model',
'can/view/mustache',
'can/route'
], function(can) {
'use strict';
return can;
});
require(['app', 'jquery'], function (app, $) {
'use strict';
// use app here
console.log(app);
console.log('Running jQuery %s', $().jquery);
});
JSHint is complaining because require is in an external file. All require's functions are defined before your script loads, but because they're not inside the script JSHint thinks they're custom code which you forgot to define. This is an easy fix; add a predef config so that define, require are already passed to JSHint before it starts linting your files.
jshint: {
options: {
// all of your other options...
predef: ['define', 'require']
},
files : ['app/scripts/main.js']
},
I'm using Optimizer for the first time and I am running in some issues or questions.
I'm trying to optimize a main file and it puts, like I've expected, the jQuery, Backbone and Require modules ( and uses then across the whole navigation). But let's say I have a jQuery Plugin that I use on several views. I've tried to add it in the main file using the "include" option on the build.js file. It adds it ( e.g jQuery Slides ) but as I have a view with define("jquery-slides") ( again, an example ) the browser loads the file of the plugin again. Even if it is on the main built file.
Is this suppose to happen? Can I fix this?
Thanks.
Here is some code. Hope it helps =)
build.js
{
baseUrl: "javascripts/",
appDir: "..",
dir: "dist",
name: "main-site",
include: ['libs/requirejs/require', jquery-slides'],
insertRequire: ['main-site'],
paths: {
"main-site": 'main-site',
'jquery': 'libs/jquery/jquery',
'jquery-slides': 'libs/jquery/plugins/slides.min.jquery'
}
}
main-site.js
require.config({
baseUrl: "/javascripts/",
paths: {
'jquery': 'libs/jquery/jquery',
'underscore': 'libs/underscore/underscore',
'bootstrap': 'libs/bootstrap/bootstrap.min',
'datepicker': 'libs/bootstrap/plugins/bootstrap-datepicker',
'backbone': 'libs/backbone/backbone.max',
'backbone-paginator': 'libs/backbone/plugins/backbone.paginator',
'backbone-validation': 'libs/backbone/plugins/backbone.validation',
'text': 'libs/requirejs/text',
'templates': '/templates/site',
'views': 'views/site',
'jquery-cookie': 'libs/jquery/plugins/jquery.cookie',
'jquery-raty': 'libs/jquery/plugins/jquery.raty.min',
'jquery-slides': 'libs/jquery/plugins/slides.min.jquery'
},
shim: {
'backbone-paginator': ['backbone'],
'bootstrap': ['jquery'],
'datepicker': ['bootstrap'],
'jquery-cookies': ['jquery'],
'jquery-raty': ['jquery'],
'jquery-slides': ['jquery'],
'backbone-validation': ['backbone']
}
});
require([
'app-site'
], function(App) {
$(function(){
App.initialize();
});
});
Instead of using include I recommend you to declare the modules you want to build. In this way requirejs will package the module and all its dependencies in the optimized bundle.
{
baseUrl: "javascripts/",
appDir: "..",
dir: "dist",
paths: {
"main-site": 'main-site',
'jquery': 'libs/jquery/jquery',
'jquery-slides': 'libs/jquery/plugins/slides.min.jquery'
},
modules : [
{
name : 'main-site',
}
]
}
Further considerations:
If you have jquery-slides included as a dependency in any of your modules define(['jquery-slides'], function() {... } you don't need to use the include directive since all the dependencies of that module will be included in the optimized file
See the documentation of the modules property in this link
https://github.com/jrburke/r.js/blob/master/build/example.build.js#L330
Use the property mainConfigFile to avoid duplications https://github.com/jrburke/r.js/blob/master/build/example.build.js#L35
Good luck and I hope this helps you