We Keep Coding

How to pass dynamic config to Gruntfile.js

I have written the grunt task to transpile ES6 to ES5. Following is my Gruntfile.js file
module.exports = function (grunt)
{
require("load-grunt-tasks")(grunt);
grunt.initConfig({
"babel": {
options: {
presets: ['es2015']
},
dist: {
files: [{
expand: true,
cwd: '/Users/pankajmeshram/Documents/IVWorkSpace/enfresh/resources/modules',
src: ['**/*.es6'],
dest: '/Users/pankajmeshram/Documents/IVWorkSpace/enfresh/resources/modules',
ext: '.js'
}]
}
}
});
grunt.registerTask("default", ["babel"]);
};
In this file, I want to pass the cwd and dest option dynamically so that I can use this for the different project as well as we have common build for all our projects.
If anyone work on this before, you can suggest some ways or any alternative solution for this task.

module.exports = function(grunt) {
require("load-grunt-tasks")(grunt);
grunt.initConfig({
"babel": {
options: {
presets: ['es2015']
},
dist: {
files: [{
expand: true,
cwd: "<%= cwd %>",
src: ['**/*.es6'],
dest: "<%= dest %>",
ext: '.js'
}]
}
}
});
grunt.registerTask("dynamicConfigs", "Set Dynamic Configs", function (argName, argValue) {
grunt.config.set(argName, argValue);
});
grunt.registerTask("default", ["dynamicConfigs:cwd:/Users/vineethgn/Documents/IVWorkSpace/enfresh/resources/modules", "dynamicConfigs:dest:/Users/vineethgn/Documents/IVWorkSpace/enfresh/resources/modules", "babel"]);
};
You can define those properties as template and then before calling babel task, call the newly created dynamicConfigs task.
Inside dynamicConfigs you are basically setting the key-value pair in grunt.config.
Make sure to call dynamicConfigs task with the parameters you want to set like in the sample code above.

Can Grunt minify multiple files separately, without concatenating them?

I have a Sailsjs project, and it comes with Grunt built in. Here is what tasks/register/prod.js looks like:
module.exports = function(grunt) {
grunt.registerTask('prod', [
'compileAssets',
//'concat',
'uglify',
'cssmin',
'sails-linker:prodJs',
'sails-linker:prodStyles',
//'sails-linker:devTpl',
//'sails-linker:prodJsJade',
//'sails-linker:prodStylesJade',
//'sails-linker:devTplJade'
]);
};
and here is my attempt to get Grunt to minify files separately tasks/config/cssmin.js:
module.exports = function(grunt) {
grunt.config.set('cssmin', {
dist: {
src: 'assets/css/test.css',
dest: '.tmp/public/min/test.min.css'
}
});
grunt.config.set('cssmin', {
dist: {
src: 'assets/css/main.css',
dest: '.tmp/public/min/main.min.css'
}
});
grunt.loadNpmTasks('grunt-contrib-cssmin');
};
This doesn't work correctly, it only gives me main.min.css (minified) but not test.min.css.

"dist" is not a static part of the syntax, it's the name of the target. You can have as many targets as you want, but you can't have two with the same name.
grunt.config.set('cssmin', {
test: {
src: 'assets/css/test.css',
dest: '.tmp/public/min/test.min.css'
},
main: {
src: 'assets/css/main.css',
dest: '.tmp/public/min/main.min.css'
}
});
Running "cssmin" executes both targets, "cssmin:test" runs the first one and "cssmin:main" runs the second.

The second time you set the value for the cssmin task you are overwriting your previous value, thus you are only returned main.min.css.
To minify multiple separate files with cssmin you would only set grunt.config once and it would look like this:
module.exports = function(grunt) {
grunt.config.set('cssmin', {
dist: {
src: 'assets/css/test.css',
dest: '.tmp/public/min/test.min.css'
},
dist2: {
src: 'assets/css/main.css',
dest: '.tmp/public/min/main.min.css'
}
});
grunt.loadNpmTasks('grunt-contrib-cssmin');
};

Why is Grunt ignoring jQuery when Uglifying?

