We Keep Coding

Running Grunt task returns error

I am currently trying to remove unused CSS from my CSS files using this. For some reason I keep getting an error that I can't interpret:
module.exports = function(grunt) {
require('load-grunt-tasks')(grunt);
grunt.initConfig({
purifycss: {
options: {
},
target: {
src: ['templates/**/*.html'], // Observe all html files
css: ['static/css/main.css'], // Take all css files into consideration
dest: 'static/css/newcss.css' // Write to this path
}
}
});
grunt.registerTask('default', ['purifycss']);
};
When I run grunt in my command line I get:
>> TypeError: Cannot read property 'dependencies' of null
Warning: Task "default" not found. Used --force, continuing.
Done, but with warnings.
Anyone have any idea why this is happening?

This happens when your package.json is missing and you're using load-grunt-tasks. Run npm init, go through the prompts, then just check that the generated dependencies and devDependencies are what you expect.

Grunt notify not running

I am trying to get desktop notifications working with Grunt, and have installed Grunt notify. As per the instructions, I have also installed "Growl" (I'm on Windows 7), and also included the line grunt.loadNpmTasks('grunt-notify'); in my Gruntfile, however desktop notifications are not showing at all.
Am I missing something? The Grunt Notify page seems to imply that adding in the loadNpmTasks line is the only addition needed in my gruntfile for it to work with default options.
Here is my Gruntfile:
module.exports = function(grunt) {
// Project configuration.
grunt.initConfig({
less: {
development: {
options: {
paths: ["less"],
compress: true,
strictMath: true,
sourceMap: false,
sourceMapFilename: 'css/styles.css.map',
sourceMapRootpath: '/'
},
files: {
"css/styles.css": "css/style.less"
}
}
},
uglify: {
my_target: {
files: {
'js/custom.min.js': ['js/custom.js']
}
}
},
watch: {
compile: {
files: ['**/*.php', 'css/**/*.less', 'js/**/*.js', '!js/custom.min.js'],
tasks: ['less', 'uglify'],
options: {
atBegin: true,
livereload: true
}
}
}
});
grunt.loadNpmTasks('grunt-contrib-less');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-notify');
// Default task(s).
grunt.registerTask('default', ['less']);
};

Hum... I never used the grunt-notify plugin, but as the doc says, this plugin shows warning or errors of your tasks. So if your task run successfully, you shouldn't be notified.
If you wan't custom messages on success too, you'll have to add the optionnal messages.
To be sure that the problem isn't an effect of a bad installation, try to run the simple gruntfile shown as example on the plugin's page.
If it works, you should consider my first explanation and add a custom message on success.
[Edit: try to run your task with the attribute -v to have a verbose run. As specified in the doc, it will write logs if there is errors with the plugin]
This is the grunt-notify example file (from the plugin's doc) :
grunt.initConfig({
// This is optional!
notify_hooks: {
options: {
enabled: true,
max_jshint_notifications: 5, // maximum number of notifications from jshint output
title: "Project Name", // defaults to the name in package.json, or will use project directory's name
success: false, // whether successful grunt executions should be notified automatically
duration: 3 // the duration of notification in seconds, for `notify-send only
}
}
});
// Load the task
grunt.loadNpmTasks('grunt-notify');
// This is required if you use any options.
grunt.task.run('notify_hooks');

Grunt - Concat multiple JS files and watch for changes

Still a bit of a newbie with Grunt, so please bear that in mind with your answers. I am trying to setup a task in Grunt that will concat any JS files within a directory called "custom", into a single file called custom-concat.js, however after running grunt watch (which runs fine without error), nothing is happening when I try and make changes to any of the files within my "custom" directory (i.e. console just sits at "waiting...." even after I make changes to any JS files within "custom" directory). Clearly there is something wrong with my concat task, but I can't seem to see what the problem is. Can anyone see where the problem lies? Full gruntfile below:
module.exports = function(grunt) {
// Project configuration.
grunt.initConfig({
//pkg: grunt.file.readJSON('package.json'),
concat: {
options: {
separator: ';',
},
dist: {
src: ['scripts/custom/**/*.js'],
dest: 'scripts/custom-concat.js',
},
},
uglify: {
build: {
src: 'scripts/custom-concat.js',
dest: 'scripts/custom.min.js'
}
},
less: {
options: {
paths: ["css"]
},
files: {
"styles.css": "less/styles.less"
}
},
watch: {
scripts: {
files: 'scripts/**/*.js',
task: ['concat', 'uglify:build']
},
styles: {
files: 'css/less/**.less',
task: 'less'
}
}
});
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-watch');
// Default task(s).
grunt.registerTask('default', ['concat', 'uglify']);
};

As far as I see, there are three small issues with your watch task:
The correct attribute for watch is taskS not task
If you want to run the tasks of watch, directly at the beginning, use options { atBegin: true }
Your watch task monitors the script folder. However, this folder will also contain your concated and uglified files. So this task will run into an infinite loop. You should probably only watch the scripts/custom folder
So your watch task should probably look something like this:
watch: {
scripts: {
files: 'scripts/custom/**/*.js',
tasks: ['concat', 'uglify:build'],
options: {
atBegin: true
}
},
styles: ...
}
Github grunt-contrib-watch

grunt-contrib-watch exits silently

I use the grunt-contrib-watch task (v. 0.5.3) in order to enable LiveReload:
livereload: {
options: {
middleware: function (connect) {
return [lrSnippet, mountFolder(connect, '.tmp'),
mountFolder(connect, 'src'),
proxySnippet];
}
}
}
//...some other tasks...
watch: {
livereload: {
options: {
livereload: LIVERELOAD_PORT
},
files: [
'src/*.html'
]
}
}
//...................................
grunt.registerTask('server', [
'clean:server',
'recess:compile',
'configureProxies',
'connect:livereload',
'open',
'watch'
]);
While running grunt server --verbose (including watch task), I end up with this console output:
Running "watch" task
Waiting...Verifying property watch exists in config...OK
Verifying property watch.livereload.files exists in config...OK
Live reload server started on port: 35729
Watching src/404.html for changes.
Watching src/app for changes.
Watching src/assets for changes.
Watching src/common for changes.
Watching src/less for changes.
Watching src/vendor for changes.
Watching src/index.html for changes.
For instance, we see here that src/index.html is observed, thus I attempt to change the page title to see the live modification. But, process exits as soon as I save my file..
I read about the fact that watch task may exit if the provided file paths are invalid.
But, Watching src/index.html for changes asserts that it exists, doesn't it?
I don't figure it out.

So the problem was.... a bug with NodeJs 0.10.18.
I updated to 0.10.21 and the whole works without changing anything in my first Gist.
In one word, if you have OSX 10.9 (Mavericks), you have to update Node to 0.10.21

Not sure if that's the issue you're having, but it seems like you're using the connect-livereload middleware directly instead of setting the livereload option directly, as supported by grunt-contrib-connect.
Here's a simple example GruntFile, using just grunt-contrib-watch and grunt-contrib-connect:
module.exports = function (grunt) {
var LIVERELOAD_PORT = 12345;
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
connect: {
server: {
options: {
port: 9001,
base: './src',
livereload: LIVERELOAD_PORT
}
}
},
watch: {
develop: {
files: 'src/*.html',
options: {
livereload: {
port: LIVERELOAD_PORT
}
}
}
}
});
grunt.loadNpmTasks('grunt-contrib-connect');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.registerTask('server', [
'connect:server',
'watch'
]);
};
If you don't need to configure a specific port and can use the default port, it's even simpler - just change the livereload properties for both tasks to true:
livereload: true

