We Keep Coding

nodejs - run grunt task programmatically

i'm using grunt tasks to watch and concatenate some js files.
my first configuration worked fine:
grunt.initConfig({
watch: {
js: {
files: ['web/**/*.js'],
tasks: ['concat:JS']
}
},
concat: {
JS: {
files: {
"index.js": [
"test-1.js",
"test-2.js",
],
"about_us.js": [
"test-3.js",
"test-4.js",
],
"store.js": [
"test-5.js",
"test-6.js",
]
}
}
}
});
my problem is that with this configuration whenever i change a file it concatenates everything.
i would be able to concatenate only a specific file (based on which file changed).
e.g. if i change test-1.js i would like concatenate only the index.js file (..so the task to run should be 'concat:JS:index.js' )
so i tryed adding a watch event
grunt.event.on('watch', function(action, filepath, target) {
var taskName = "concat:JS"; //here i calculate dinamically the specific task name to be run
grunt.task.run(taskName);
});
but nothing happens.. any idea? thanks

New answer post edit to question
Using the grunt.event.on('watch', ...) listener is the wrong tool for this kind of requirement. Instead you should utilize multiple Targets for both the the watch and concat tasks as shown in the Gruntfile.js excerpt below.
Gruntfile.js
grunt.initConfig({
watch: {
'JS-index': {
files: ['web/js/test-1.js', 'web/js/test-2.js'],
tasks: ['concat:JS-index']
},
'JS-about-us': {
files: ['web/js/test-3.js', 'web/js/test-4.js'],
tasks: ['concat:JS-about-us']
},
'JS-store': {
files: ['web/js/test-5.js', 'web/js/test-6.js'],
tasks: ['concat:JS-store']
}
},
concat: {
'JS-index': {
files: {
'dist/js/index.js': [
"web/js/test-1.js",
"web/js/test-2.js",
]
}
},
'JS-about-us': {
files: {
"dist/js/about_us.js": [
"web/js/test-3.js",
"web/js/test-4.js",
]
}
},
'JS-store': {
files: {
'dist/js/store.js': [
"web/js/test-5.js",
"web/js/test-6.js",
]
}
}
}
});
Notes
Given the configuration shown above, the following will happen after running grunt watch via your CLI:
Changing either test-1.js or test-2.js will concatenate both files to dist/js/index.js.
Changing either test-3.js or test-4.js will concatenate both files to dist/js/about_us.js.
Changing either test-5.js or test-6.js will concatenate both files to dist/js/store.js.
Your paths will need to be configured as necessary
Original answer before edit to question
how do i execute a task with grunt?
Using grunt.task.run is the correct way to programmatically run a task.
However, see this comment in the grunt-contrib-watch github repo. Excerpts from it read:
"Don't use grunt.event.on('watch') to run your tasks."
and...
"The watch event is not intended for running tasks."
The following solution assumes your requirement is to concatenate some .js files when one of them is changed/edited. In which case you need to utilize the tasks property of the watch task to define which task to run (I.e. 'concat:JS')
Gruntfile
module.exports = function(grunt) {
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.initConfig({
watch: {
js: {
files: ['path/to/js/**/*.js'], // <-- 1. Glob pattern to .js files
tasks: ['concat:JS'] // <-- 2. Task to run when .js file changes.
}
},
concat: { // <-- 3. Configure your `concat` task as necessary.
JS: {
src: [
'path/to/js/foo.js',
'path/to/js/bar.js',
'path/to/js/quux.js'
],
dest: 'path/to/output/combined.js'
}
}
});
grunt.registerTask('default', ['watch']);
grunt.event.on('watch', function(action, filepath, target) {
console.log("yep, this code is being executed");
// 4. <-- Do not run task from 'on' listener event.
});
}
Notes
In your watch task define the glob pattern to the source .js files to watch for changes.
Specify the task to run when a .js file changes; I.e. 'concat:JS'
Configure your concat task as necessary.
Remove grunt.task.run('concat:JS'); from the grunt.event.on('watch', ...) listener.
Using the gist above and running grunt via your cli creates a new combined.js file when any change is made to a .js file stored in the path/to/js/ directory. (You'll need to configure the paths as per your requirements)
Whilst the grunt.event.on('watch', ...) listener should not be used to run a task, it can be utilized to configure other tasks.

How to run unit tests in mtime order with Grunt and Mocha

So when you do TDD, do you wait it to run all tests till the one you're working on? It takes too much time. When I'm in rush, I rename test file to something like aaaaaaaaaaaaaaaa_testsomething.test.js so it's run first and I see errors asap.
I don't like this approach and I'm sure there's solution, but I can't find it. So what is the easiest way to run unit tests in mtime order with Mocha? There's -sort option, but it sorts files by name only. How can I sort them by modification time?
There's my Gruntfile.js:
module.exports = function(grunt) {
grunt.initConfig({
watch: {
tests: {
files: ['**/*.js', '!**/node_modules/**'],
tasks: ['mochacli:local']
}
},
mochacli: {
options: {
require: ['assert'],
reporter: 'spec',
bail: true,
timeout: 6000,
sort: true,
files: ['tests/*.js']
},
local: {
timeout: 25000
}
}
});
grunt.loadNpmTasks('grunt-mocha-cli');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.registerTask('test', ['mochacli:local']);
grunt.registerTask('livetests', [ 'watch:tests']);
};
Note: it's not duplicate. I don't want to edit my tests or Gruntfile.js each time I save source code file. I'm asking about how to modify Grunt task so it runs tests from last modified *.test.js file first. Sort unit tests by mtime, as stated in Title.
Simple scenario: I open test1.test.js in editor, change it, hit Ctrl+B and it runs unit tests from test1.test.js then test4.test.js. I open test4.test.js, hit Ctrl+S, Ctrl+B and it runs tests from test4.test.js then test1.test.js
I'm thinking about some Grunt plugin to sort files first, so I can put its results there insted of 'tests/*.js' with grunt.config.set('mochacli.options.files', 'tests/recent.js,tests/older.js', ....); but I can't find anything I can use as middleware there, don't want to invent bycicle as I'm sure there's something for this implemented already.

don't want to invent bicycle as I'm sure there's something for this implemented already.
...Sometimes you have to ride the bicycle ;)
Solution
This can be achieved by registering an intermediate custom-task in your Gruntfile.js to perform the following dynamically:
Obtain filepaths for all unit test files (.js) utilizing grunt.file.expand with the appropriate globbing pattern.
Sort each matched filepath by the files mtime/modified-date.
Configure the mochacli.options.file Array with the chronologically sorted filepaths using grunt.config
Run the local Target defined in the mochacli Task using grunt.task.run
Gruntfile.js
Configure your Gruntfile.js as follows:
module.exports = function(grunt) {
// Additional built-in node module.
var statSync = require('fs').statSync;
grunt.initConfig({
watch: {
tests: {
files: ['**/*.js', '!**/node_modules/**', '!Gruntfile.js'],
tasks: ['runMochaTests']
}
},
mochacli: {
options: {
require: ['assert'],
reporter: 'spec',
bail: true,
timeout: 6000,
files: [] // <-- Intentionally empty, to be generated dynamically.
},
local: {
timeout: 25000
}
}
});
grunt.loadNpmTasks('grunt-mocha-cli');
grunt.loadNpmTasks('grunt-contrib-watch');
/**
* Custom task to dynamically configure the `mochacli.options.files` Array.
* All filepaths that match the given globbing pattern(s), which is specified
# via the `grunt.file.expand` method, will be sorted chronologically via each
* file(s) latest modified date (i.e. mtime).
*/
grunt.registerTask('runMochaTests', function configMochaTask() {
var sortedPaths = grunt.file.expand({ filter: 'isFile' }, 'tests/**/*.js')
.map(function(filePath) {
return {
fpath: filePath,
modtime: statSync(filePath).mtime.getTime()
}
})
.sort(function (a, b) {
return a.modtime - b.modtime;
})
.map(function (info) {
return info.fpath;
})
.reverse();
grunt.config('mochacli.options.files', sortedPaths);
grunt.task.run(['mochacli:local']);
});
grunt.registerTask('test', ['runMochaTests']);
grunt.registerTask('livetests', [ 'watch:tests']);
};
Additional Notes
Using the configuration above. Running $ grunt livetests via your CLI, then subsequently saving a modified test file will cause Mocha to run each test file in chronological order based on the files last modified date (I.e. The most recent modified file will run first and the last modified file will run last). This same logic applies when running $ grunt test too.
However, if you want Mocha to run the most recent modified file first, yet run the other files in normal order (I.e. by name), then the custom runMochaTests Task in the Gruntfile.js above should be replaced with the following logic instead:
/**
* Custom task to dynamically configure the `mochacli.options.files` Array.
* The filepaths that match the given globbing pattern(s), which is specified
# via the `grunt.file.expand` method, will be in normal sort order (by name).
* However, the most recently modified file will be repositioned as the first
* item in the `filePaths` Array (0-index position).
*/
grunt.registerTask('runMochaTests', function configMochaTask() {
var filePaths = grunt.file.expand({ filter: 'isFile' }, 'tests/**/*.js')
.map(function(filePath) {
return filePath
});
var latestModifiedFilePath = filePaths.map(function(filePath) {
return {
fpath: filePath,
modtime: statSync(filePath).mtime.getTime()
}
})
.sort(function (a, b) {
return a.modtime - b.modtime;
})
.map(function (info) {
return info.fpath;
})
.reverse()[0];
filePaths.splice(filePaths.indexOf(latestModifiedFilePath), 1);
filePaths.unshift(latestModifiedFilePath);
grunt.config('mochacli.options.files', filePaths);
grunt.task.run(['mochacli:local']);
});