I can't figure out why jQuery is being ignored when running my Grunt task. Here is what it looks like:
module.exports = function (grunt) {
// Configuration
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
// Concat
concat: {
js: {
src: [
'js/vendor/jquery.js',
'js/app/graph.js',
],
dest: 'app/build/js/app.js'
}
},
// Uglify
uglify: {
options: {
preserveComments: false
},
my_target: {
files: {
'app/build/js/app.min.js': [
'app/build/js/app.js'
]
}
}
});
};
When I check app.js, jQuery is part of it, but not in app.min.js. So I suspect something is wrong with the Uglify part.

github.com/gruntjs/grunt-contrib-clean This is not strictly necessary, jQuery should be included if that's all you've got. Do a test on the included site to be sure it's not just hiding somewhere in the uglified code.

I don't think your syntax is right, please try instead this:
uglify: {
development: {
options: {
preserveComments: false
},
files: {
'app/build/js/app.min.js': 'app/build/js/app.js'
}
}
And call it as: grunt.registerTask('default', ['concat', 'uglify:development']);

Not sure if this will help at all or if there even is any difference between the two, but you could try setting up your uglify config similarly to your concat config... e.g:
module.exports = function (grunt) {
// Configuration
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
// Concat
concat: {
js: {
src: [
'js/vendor/jquery.js',
'js/app/graph.js',
],
dest: 'app/build/js/app.js'
}
},
// Uglify
uglify: {
options: {
preserveComments: false
},
js: {
src: ['app/build/js/app.js'],
dest: ['app/build/js/app.min.js']
}
}
});
};
Also, I think you were missing an extra bracket

Grunt file does not complete

I have recently discovered grunt as it is used within an opensource project I have started to work on. Having not worked with grunt before I am struggling to see how it works, or in my case doesn't.
The grunt file is supplied by the project and I assume it works for everyone else. I have installed grunt and the necessary grunt modules have all installed in the "Node_modules" directory.
When running the grunt file the first process performs a number of concatenations and this seems to work fine. The concatenated files are created.
All of the other steps do not seem to execute. The files they are intended to create are not created. There is no error message displayed on the console when grunt is executed.
I'm stumped - anyone have any clues what might be the problem.
The grunt file is :
/*global module:false*/
module.exports = function(grunt) {
// Project configuration...
grunt.initConfig({
manifest: grunt.file.readJSON('chrome/manifest.json'),
concat: {
dist: {
src: ['chrome/js/requester/**/*.js'],
dest: 'chrome/js/requester.js'
},
requester_html: {
src: [
'chrome/html/requester/header.html',
'chrome/html/requester/sidebar.html',
'chrome/html/requester/main.html',
'chrome/html/requester/loggers/*.html',
'chrome/html/requester/modals/*.html',
'chrome/html/requester/footer.html'
],
dest: 'chrome/requester.html'
},
requester_tester: {
src: [
'chrome/html/requester/header.html',
'chrome/html/requester/sidebar.html',
'chrome/html/requester/main.html',
'chrome/html/requester/modals/*.html',
'chrome/html/requester/loggers/*.html',
'chrome/html/requester/footer.html',
'chrome/html/requester/tester.html'
],
dest: 'chrome/tester.html'
}
},
mindirect: {
dist: {
src: ['chrome/js/requester.js'],
dest: 'chrome/js/requester.min.js'
}
},
watch: {
requester_templates: {
files: ['chrome/html/requester/templates/*'],
tasks: ['handlebars'],
options: {
livereload: true
}
},
requester_js: {
files: ['chrome/js/requester/**/*.js'],
tasks: ['concat:dist'],
options: {
livereload: true
}
},
requester_html: {
files: ['chrome/html/requester/*', 'chrome/html/requester/modals/*', 'chrome/html/requester/loggers/*'],
tasks: ['concat:requester_html', 'concat:requester_tester'],
options: {
livereload: true
}
},
requester_css: {
files: ['chrome/css/**/*.scss'],
tasks: ['sass'],
options: {
livereload: true
}
}
},
jshint: {
options: {
curly: true,
eqeqeq: true,
immed: true,
latedef: true,
newcap: true,
noarg: true,
sub: true,
undef: true,
boss: true,
eqnull: true,
browser: true
},
globals: {
jQuery: true
}
},
handlebars: {
compile: {
options: {
partialsUseNamespace: true,
namespace: 'Handlebars.templates',
processPartialName: function(filePath) {
var pieces = filePath.split("/");
var name = pieces[pieces.length - 1].split(".")[0];
return name;
},
processName: function(filePath) {
var pieces = filePath.split("/");
var name = pieces[pieces.length - 1].split(".")[0];
return name;
}
},
files: {
"chrome/html/requester/templates.js": "chrome/html/requester/templates/*"
}
}
},
sass: {
dist: {
files: {
'chrome/css/requester/styles.css': 'chrome/css/requester/styles.scss'
}
}
},
compress: {
main: {
options: {
archive: 'releases/v<%= manifest.version %>.zip'
},
files: [
{src: ['chrome/**', '!chrome/tests/**', '!chrome/manifest_key.json', '!chrome/tester.html'], dest: '/'}, // includes files in path and its subdirs
]
}
}
});
// These plugins provide necessary tasks.
grunt.loadNpmTasks('grunt-contrib-handlebars');
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-contrib-jshint');
grunt.loadNpmTasks('grunt-mindirect');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-sass');
grunt.loadNpmTasks('grunt-contrib-compress');
// Default task.
grunt.registerTask('default', ['jshint', 'concat']);
grunt.registerTask('package', ['concat', 'handlebars', 'sass', 'compress']);
};
The output from the console is as follows :
Running "jshint:globals" (jshint) task
>> 0 files lint free.
Running "concat:dist" (concat) task
File "chrome/js/requester.js" created.
Running "concat:requester_html" (concat) task
File "chrome/requester.html" created.
Running "concat:requester_tester" (concat) task
File "chrome/tester.html" created.
Done, without errors.

