Setup
In your terminal type in this
npm install -g grunt-cli
create a project
mkdir myproject
go to you project
cd myproject
type in
npm init
to save grunt into my package
npm install -S grunt
Create a grunt file:
touch Gruntfile.js
Usage
grunt has now created a grunt file. You can now go in there an
register task:
module.exports = function (grunt) {
grunt.registerTask('speak', function() {
console.log('speaking');
});
grunt.registerTask('yell', function () {
console.log('yelling');
});
grunt.registerTask('both', ['speak', 'yell']);
grunt.registerTask('default', ['speak', 'yell']);
}
To execute these task go to your terminal:
grunt speak
You'll see that it logs out the speak task we defined earlier. The same for
grunt yell
If you typed in 'grunt both', then the tasks in the array in will be executed. If you only type grunt, then the task in the array of our default task will be executed.
Plugins
You can now go to
http://gruntjs.com/plugins
For example we want to install the plugin 'contrib-concat'
https://www.npmjs.com/package/grunt-contrib-concat
In your module exports function type in this:
module.exports = function (grunt) {
// Project configuration.
grunt.initConfig({
concat: {
options: {
separator: ';',
},
dist: {
src: ['src/intro.js', 'src/project.js', 'src/outro.js'],
dest: 'dist/built.js',
},
},
});
grunt.loadNpmTasks('grunt-contrib-concat'); // npm loads some preconfigured tasks in the initConfig; in this case it looks in the initConfig and sees the concat key
}
In your grunt project folder create a folder called 'src'. In that folder create the files intro.js, project.js and outro.js
In these files you can write - for testing purposes - anything you want. We will later see that the content in the 3 mentioned files will be concatened into one - the built.js in the dist-folder.
You can see this effect by running in your terminal:
grunt concat
Another intersting plugin is 'contrib-watch':
https://www.npmjs.com/package/grunt-contrib-watch
Whenever a pattern in your file structure changes, it will update it automatically in the grunt build folder, so you don't have to run the grunt command everytime.
First install it:
npm install grunt-contrib-watch --save-dev
Update your grunt file so it looks like this:
module.exports = function (grunt) {
grunt.registerTask('speak', function() {
console.log('speaking');
});
grunt.registerTask('yell', function () {
console.log('yelling');
});
grunt.registerTask('default', ['speak', 'yell']);
// Project configuration.
grunt.initConfig({
concat: {
jsPortion: {
src: ['js/1.js', 'js/2.js'],
dest: 'dist/built.js',
},
cssPortion: {
src: ['css/1.css', 'js/2.css'],
dest: 'dist/built.js',
},
},
watch: {
js: {
files: ['js/**/*.js'],
tasks: ['concat:jsPortion'],
},
css: {
files: ['css/**/*.css'],
tasks: ['concat:cssPortion'],
},
},
});
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-contrib-watch');
}
If you type in your terminal
grunt watch
..and then change one of your js files in your js folder, then you'll see grunt watch executes concat and concatenates the updates into one file.
Feel free to play around with grunt.
