grunt tasks hanging and not responding - node.js

this is the first time I have this problem. I always use pretty much the same gruntfile configurations but at some point, my tasks are just hanging. more precisely they hang when triggered by grunt-contrib-watch. here's my config
watch: {
css: {
files: ['source/css/**/*.scss'],
tasks: ['sass:dist','sass:styleguide_specific_styles', 'postcss', 'shell:patternlab_css'],
options: {
spawn: false,
}
},
styleguide_specific_styles: {
files: ['public/styleguide/css/styleguide-specific.scss'],
tasks: ['sass:styleguide_specific_styles','sass:dist','shell:patternlab_css'],
options: {
spawn: false
}
},
}, //end of watch task
and my sass task
sass: {
styleguide_specific_styles: {
options: {
style: 'nested',
compass: 'true'
},
files: {
'public/styleguide/css/styleguide-specific.css': 'public/styleguide/css/styleguide-specific.scss'
}
},
dist: {
options: {
style: 'nested',
compass: 'true'
},
files: {
'source/css/styleguide.css': 'source/css/styleguide.scss'
}
}
}, //end of sass
When i edit and save an .scss file, i get stuck with this:
But if i stop grunt and just type grunt sass the compilation is successful.
I've tried removing compass, freshly reinstalling all dependencies copying the project elsewhere, updating grunt-contrib-sass , updating the sass gem, changing file permissions, updating nodejs but nothing seems to work. I'm on windows using this gruntfile config on a patternlab-php project.
The same configuration works on dozens of other projects, but not here.
And this is not the only task giving me this problem, all the others do the same.

Related

Warning: Task "browserfy" not found

I want to use browserfy to transform es6 files to es5. But everytime the watch-task is executed I get the error:
Warning: Task "browserfy" not found. Use --force to continue.
I automate the task with the following gruntfile (simplified):
grunt.initConfig({
browserfy: {
dist: {
options: {
transform: [
["babelify", {
loose: "all"
}]
]
},
files: {
"dist/module.js": ["lib/main.js"]
}
}
},
watch: {
lib_test: {
files: '<%= jshint.lib_test.src %>',
tasks: ['jshint:lib_test', 'browserfy'/*, 'qunit'*/]
}
}});
grunt.loadNpmTasks("grunt-browserify");
grunt.loadNpmTasks('grunt-contrib-watch');
I also used the command
npm install grunt-browserify --save-dev
Solved the problem. I had a typo. It is "browserify.

grunt error: cannot find module 'load-grunt-tasks'