grunt: how to generate jshint output as HTML

I'm trying to run jshint using grunt. This works, but now I would like the output to be HTML. Here is my grunt file
module.exports = function(grunt) {
// Project configuration.
grunt.initConfig({
jshint: {
all: ['Gruntfile.js', 'src/*.js']
, options: {
//reporter: 'jslint'
reporter:'checkstyle'
, reporterOutput: 'jshint.html'
}
}
});
grunt.loadNpmTasks('grunt-contrib-jshint');
};
Running this grunt taks, the output is in XML. Any suggestion how to turn this into something that outputs HTML ?
Thanks a lot

You would need to write a custom reporter. Check the jshint docs on writing custom reporters: http://jshint.com/docs/reporters/ Then you can specify the path to the reporter with:
options: {
reporter: '/path/to/custom/html/reporter',
reporterOutput: 'jshint.html'
}

You can use jshint reporter from nodejs
This generates output in HTML
https://www.npmjs.com/package/jshint-html-reporter
Include this in your GruntFile.js
grunt.initConfig({
jshint: {
options: {
reporter: require('jshint-html-reporter'),
reporterOutput: 'jshint-report.html'
},
target: ['file.js']
}
});
grunt.loadNpmTasks('grunt-contrib-jshint');
grunt.registerTask('default', ['jshint']);