Grunt Part 2

Objectives and Outcomes

In this exercise, you will continue to learn to use Grunt, the task runner. You will configure the Grunt file with a set of additional tasks to build your web project. At the end of this exercise, you will be able to:

  • Configure a Grunt file with a set of tasks to build your web project from a source.

Copying the Files and Cleaning Up the Dist Folder

  • Next you will install the Grunt modules to copy over files to a distribution folder named dist, and clean up the dist folder when needed. To do this, install the following Grunt modules:
 
npm install grunt-contrib-copy@1.0.0 --save-dev
npm install grunt-contrib-clean@1.1.0 --save-dev
 
 
 
  • You will now add the code to perform the copying of files to the dist folder, and cleaning up the dist folder. To do this, add the following code to Gruntfile.js. This should be added right after the configuration of the SASS task.:

,

copy: {
html: {
files: [
{
//for html
expand: true,
dot: true,
cwd: './',
src: ['*.html'],
dest: 'dist'
}]
},
fonts: {
files: [
{
//for font-awesome
expand: true,
dot: true,
cwd: 'node_modules/font-awesome',
src: ['fonts/*.*'],
dest: 'dist'
}]
}
},

clean: {
build: {
src: [ 'dist/']
}
}


 
 
  • Remember to add the comma after the end of the SASS task.

Compressing and Minifying Images

  • Next we install the grunt-contrib-imagemin module and use it to process the images. To install this module type at the prompt:

 
 
npm install grunt-contrib-imagemin@2.0.1 --save-dev
 
 
 
  • Then, configure the imagemin task as shown below in the Gruntfile:

 
 
,
imagemin: {
dynamic: {
files: [{
expand: true, // Enable dynamic expansion
cwd: './', // Src matches are relative to
                      this path
src: ['img/*.{png,jpg,gif}'], // Actual patterns to match
dest: 'dist/' // Destination path prefix
}]
}
}
 
 
 

Preparing the Distribution Folder and Files

  • We are now going to use the Grunt usemin module together with concat, cssmin, uglify and filerev to prepare the distribution folder. To do this, install the following Grunt modules:

 
 
npm install grunt-contrib-concat@1.0.1 --save-dev
npm install grunt-contrib-cssmin@2.2.1 --save-dev
npm install grunt-contrib-htmlmin@2.4.0 --save-dev
npm install grunt-contrib-uglify@3.3.0 --save-dev
npm install grunt-filerev@2.3.1 --save-dev
npm install grunt-usemin@3.1.1 --save-dev
 
 
 
  • Next, update the task configuration within the Gruntfile.js with the following additional code to introduce the new tasks:

 
 
,
 
useminPrepare: {
foo: {
dest: 'dist',
src: ['contactus.html','aboutus.html','index.html']
},
options: {
flow: {
steps: {
css: ['cssmin'],
js:['uglify']
},
post: {
css: [{
name: 'cssmin',
createConfig: function (context, block) {
var generated = context.options.generated;
generated.options = {
keepSpecialComments: 0, rebase: false
};
}
}]
}
}
}
},
 
// Concat
concat: {
options: {
separator: ';'
},
 
// dist configuration is provided by useminPrepare
dist: {}
},
 
// Uglify
uglify: {
// dist configuration is provided by useminPrepare
dist: {}
},
 
cssmin: {
dist: {}
},
 
// Filerev
filerev: {
options: {
encoding: 'utf8',
algorithm: 'md5',
length: 20
},
 
release: {
// filerev:release hashes(md5) all assets (images, js and css )
// in dist directory
files: [{
src: [
'dist/js/*.js',
'dist/css/*.css',
]
}]
}
},
 
// Usemin
// Replaces all assets with their revved version in html and css files.
// options.assetDirs contains the directories for finding the assets
// according to their relative paths
usemin: {
html: ['dist/contactus.html','dist/aboutus.html','dist/index.html'],
options: {
assetsDirs: ['dist', 'dist/css','dist/js']
}
},
 
htmlmin: { // Task
dist: { // Target
options: { // Target options
collapseWhitespace: true
},
files: { // Dictionary of
                  files
'dist/index.html': 'dist/index.html', // 'destination':
                      'source'
'dist/contactus.html': 'dist/contactus.html',
'dist/aboutus.html': 'dist/aboutus.html',
}
}
}
 
 
 
  • Next, update the jit-grunt configuration as follows, to inform it that useminPrepare task depends on the usemin package:
 
 
 
require('jit-grunt')(grunt, {
useminPrepare: 'grunt-usemin'
});
 
 
 
  • Next, update the Grunt build task as follows:

 
 
 
grunt.registerTask('build', [
'clean',
'copy',
'imagemin',
'useminPrepare',
'concat',
'cssmin',
'uglify',
'filerev',
'usemin',
'htmlmin'
]);
 
 
 
  • Now if you run Grunt, it will create a dist folder with the files structured correctly to be distributed to a server to host your website. To do this, type the following at the prompt:

 
 
grunt build
 
 
 

Conclusions

In this exercise you have learnt how to configure a Grunt file to perform several tasks. You were able to build a distribution folder for your web project.

posted @ 2018-05-25 11:09  Marco CAO  阅读(167)  评论(0)  编辑  收藏  举报