When I am using grunt command it is showing me following error:
$ grunt
Loading "Gruntfile.js" tasks...ERROR
>> Error: Cannot find module 'load-grunt-tasks'
Warning: Task "default" not found. Use --force to continue.
Aborted due to warnings.
Execution Time (2015-02-07 18:05:42 UTC)
loading tasks 339ms ███████████████████████████████████████████████ 99%
Total 344ms
I already tried - npm install, npm update commands. It would be great if someone can help me with this. Thanks!
Addding Content of Gruntfile.js
'use strict';
var paths = {
js: ['*.js', 'test/**/*.js', '!test/coverage/**', '!bower_components/**', 'packages/**/*.js', '!packages/**/node_modules/**', '!packages/contrib/**/*.js', '!packages/contrib/**/node_modules/**'],
html: ['packages/**/public/**/views/**', 'packages/**/server/views/**'],
css: ['!bower_components/**', 'packages/**/public/**/css/*.css', '!packages/contrib/**/public/**/css/*.css']
};
module.exports = function(grunt) {
if (process.env.NODE_ENV !== 'production') {
require('time-grunt')(grunt);
}
// Project Configuration
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
assets: grunt.file.readJSON('config/assets.json'),
clean: ['bower_components/build'],
watch: {
js: {
files: paths.js,
tasks: ['jshint'],
options: {
livereload: true
}
},
html: {
files: paths.html,
options: {
livereload: true,
interval: 500
}
},
css: {
files: paths.css,
tasks: ['csslint'],
options: {
livereload: true
}
}
},
jshint: {
all: {
src: paths.js,
options: {
jshintrc: true
}
}
},
uglify: {
core: {
options: {
mangle: false
},
files: '<%= assets.core.js %>'
}
},
csslint: {
options: {
csslintrc: '.csslintrc'
},
src: paths.css
},
cssmin: {
core: {
files: '<%= assets.core.css %>'
}
},
nodemon: {
dev: {
script: 'server.js',
options: {
args: [],
ignore: ['node_modules/**'],
ext: 'js,html',
nodeArgs: ['--debug'],
delayTime: 1,
cwd: __dirname
}
}
},
concurrent: {
tasks: ['nodemon', 'watch'],
options: {
logConcurrentOutput: true
}
},
mochaTest: {
options: {
reporter: 'spec',
require: [
'server.js',
function() {
require('meanio/lib/core_modules/module/util').preload(__dirname + '/packages/**/server', 'model');
}
]
},
src: ['packages/**/server/tests/**/*.js']
},
env: {
test: {
NODE_ENV: 'test'
}
},
karma: {
unit: {
configFile: 'karma.conf.js'
}
}
});
//Load NPM tasks
require('load-grunt-tasks')(grunt);
/**
* Default Task
*/
grunt.hook.push('clean', -9999);
grunt.hook.push('concurrent', 9999);
if (process.env.NODE_ENV === 'production') {
grunt.hook.push('cssmin', 100);
grunt.hook.push('uglify', 200);
} else {
grunt.hook.push('jshint', -200);
grunt.hook.push('csslint', 100);
}
//Default task.
grunt.registerTask('default', ['hook']);
//Test task.
grunt.registerTask('test', ['env:test', 'mochaTest', 'karma:unit']);
// For Heroku users only.
// Docs: https://github.com/linnovate/mean/wiki/Deploying-on-Heroku
grunt.registerTask('heroku:production', ['cssmin', 'uglify']);
};
Try running:
$ npm install
After that, if you run it and the error still persists or if there's another one, then you probably have not installed ruby, compass or both :)
I had the same issue, the problem for me was in my package.json where I didn't actually install the NPM package needed and it was not automatically installed as previously thought. Try doing
npm install --save-dev load-grunt-tasks
If that doesn't work can you provide the package.json file as well so we can get a little more information.
I was having the same issue you were having, it seems as though the gruntfile is missing a required initialization step.
By changing this:
require('load-grunt-tasks')(grunt);
/**
* Default Task
*/
grunt.hook.push('clean', -9999);
to this:
require('load-grunt-tasks')(grunt);
grunt.loadNpmTasks('grunt-hook');
/**
* Default Task
*/
grunt.hook.push('clean', -9999);
Adding the grunt.loadNpmTasks call, I'm able to get past that issue. The problem is, now I'm getting
Task "clean" not found. Use --force to continue.
Looking at the rest of the grunt file, i don't see a register task for clean. If I go to the mean.io docs, it looks like the build is failing. Perhaps this is part of why? I think I asked mean-cli for gulp version, that's probably why. I'll delete and take it from the top :)
I think the problem is related to where the npm dependencies are declared and the way Heroku handles them.
In few words, check if the npm packages are as dev dependencies and move them to the dependencies block, as suggested here: https://stackoverflow.com/a/20687098/532912.

grunt-newer won't work properly with Watchify

I use Grunt for Node with a bunch of packages. For example jsHint, jsDoc, Browserify, Uglify ...
I run the Gruntfile with Watchify and Newer for automation. So far, so good.
The Gruntfile, which works totaly fine:
module.exports = function(grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
jshint: {
all: ['my/js/files/*.js']
},
jsdoc : {
dist : {
src: ['my/js/files/*.js'],
options: {
destination: 'doc'
}
}
},
browserify: {
'public/js/files/script.js': ['my/js/files/*.js']
},
uglify: {
my_target: {
files: {
'public/js/files/script.js': ['public/js/files/script.js']
}
}
},
htmlmin: {
dist: {
files: {
'public/html/index.html': ['public/html/index.html']
}
}
},
cssmin: {
combine: {
files: {
'public/css/css.min.css': ['my/css/files/*.css']
}
}
},
watch: {
javascript: {
files: ['my/js/files/*.js'],
tasks: ['newer:jshint:all', 'jsdoc', 'browserify', 'uglify']
},
html: {
files: ['public/html/index.html'],
tasks: ['htmlmin']
},
css: {
files: ['public/css/*.css'],
tasks: ['cssmin']
}
}
});
// load plugins
grunt.loadNpmTasks('grunt-contrib-jshint');
grunt.loadNpmTasks('grunt-jsdoc');
grunt.loadNpmTasks('grunt-browserify');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-htmlmin');
grunt.loadNpmTasks('grunt-contrib-cssmin');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-newer');
};
It works as far as I only use Newer for jsHint. But if I try the same with jsDoc or Uglify I get Error-Messages.
Example:
I try this ...
tasks: ['newer:jshint:all', 'newer:jsdoc:all', 'browserify', 'uglify']
instead of ...
tasks: ['newer:jshint:all', 'jsdoc', 'browserify', 'uglify']
I get Error-Messages:
Running "newer:jsdoc:all" (newer) task
Warning: Cannot read property 'files' of undefined Use --force to continue.
Aborted due to warnings.
Why does it work for jsHint but not for the rest? Has anybody an idea? Would much appreciate some Hints!
Kind regards
the target of your jshint task is all, so newer:jshint:all is correct.
your jsdoc target is dist, so you have to use this target: newer:jsdoc:dist
for you it is even easier, you only have one target per task (only your watch task has multiple targets) so you could only do it like this:
['newer:jshint', 'newer:jsdoc', 'browserify', 'uglify']