If you're using mocha, you can set .only on the test you are interested in:
describe(function () {
// these tests will be skipped
});
describe.only(function () {
// these tests will run
})

handlebars:compile - Cannot read property 'filter' of undefined use

I've been searching around but there seemed to be no situation similar to mine so thought I'd post to ask. I want to run the handlebars task in Gruntfile.js with grunt handlebars to compile a templates.js in my source folder (www) but it doesn't fire up with this error shown:
Warning: Cannot read property 'filter' of undefined Use
Here's my script for the handlebars task in grunt file:
// Create the tasks
grunt.initConfig({
config: config,
handlebars: {
// Compiles the handlebar templates into templates.js
compile: {
options: {
amd: true,
processName: function (filepath) {
var pieces = filepath.split('/');
return pieces[pieces.length - 1].split('.')[0];
}
},
// Specify location of handlebar templates
www: ['<%= config.www %>/html/{,*/}*.handlebars'],
dest: '<%= config.www %>/js/templates.js'
}
}
});
Here's opening script of grunt file and the config object, before grunt.initConfig :
module.exports = (function () {
'use strict';
return function (grunt) {
require('load-grunt-tasks')(grunt); // Several tasks to run using grunt-contrib-xx plugins
// Config object
var config = {
www: 'www', // all source files in one directory
};
.. // grunt.initConfig
};
});
Couldn't figure out what goes wrong here since I don't even define a property/term filter and that's the only error received. Any thoughts would be appreciated.

