Grunt Learning Note 1 theoretical knowledge

You need to check the JS syntax error and then compress the JS code. If you take these two steps manually, it will cost a lot of money.
Grunt will save you the cost of these manual operations.

"-save-dev" means to save grunt as a development dependency for this directory while installing grunt in the current directory. See "Development dependencies" this time, do you feel a little familiar?
The development dependencies are stored in "devdependencies" when you configure Package.json.

Here are some frequently grunt development-dependent plugins

Contrib-jshint--javascript syntax error checking;
contrib-watch--real-time monitoring file changes, call the corresponding task re-execution;
contrib-clean--empty files and folders;
contrib-uglify--compressing JavaScript code
contrib-copy--Copying files, folders
contrib-concat--merging multiple files into a single file
karma--front-end automated testing tools

Using the Uglify plugin (compressed JavaScript code)
The function of the Uglify plugin is to compress JavaScript code. As for JavaScript code compression, there are a lot of necessary and meaningful, and here is needless to say
Almost every JavaScript class library or framework has a **.min.js compressed version.

The "Options" rule allows the resulting compressed file to be taken with banner, that is, the first line of the generated compressed file is added with a sentence description.
Note that the contents of the Package.json are used to obtain the pkg.
Banner option (used to generate a note at the top of the file)

NPM install-g GRUNT-CLI
Once the above command has been executed, the grunt command is added to your system path, and you can execute the grunt command in any directory later.

Each time Grunt is run, he uses the Require () system provided by node to find the locally installed Grunt. It is because of this mechanism that you can run grunt in any subdirectory of your project.

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 grunt and grunt plugins that the project relies on in this file.
Placed within the Devdependencies configuration section.

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

Package.json should be placed in the root directory of the project, in the same directory as Gruntfile, and should be submitted along with the project's source code.

NPM install <module>--save-dev command. This command is not only installed with <MODULE>, it is also automatically added to the Devdependencies configuration section.
Follow the tilde version range format.

The uglify target for the build to compress a JS file into a target file.

As long as the dependency (dependent) package is listed in the Package.json file and installed via NPM install, it can be used as a simple command in Gruntfile:

By defining the default task, you can have grunt perform one or more tasks by itself.
This is the same effect as executing grunt uglify or grunt default. Any number of tasks (with parameters) can be specified in the default task List array.

Src-dest (source file-destination file) How file mappings are
SRC and dest attributes are supported for all file formats
However, this is not a comprehensive tutorial on matching patterns, you only need to know how to use them during file path matching:

Specify a single file:
{src: ' foo/this.js ', dest: ...}
Specify an array of files:
{src: [' foo/this.js ', ' foo/that.js ', ' foo/the-other.js '], dest: ...}
Use a matching pattern:
{src: ' foo/th*.js ', dest: ...}

An independent Node-glob mode:
{src: ' foo/{a,b}*.js ', dest: ...}
You can also write this:
{src: [' foo/a*.js ', ' foo/b*.js '], dest: ...}

All. js files in the Foo directory, sorted alphabetically:
{src: [' foo/*.js '], dest: ...}
The first is bar.js, followed by the remaining. js files, sorted alphabetically:
{src: [' foo/bar.js ', ' foo/*.js '], dest: ...}

All. js files except Bar.js, sorted alphabetically:
{src: [' foo/*.js ', '!foo/bar.js '], dest: ...}
All. js files sorted alphabetically, but bar.js at the end.
{src: [' foo/*.js ', '!foo/bar.js ', ' foo/bar.js '], dest: ...}

Templates can also be used in file paths or in matching modes:
{src: [' src/<%= basename%>.js '], dest: ' build/<%= basename%>.min.js '}
They can also refer to the list of other files defined in the configuration:
{src: [' foo/*.js ', ' <%= jshint.all.src%> '], dest: ...}

Templates specified with the <%%> delimiter automatically expand the scan when the task reads the corresponding data from their configuration.
The template is expanded recursively until the remaining template-related information (which matches the template) is no longer present in the configuration.

concat: {options: {//defines a character that is used to insert a merge output fileSeparator: '; '}, Dist: {//files that will be mergedSRC: [' src/**/*.js '],    //where the merged js file is storedDest: ' dist/<%= pkg.name%>.js '}}uglify: {options: {//The banner comment defined here will be inserted at the top of the output fileBanner: '/*! <%= pkg.name%> <%= grunt.template.today ("dd-mm-yyyy")%> */\n '}, Dist: {files: {' Dist/<%= pkg.name%>.min.js ': [' <%= concat.dist.dest%> ']}} and finally set some tasks. The most important is the default task://enter "Grunt test" on the command line and the test task will be executed. Grunt.registertask (' Test ', [' jshint ', ' qunit ')]);//simply enter "Grunt" on the command line and the default task will be executedGrunt.registertask (' Default ', [' jshint ', ' qunit ', ' concat ', ' uglify ']);

Official document Configuration Grungfile.jsmodule.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 ']);};

The wrapper function, which is a typical notation for node. JS, exposes the API using exports

Grunt-contrib-thmlmin Options Properties
Options option

The following option types are Boolean and the default value is False.

Removecomments

Delete HTML comments

Removecommentsfromcdata

Delete HTML annotations in <script> and <style> tags

Removecdatasectionsfromcdata

Type: Boolean

Default: False

Delete the CDTA section in the <script> and <style> tags

Collapsewhitespace

Removes whitespace from the text node in the document tree. Does not affect significant gaps, such as elements such as script,style,pre or textarea.

Collapsebooleanattributes

Delete Boolean property

<input disabled= "Disabled" > = <input disabled>

Removeattributequotes

Delete the attribute's quotation marks when the security is in the case.

Removeredundantattributes

Remove the extra attributes, like Type= "Text/javascript".

Useshortdoctype

With a short HTML5 of <! DOCTYPE html> instead of DOCTYPE

Removeemptyattributes

Delete empty (or blank) properties

Removeoptionaltags

Some elements allow for omitting tags, like </td>

Removeemptyelements

Delete empty elements

Grunt Learning Note 1 theoretical knowledge