Running grunt-nodemon once after simultaneous file changes

This is my Gruntfile. I run concurrently nodemon to run my application and watch to watch for changes in my coffeescript.
Coffeescript takes the src files and turns them into JS files (Currently 3, main.coffee, Person.coffee and Car.coffee)
I want my Nodemon to restart everytime once of those file changes, to run it with the latest saved changes.
Here is the problem: When just 1 coffee file is modified, running coffee will recompile all the coffee files, which in turn generate 3 JS files, which in turn makes nodemon restart 3 times. This is not desirable since im working in an application that uses net requests, and I don't want it to spin out of control.
Would it be possible to make nodemon restart just 1 time?
I thought of concatenating all the JS files, but that messes the modularity of my JS files.
I also thought of "watching" the files 1 by 1, but that can get cumbersome if I reach 50 files.
How can I solve this problem?
module.exports = function(grunt) {
"use strict";
grunt.initConfig({
pkg: grunt.file.readJSON( 'package.json' ),
coffee: {
dist: {
join: true,
expand: true,
flatten: true,
cwd: 'src/dist',
src: ['*.coffee'],
dest: 'dist',
ext: '.js'
},
},
watch: {
dist: {
files: ['src/dist/**/*.coffee'],
tasks: 'coffee'
},
},
concurrent: {
dev: {
tasks: ['nodemon', 'watch'],
options: {
logConcurrentOutput: true
}
}
},
nodemon: {
dev: {
script: 'dist/main.js',
},
options:{
watch: "dist/**/*.js"
}
}
});
grunt.loadNpmTasks('grunt-concurrent');
grunt.loadNpmTasks('grunt-contrib-coffee');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-nodemon');
grunt.registerTask("default", ["coffee", "concurrent"]);
};
You probably need to use the delayTime option. The problem is, it doesn't actually wait for all files to finish, it simply waits some amount of time before restarting, thus preventing multiple restarts.
nodemon: {
dev: {
script: 'dist/main.js',
},
options:{
watch: "dist/**/*.js",
delayTime: 2000
}
}
You can use grunt-newer. Then in the watch task you can specify that you want to compile only files that changed.
watch: {
dist: {
files: ['src/dist/**/*.coffee'],
tasks: 'newer:coffee'
},
}

How to setup a grunt file to watch and compile less files

I'm trying to use grunt to compile my less files into css while in development. While at it also, watch and reload. The file I've wrote is this:
module.exports = function(grunt) {
grunt.initConfig({
less: {
development: {
options: {
compress: true,
yuicompress: true,
optimization: 2
},
files: {
// target.css file: source.less file
"public/css/bootstrap.css": "./public/less/bootstrap.less"
}
}
},
watch: {
styles: {
// Which files to watch (all .less files recursively in the less directory)
files: ["public/less/*"],
tasks: ['less'],
options: {
livereload: true,
}
}
}
});
grunt.loadNpmTasks('grunt-contrib-less');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.registerTask('default', ['watch']);
};
And I have this saved as a gruntfile.js in my project root's directory. What am I doing wrong?
PS: I'm using forever to start my app and in the same terminal window I'm using the command grunt watch, however when I change my less files nothing happens.
PPS: My file structure is as follows:
root
-- public
-- less
-- css
As you can see above my main less file is located at root/public/less/bootstrap.less and I'd like the css to be compiled at root/public/css/bootstrap.css
Many thanks
Your setup seems to be good but I found a problem here... may be it solves your Question
"public/css/bootstrap.css": "./public/less/bootstrap.less"
^^
your url is same but in second appearance you have add extra "./" I think if you remove this it will work.
This is my own code and it is working fine.
module.exports = function(grunt){
grunt.initConfig({
//pkg:grunt.file.readJSON('package.json'),
less:{
development:{
options:{
compress: true,
yuicompress: true,
optimization: 2
},
files:{
'webroot/css/meer/index/index2.css' : 'webroot/css/meer/index/index2.less'
}
}
},
watch: {
styles:{
options:{
livereload: true,
spawn: false,
event: ['added','deleted','changed']
},
files:['webroot/css/meer/index/*.less'],
tasks:['less']
}
}
});
grunt.loadNpmTasks('grunt-contrib-less');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.registerTask('default',['watch']);
}

Resources