Front-end automated building tool Grunt, front-end building grunt

Front-end automated building tool Grunt, front-end building grunt
1. Understand that GurntGrunt is a task-based JavaScript engineering command line build tool.
The Grunt and Grunt plug-ins are installed and managed through npm, and npm is the package manager of Node. js.
Before learning about Grunt, you must first prepare two things:
1. Understand npm (Node Package Manager): npm is a NodeJS Package management and distribution tool and has become an unofficial standard for releasing Node modules (packages.
2. INSTALL node: Go to the official node. js website (https://nodejs.org/), click INSTALL to download the node installation package, the default installation. After the installation is complete, go to the corresponding directory and find that there is npm under the nodejs folder. You can directly use npm to install the environment.
Ii. Install Grunt refer to Grunt official website http://www.gruntjs.net/
Install Grunt: npm install-g grunt-cli
Note: Installing grunt-cli does not mean installing Grunt! The Grunt CLI task is simple: Call Grunt in the same directory as Gruntfile. The benefit is that you can install Grunt of multiple versions on the same system at the same time.
3. simple and practical Grunt a new Grunt project must have two files under the root directory: package. json and Gruntfile. js
Package. json: this file is used by npm to store project metadata, so that this project can be published as the npm module. You can list the grunt and Grunt plug-ins that the project depends on in the devDependencies configuration section.
Gruntfile: this file is named Gruntfile. js or Gruntfile. coffee, used to configure or define a task and load the Grunt plug-in.
1. The npm init command creates a basic package. json file. You can also manually create a file as follows:

{  "name": "my-project-name",  "description":"test grunt ...",  "version": "0.1.0"}

2. Install the Grunt and Grunt plug-ins (https://github.com/gruntjs)
The simplest way to add the Grunt and grunt plug-ins to an existing package. json file is through:
Npm install <module> -- save-dev. This command not only installs <module>, but also automatically adds it to the devDependencies configuration segment.
3. The grunt -- help Command will list all available tasks
Iv. Simple project process example clear compiling Workspace-> copy source file to compiling Workspace-> merge file-> compress file-> Add Timestamp
Clean-> copy-> concat-> min-> md5
1. grunt-contrib-clean: Clear files and folders.
2. grunt-contrib-copy: Copy files and folders.
3. grunt-contrib-concat: Concatenate files.
4. grunt-contrib-cssmin: Compress CSS files.
Grunt-contrib-uglify: Minify files with UglifyJS.
Grunt-contrib-htmlmin: Minify HTML.
5. grunt-filerev: Static asset revisioning through file content hash
Step 1: Create package. json

{"name":"test_grunt","description":"test grunt ...","version":"0.0.1"}

Step 2: Install the corresponding plug-in (with -- save-dev added, devDependencies dependency will be added to package. json)

npm install grunt-contrib-clean --save-devnpm install grunt-contrib-copy --save-devnpm install grunt-contrib-concat --save-devnpm install grunt-contrib-cssmin --save-devnpm install grunt-contrib-uglify --save-dev

Step 3: Create Gruntfile. js and add the plug-in configuration to be used.

'Use strict '; module. exports = function (grunt) {// Initialization Configuration for building grunt. initConfig ({// configure the specific task}); // load the plug-in grunt to be used. loadNpmTasks ('grunt-contrib-clean'); // register the configured task grunt. registerTask ('default', ['clean']);}

5. Address nodejs official website address: https://nodejs.org/
Grunt Chinese official website address: http://www.gruntjs.net/
Grunt official website plug-in address: https://github.com/gruntjs
Vi. Source Code
// Package. json

{  "name": "test_grunt",  "description": "test grunt ...",  "version": "0.0.1",  "devDependencies": {    "grunt": "^0.4.5",    "grunt-contrib-clean": "^0.6.0",    "grunt-contrib-concat": "^0.5.1",    "grunt-contrib-copy": "^0.8.0",    "grunt-contrib-cssmin": "^0.12.3",    "grunt-contrib-uglify": "^0.9.1"  }}

// Gruntfile. js

'Use strict '; module. exports = function (grunt) {// Initialization Configuration for building grunt. initConfig ({/* configure a specific task */pkg: grunt. file. readJSON ('package. json '), dirs: {src: 'path', dest: 'dest/<% = pkg. name %>/<% = pkg. version %> ',}, // clean task (delete non-min files in the dest/test_grunt/0.0.1 directory) clean: {js: ["<% = dirs. dest %> /*. js ","! <% = Dirs. dest %>/*. min. js "], css: [" <% = dirs. dest %>/*. css ","! <% = Dirs. dest %>/* .min.css "]}, // copy task (copy the file under the path directory to the dest directory) copy: {main: {files: [// program des files within path {expand: true, src: ['path/* '], dest:' <% = dirs. dest %>/', filter: 'isfile'},] }}, // concat task (set. js and B. merge js into built. js) concat: {options: {separator: '\ n',}, concatCSS: {src: [' <% = dirs. dest %>/a.css ',' <% = dirs. dest %>/path/B .css '], dest:' <% = dirs. dest %>/built.css ',}, concat JS: {src: ['<% = dirs. dest %>/. js', '<% = dirs. dest %>/B. js'], dest: '<% = dirs. dest %>/built. js' ,}}, // cssmin task (compressed css) cssmin: {target: {files: [{expand: true, cwd: '<% = dirs. dest %> ', src :['*. css ','! * .Min.css '], dest:' <% = dirs. dest %> ', ext: '.min.css'}] }}, // uglify task (compression js) uglify: {options: {mangle: {response T: ['jquery ', 'background'] }}, my_target: {files: {'<% = dirs. dest %>/bucket. min. js': ['<% = dirs. dest %> /*. js '] }}}); // load the grunt plug-in to be used. loadNpmTasks ('grunt-contrib-clean'); grunt. loadNpmTasks ('grunt-contrib-copy'); grunt. loadNpmTasks ('grunt-contrib-concat'); grunt. loadNpmTasks ('grunt-contrib-cssmin'); grunt. loadNpmTasks ('grunt-contrib-uglify '); // register the configured task grunt. registerTask ('cls', ['clean']); grunt. registerTask ('cpy', ['copy']); grunt. registerTask ('con', ['concat']); grunt. registerTask ('cmpcs', ['cssmin']); grunt. registerTask ('cmpjs', ['uglify ']); grunt. registerTask ('default', ['copy', 'concat', 'cssmin', 'uglify ', 'clean']);}

PS:
1. The task name configured by myself cannot be the same as the plug-in name, otherwise it will cause an infinite loop

2. Plug-in name. Except for the outermost layer, the middle layer name can be customized.