So I will write what I did to resolve this which might be of use to you.
I simply changed the www property specifically to src, as referred to in the first code block, for the handlebars task in grunt file to fire up. Existing handlebars which are markups are sourced a.k.a. src and to compile the templates.js in your specified destination.
Note: handlebars file itself should end with unspecified file type (.handlebars). Depending on your own set up, noting this will save you lots of time afterwards.
Now run below and you shall see the templates.js found in the dest folder.
grunt handlebars

Grunt read .json file to concat list of html files

I’m trying to get grunt to concat some .css files from 2 different directories into a single css file
I got it working ok and am trying to write a similar piece of code to concat html files in the order I specify in a simple external .json file rather than editing the Grunfile.js directly each time but it keeps throwing errors
The file locations and permissions are all ok, I can do it with php or concat the css files ok, I’m not great on js syntax os using functions. I only learned to use Grunt in the last few days so am pretty sure have not called the file with the correct code??
Any advice kindly appreciated!
This is my Gruntfile.js exactly
module.exports = function(grunt) {
// 1. All configuration goes here
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
concat: {
// 2. Configuration for concatinating files goes here
file.readJSON(‘html-files.json’);
},
watch: {
files: ['../../pages/**/*.html’],
tasks: ['concat'],
options : { nospawn : true }
}
});
// 3. Where we tell Grunt we plan to use this plug-in
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-concat');
// 4. Where we tell Grunt what to do when we type "grunt" into the terminal.
grunt.registerTask('default', ['concat']);
};
This is the html-files.json file contents exactly
html: {
src: [
'../../pages/**/this-block.html',
'../../pages/**/that-block.html',
],
dest: '../../somepage/content.html',
}

Using JSLint/Hint with requirejs

I'm currently setting up a automated build script (with gruntjs) for a require.js driven project . Therefor I would like to run jslint/jshint on all required files before concatenating and minifying it with r.js. Since the js folder contains a lot of development files I don't want to lint, I can't just pass js/**/*.js to JSLint. My first thought was to run r.js with optimizer: 'none', lint the concatenated file and then minify it, but this is not an options for two reasons. First it will include vendor libs I don't want to lint and second finding the line with the error, find it's class, find the appropriate js-file in the dev folder, fix it there, run r.js again and finally lint it again, is way to much hassle for our workflow. So I'm looking for a possibility to hook up the linting into the r.js optimizer process or at least get a list of the requirejs dependency tree in some way, that I can parse and pass it to lint. Or any solution practicable for an automated process, you'll come up with.

