Post 56: How to set up Grunt build system

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.