There are the following steps:
1. Create a new project Bejs
2. Create a new file package.json
3. Create a new file Gruntfile.js
4. Execute grunt tasks on the command line
1. New project Bejs
The source code is placed under src, and the directory has two subdirectories asset and js. js decentralizes selector.js and ajax.js, which has been discussed in the previous article how to merge and compress them. This article only focuses on the asset directory, which contains some pictures and css files. In a while, the two css resources reset.css and style.css will be merged and compressed into the dest/asset directory. A merge version all.css, a compressed version all-min.css.
2. Create a new package.json
package.json is placed in the root directory, and its meaning has been introduced in the previous article. The current project structure is as follows
package.json content must comply with JSON syntax specifications, as follows
The code copy is as follows:
{
"name": "BeJS",
"version": "0.1.0",
"devDependencies": {
"grunt": "~0.4.0",
"grunt-contrib-concat": "~0.1.1",
"grunt-css": ">0.0.0"
}
}
The previous article of grunt-contrib-concat has been introduced. grunt-css is the plugin to be used in this article.
At this time, open the command line tool and enter the project root directory, and type the following command: npm install
Check the root directory and found that there is an additional node_modules directory, including four subdirectories, see the picture
3. Create a new file Gruntfile.js
Gruntfile.js is also placed in the project root directory. Almost all tasks are defined in this file. It is an ordinary js file, where any js code can be written instead of JSON. Like package.json, it must be submitted to svn or git like the source code.
The source code is as follows
The code copy is as follows:
module.exports = function(grunt) {
// Configuration
grunt.initConfig({
pkg : grunt.file.readJSON('package.json'),
concat : {
css : {
src: ['src/asset/*.css'],
dest: 'dest/asset/all.css'
}
},
cssmin: {
css: {
src: 'dest/asset/all.css',
dest: 'dest/asset/all-min.css'
}
}
});
// Load concat and css plugins, for merge and compression respectively
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-css');
// Default task
grunt.registerTask('default', ['concat', 'cssmin']);
};
4. Execute grunt tasks
Open the command line, enter the project root directory, and click grunt
From the printing information, it is seen that the successful merge and compression are generated and the dest directory and the expected files are generated. At this time, there is more dest in the project directory, as follows
At this point, the css merge and compression are completed.