How to use grunt front-end code management tools (By_shiyou)

Chinese Civil Service Network: http://www.gruntjs.net/

This article for their own collation of the use of the original intention is to use grunt quickly to get started and use the project, the specific grunt inside a lot of advanced functions can be added in succession;

First step: Install Nodejs (Grunt and Grunt plugins are installed and managed by NPM, NPM is node. JS's package Manager)

　　method: https://nodejs.org/en/download/(This is the Nodejs website download page, select for the download can )

Step Two: Install the grunt command:npm install-g grunt-cli (instructions may be required in some systems sudo : sudo  npm install-g grunt-cli) /c9>

Note: Check the grunt version number on your computer: Grunt--version

Step Three: Manually create a folder (any folder with a name can be)

Fourth step: Create 1 files in a folder Gruntfile.js

　　 gruntfile: This file is named Gruntfile.js or Gruntfile.coffee , used to configure or define tasks (Task) and load the grunt plug-in. What is mentioned in this document Gruntfile is actually a file, the file name Gruntfile.js is Gruntfile.coffee or　

　　code example for a complete configuration file: (specifically, whether the code is to be compressed, or merged, etc. are written to this file)

Official Website API Example
Module.exports =function(Grunt) {Grunt.initconfig ({Pkg:grunt.file.readJSON (' Package.json '), concat: {options: {separator:‘;‘}, Dist: {src: [' Src/**/*.js '], dest:' Dist/<%= pkg.name%>.js '}}, Uglify: {options: {banner :‘/*! <%= pkg.name%> <%= grunt.template.today ("dd-mm-yyyy")%> */\n '}, Dist: {files: {' Dist/<%= pkg.name%>.min.js ': [' <%= concat.dist.dest%> ']}}, Qunit: {files: [' Test/**/*.html ']}, Jshint: {files: [' Gruntfile.js ', ' src/**/*.js ', ' test/**/*.js '], options: {//here is the option to overwrite the default configuration of JshintGlobals: {jQuery:true, console:true, module:true, Document:true}}} , watch: {files: [' <%= jshint.files%> '], tasks: [' Jshint ', ' qunit ']    }  }); Grunt.loadnpmtasks (' Grunt-contrib-uglify '); Grunt.loadnpmtasks (' Grunt-contrib-jshint '); Grunt.loadnpmtasks (' Grunt-contrib-qunit '); Grunt.loadnpmtasks (' Grunt-contrib-watch '); Grunt.loadnpmtasks (' Grunt-contrib-concat '); Grunt.registertask (' Test ', [' jshint ', ' qunit ']); Grunt.registertask (' Default ', [' jshint ', ' qunit ', ' concat ', ' uglify ']);};

Fifth step: Initializing the project file (command: NPM init) will automatically generate a file Package.json (be sure to note that this command line needs to switch to the folder you just created)

　　Mac Switching method: cd file path

window: Right-click within the folder to open the command-line window

　　Package.json: This file is used by NPM to store the item's metadata in order to publish the project as a NPM module. You can list the project-dependent grunt and grunt plugins in this file and place them in the Devdependencies configuration section.

Sixth step: Install the Task plug-in (command line input the following corresponding command)

npm Install plugin name--save-dev Common Plugins grunt-contrib-uglify JS Compression grunt-contrib-cssmin CSS Compression Grunt-contrib-concat Code Merge Grunt-contrib-clean except for some folders or some separate files Seventh Step: Perform the task Grunt (Run all plugins) Grunt Task Name (run a single plug-in separately) --------------The process of creating a grunt project for yourself-------------------- --------------The following is a workflow that replicates the grunt code that has been created-------------------- 1. Files that need to be copied

• Gruntfile.js
• src folder
• Package.json

2. Enter NPM install, based on Package.json plug-ins required for automatic package download 3. Enter grunt to run the downloaded plugin

=================== Common Grunt plug-in =========================

Grunt-contrib-concat

A very common grunt plugin for merging arbitrary files is also very simple to use:

npm install grunt-contrib-concat --save-dev

grunt.loadNpmTasks(‘grunt-contrib-concat‘);

(The following plug-in demo no longer installs the plugin and registers the plug-in code, very similar.) ）

Task: Merge the JS file under SRC to the build directory, and the merged file name is Built.js.

Grunt.Initconfig({Concat: { Options:{ //2 the content part of a JS file  separator :  '; '  }, Dist: {< Span class= "PLN" > Src: [ ' src/*.js ' ], Dest:  ' build/built.js ' Span class= "PLN" > } } }) ;  

How to use grunt front-end code management tools (By_shiyou)