Grunt Part 2

时间：2018-05-25 13:25:24 阅读：161 评论：0 收藏：0 [点我收藏+]

标签：operator find row bool rod dir oge pre tac

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.

Grunt Part 2

标签：operator find row bool rod dir oge pre tac

原文地址：https://www.cnblogs.com/marcocao/p/9087521.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行