Lint first, compile later. Just be specific about the files you want to lint and use the ! prefix to ignore specific files:
grunt.initConfig({
lint: {
// Specify which files to lint and which to ignore
all: ['js/src/*.js', '!js/src/notthisfile.js']
},
requirejs: {
compile: {
options: {
baseUrl: 'js/src',
name: 'project',
out: 'js/scripts.js'
}
}
}
});
// Load the grunt-contrib-requirejs module.
// Do `npm install grunt-contrib-requirejs` first
grunt.loadNpmTasks('grunt-contrib-requirejs');
// Our default task (just running grunt) will
// lint first then compile
grunt.registerTask('default', ['lint', 'requirejs']);

I prefer not overriding r.js's methods, or you might create an unwanted dependency on a specific version (you'll need to update your code should r.js change)
This is the code I use for the same purpose, making use of require's onBuildRead function and the fact that objects in javascript are passed by reference. I make sure I run the require build first, then lint the js file sources.
The downside is that you'll lint after build complete. For my setup that is not a problem.
module.exports = function(grunt) {
var jsHintOptions = {
options: {
curly: true,
eqeqeq: true,
eqnull: true,
browser: true,
globals: {
jQuery: true
}
},
all: [] // <--- note this is empty! We'll fill it up as we read require dependencies
};
var requirejsOptions = {
compile: {
options: {
paths: {
"jquery": "empty:"
},
baseUrl: "./",
name: "src/mypackage/main",
mainConfigFile: "src/mypackage/main.js",
out: 'build/mypackage/main.js',
onBuildRead: function (moduleName, path, contents) {
jsHintOptions.all.push(path); // <-- here we populate the jshint path array
return contents;
}
}
}
};
grunt.initConfig({
pkg: grunt.file.readJSON('packages/mypackage.package.json'),
requirejs: requirejsOptions,
jshint: jsHintOptions
});
// load plugin that enabled requirejs
grunt.loadNpmTasks('grunt-contrib-requirejs');
// load code quality tool
grunt.loadNpmTasks('grunt-contrib-jshint');
grunt.registerTask('default', ['requirejs', 'jshint']); // <-- make sure your run jshint AFTER require
};

This answer sort of bypasses Grunt, but it should work for what you want to do. The way I would do it is look at r.js and try to override a function that receives the path to the various modules being loaded, intercept the module name, and lint the files while r.js is loading and compiling the modules. I've done it like so:
var requirejs = require('requirejs');
var options = {/*r.js options as JSON*/};
var oldNewContext = requirejs.s.newContext;
requirejs.s.newContext = function(){
var context = oldNewContext.apply(this, arguments);
var oldLoad = context.Module.prototype.load;
context.Module.prototype.load = function(){
var module = oldLoad.apply(this, arguments);
if(/\.js$/.test(this.map.url) && !/^empty:/.test(this.map.url))
console.log(this.map.url);
return module;
}
return context;
}
requirejs.optimize(options)
Then when you run requirejs.optimize on your modules, you should get all the non-empty JavaScript urls logged to the console. Instead of logging them to the console, you could use the urls to lint the files.

Instead of using the lint task, install, load, and set up grunt-contrib-jshint. It has an ignores option to ignore specific files or file path patterns.
Here's my task:
jshint: {
options: {
// options here to override JSHint defaults
boss : true, // Suppress warnings about assignments where comparisons are expected
browser : true, // Define globals exposed by modern browsers (`document`, `navigator`)
curly : false, // Require curly braces around blocks
devel : false, // Define `console`, `alert`, etc. (poor-man's debugging)
eqeqeq : false, // Prohibit the use of `==` and `!=` in favor of `===` and `!==`
"-W041" : false, // Prohibit use of `== ''` comparisons
eqnull : true, // Suppress warnings about `== null` comparisons
immed : true, // Prohibit the use of immediate function invocations w/o wrapping in parentheses
latedef : true, // Prohibit the use of a var before it's defined
laxbreak: true, // Suppress warnings about possibly unsafe line breaks
newcap : true, // Require you to capitalize names of constructor functions
noarg : true, // Prohibit the use of `arguments.caller` and `arguments.callee`
shadow : true, // Suppress warnings about var shadowing (declaring a var that's declared somewhere in outer scope)
sub : true, // Suppress warnings about using `[]` notation, e.g. `person['name']` vs. `person.name`
trailing: true, // Trailing whitespace = error
undef : false, // Prohibit the use of explicitly undeclared variables
unused : false, // Warn when you define and never use your variables
white : false, // Check JS against Douglas Crawford's coding style
jquery : true, // Define globals exposed by jQuery
// Define global functions/libraries/etc.
globals : {
amplify : true
},
ignores: [
'src/app/templates/template.js',
'src/scripts/plugins/text.min.js'
]
},
gruntfile: {
src: 'Gruntfile.js'
},
app: {
src: 'src/app/**/*.js'
},
scripts: {
src: 'src/scripts/**/*.js'
}
}