Given that the tasks are defined like this:
grunt.registerTask('default', ['jshint', 'concat']);
grunt.registerTask('package', ['concat', 'handlebars', 'sass', 'compress']);
the output you show is what you'd expect if you are running grunt without a task name. It runs the jshint and concat tasks.
If you want to run the tasks associated with package, then you have to run grunt package to run those tasks.

It looks like I did not understand "tasks" within grunt.
Instead of executing "grunt" which runs the "default" tasks, I had to execute "grunt package" which runs the tasks that I was interested in.

As Louis said, you have to specify the right task to run.
But you can also create or modify the tasks you have in order to make it simpler. In your example you may include package in the default task. Because concat task is already executed inside package, you may just replace it in the default task:
grunt.registerTask('default', ['jshint', 'package']);
grunt.registerTask('package', ['concat', 'handlebars', 'sass', 'compress']);
and, in order to build your site, just type
grunt
both jshint and package tasks will be executed

Grunt task duplicate key

I have a grunt file with tasks and jshint giving me a warning for duplicate keys on below:
clean: ['public', 'build', 'css/main.css', 'css/print.css'],
clean : {
aftertest :['js/libs']
},
How can I make this in one key, so that by default it runs ['public', 'build', 'css/main.css', 'css/print.css']?

You should use different targets for this.
grunt.initConfig({
clean: {
build: ['public', 'build', 'css/main.css', 'css/print.css'],
aftertest: ['js/libs']
}
});
Then in your build alias you might want to use it like so:
grunt.registerTask('build', ['clean:build', 'stylus', 'jade', 'jshint']);
Whenever you have more than a single target for one task, it's best to explicitly name them so that you'll know, in the future, what each target's purpose is.

The error it's because the object you are passing to grunt.initConfig has two keys with the same name.
This is a Gruntfile.js example for gjslint task
module.exports = function(grunt) {
// Project configuration.
grunt.initConfig({
watch: {
files: ['<%= jshint.files %>'],
tasks: ['jshint', 'qunit']
},
gjslint: {
options: {
flags: [
'--nojsdoc'
],
reporter: {
name: 'console'
}
},
app: {
src: ['www/app/**/*.js']
}
}
});
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-gjslint');
grunt.registerTask('build', 'Grunt build taskt...', function() {
grunt.log.write('you can log here some stuff...').ok();
});
};