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

Show your support

Clapping shows how much you appreciated newfishg’s story.