Download to read offline
![Nguyễn Ngọc Dũng
https://nndung179.wordpress.com Page 2
module.exports = function (grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
concat: {
js: {
src: [
'lib/jquery.js',
'lib/bootstrap.min.js'
],
dest: 'combined.js'
}
},
uglify: {
js: {
files: {
'combined.js':
['combined.js']
}
}
},
});
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.registerTask('default', ['concat:js',
'uglify:js']);
};
b. Explaination Gruntfile.js
concat: {
js: {
src: [
'lib/jquery.js',
'lib/bootstrap.min.js'
],
dest: 'combined.js'
}
},](https://image.slidesharecdn.com/compressedjswithnodejsgruntjs-150217020506-conversion-gate01/85/Compressed-js-with-NodeJS-GruntJS-2-320.jpg)
![Nguyễn Ngọc Dũng
https://nndung179.wordpress.com Page 3
This block of codes means: you will copy all source code fron js files into
1 file call combined.js (A)
Note: at src attribute, you must place js files with the order of
dependency.
uglify: {
js: {
files: {
'combined.js': ['combined.js']
}
}
},
This block of codes means: from combined.js (A), you will compress you
js here.
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-contrib-uglify');
Load all module you have installed at step 5
grunt.registerTask('default', ['concat:js',
'uglify:js']);
This block of codes is very important, It means that after you do all
configurations. You will register as task for Grunt to execute all tasks
you have config above.
7. Result
The result of this procress will be a file with jquery & bootstrap in one
file under compressed format.](https://image.slidesharecdn.com/compressedjswithnodejsgruntjs-150217020506-conversion-gate01/85/Compressed-js-with-NodeJS-GruntJS-3-320.jpg)
![Nguyễn Ngọc Dũng
https://nndung179.wordpress.com Page 2
module.exports = function (grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
concat: {
js: {
src: [
'lib/jquery.js',
'lib/bootstrap.min.js'
],
dest: 'combined.js'
}
},
uglify: {
js: {
files: {
'combined.js':
['combined.js']
}
}
},
});
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.registerTask('default', ['concat:js',
'uglify:js']);
};
b. Explaination Gruntfile.js
concat: {
js: {
src: [
'lib/jquery.js',
'lib/bootstrap.min.js'
],
dest: 'combined.js'
}
},](https://image.slidesharecdn.com/compressedjswithnodejsgruntjs-150217020506-conversion-gate01/75/Compressed-js-with-NodeJS-GruntJS-2-2048.jpg)
![Nguyễn Ngọc Dũng
https://nndung179.wordpress.com Page 3
This block of codes means: you will copy all source code fron js files into
1 file call combined.js (A)
Note: at src attribute, you must place js files with the order of
dependency.
uglify: {
js: {
files: {
'combined.js': ['combined.js']
}
}
},
This block of codes means: from combined.js (A), you will compress you
js here.
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-contrib-uglify');
Load all module you have installed at step 5
grunt.registerTask('default', ['concat:js',
'uglify:js']);
This block of codes is very important, It means that after you do all
configurations. You will register as task for Grunt to execute all tasks
you have config above.
7. Result
The result of this procress will be a file with jquery & bootstrap in one
file under compressed format.](https://image.slidesharecdn.com/compressedjswithnodejsgruntjs-150217020506-conversion-gate01/75/Compressed-js-with-NodeJS-GruntJS-3-2048.jpg)
Uploaded byDavid Nguyen
Compressed js with NodeJS & GruntJS
This document provides instructions for using Grunt to compress JavaScript files. It describes installing Node.js and Grunt CLI, creating a project structure and package.json file, installing Grunt plugins, configuring Gruntfile.js to first concatenate JS files and then minify them into a single compressed file, and running Grunt to perform these tasks. The Gruntfile configuration concatenates source files into a combined.js file in the defined order, then uglifies this file to minify it.
More Related Content
![Let Grunt do the work, focus on the fun! [Open Web Camp 2013]](https://cdn.slidesharecdn.com/ss_thumbnails/2013-gruntjs-openwebcamp-130715113721-phpapp02-thumbnail.jpg?width=600ounds&width=560&fit=bounds)
Compressed js with NodeJS & GruntJS
- 1. Nguyễn Ngọc Dũng https://nndung179.wordpress.comPage 1 Compressed JS with NodeJS & GruntJS This tutorial will show you how to use grunt to compress js files from your project. 1. Install node js 2. Install Grunt CLI globally npm install -g grunt-cli 3. For example, I have this structure of web: 4. At folder JSCompressed create files: a. package.json { "name" : "menory", "title" : "test", "version" : "1.0.0", "devDependencies": { "grunt": "0.4.1", "grunt-contrib-concat": "0.1.3", "grunt-contrib-cssmin" : "0.6.1", "grunt-contrib-watch" : "0.5.3", "grunt-contrib-uglify" : "0.2.0" } } 5. Open cmd a. + cd to JSCompressed folder b. Execute: npm install 6. Configuration Gruntfile.js a. Gruntfile.js
- 2. Nguyễn Ngọc Dũng https://nndung179.wordpress.comPage 2 module.exports = function (grunt) { grunt.initConfig({ pkg: grunt.file.readJSON('package.json'), concat: { js: { src: [ 'lib/jquery.js', 'lib/bootstrap.min.js' ], dest: 'combined.js' } }, uglify: { js: { files: { 'combined.js': ['combined.js'] } } }, }); grunt.loadNpmTasks('grunt-contrib-concat'); grunt.loadNpmTasks('grunt-contrib-uglify'); grunt.registerTask('default', ['concat:js', 'uglify:js']); }; b. Explaination Gruntfile.js concat: { js: { src: [ 'lib/jquery.js', 'lib/bootstrap.min.js' ], dest: 'combined.js' } },
- 3. Nguyễn Ngọc Dũng https://nndung179.wordpress.comPage 3 This block of codes means: you will copy all source code fron js files into 1 file call combined.js (A) Note: at src attribute, you must place js files with the order of dependency. uglify: { js: { files: { 'combined.js': ['combined.js'] } } }, This block of codes means: from combined.js (A), you will compress you js here. grunt.loadNpmTasks('grunt-contrib-concat'); grunt.loadNpmTasks('grunt-contrib-uglify'); Load all module you have installed at step 5 grunt.registerTask('default', ['concat:js', 'uglify:js']); This block of codes is very important, It means that after you do all configurations. You will register as task for Grunt to execute all tasks you have config above. 7. Result The result of this procress will be a file with jquery & bootstrap in one file under compressed format.