Short note to single page application contruction_2: Grunt

Grunt: automate the process of including all of the dependencies i our web pages

Plugins:

Bower concat — To concat all the bower components to a single file

Uglify — Reduce file size

  1. Install grunt and plugins

npm install -S grunt grunt-contrib-uglify grunt-bower-concat

I. We can also install devDependency using -D

II. We can chain the name to install all the packages at once

2. Touch a Gruntfile.js

module.exports = function(grunt) {
grunt.initConfig({
uglify: {
my_target: {
files: {
'public/javascripts/vendor/all.js': ['public/javascripts/vendor/all.js']
},
bower_concat: {
all: {
dest: 'public/javascripts/vendor/all.js',
dependencies: {
'underscore': 'jquery',
'backbone': 'underscore'
}
}
});
// order is not important here
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-bower-concat');
  // order is important here
grunt.registerTask('default', ['bower_concat', 'uglify']);
};

3. After executing grunt in cli we will get a file name all.js contain all dependencies in directory vendor

(bower_concat first create the all.js, and then uglify reduce the all.js size)

4. Add script src in the HTML file

Like what you read? Give newfishg a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.