Configuring Grunt for CSS, JS checking, merging, and compression

Now that code merging and compression has become a prerequisite for front-end people, here's a grunt tool. Grunt is a popular tool in the world, its home is http://www.gruntjs.net

This is a Chinese site, there are documents to refer to. But does the document look like it hurts? A word: See not very understand Ah!

Okay, no more nonsense, direct hair installation steps and precautions, are sad research come out of ah ...

This article describes how to install your Mac. The Windows method is similar, when I study a little bit and then send it up

First of all, to install Nodejs,grunt is dependent on node drop. Download the Nodejs version for your PC on www.nodejs.org. If the website is harmonious, the way you understand.

When node. JS is installed, enter it on the command line

Node-v

Now the version of node will automatically install NPM in the installation process, NPM for a Nodejs module management

Similarly, on the command line, if a version number appears, the installation is successful.

Npm-v

Ok,nodejs has been installed, before downloading the installation grunt, we need to build a file directory tree, like the following structure, for better hierarchical relationships and more convenient operation

The structure in Webstorm is this:

Where the gruntproject contains all the files we want to use.

Gruntfile.js is our own definition, this file is used to configure grunt

Package.json This file is a record of which plugins are downloaded and configured in Gruntfile.js, this will be explained in detail later

src folder is placed in a CSS folder, a JS folder, CSS folder inside the presentation of the CSS file, JS folder is the demo with JS file.

The Dist folder is the CSS and JS files that are placed after compression

Lib folder to put HTML files

The complete file structure is as follows:

What do you put in that Package.json? Right, let us configure the item, just start, if you use the editor is not so smart, you can only knock the following content into the file.

OK, everything is ready, start downloading grunt command line!

The grunt command line (CLI) is installed in the global environment, so the command is written like this!

sudo nam install-g grunt-cli

After you click Enter, type your Mac's password and start the installation. When the installation is finished, enter which Gruntproject folder we created

CD Grunt/gruntproject

At this time, you can install the grunt, then the mystery of grunt to untie

Input

Nam Install grunt  --save-dev

Then click Enter

Did you find anything? The installation is successful. The warning in the installation do not need to ignore it. At this point, we look back at the tree catalogue,

A Node_modules folder appears. Let's open it and we'll know what's inside. This fully indicates that the grunt has been successfully installed.

We didn't say anything about the--save-dev in the instructions.

This sentence is related to the Package.json of this document.

Look at this file again.

I? Automatically add the grunt version number. Yes, that's what--save-dev is for.

At this point, in the src below the CSS and JS in a concat folder, for storing the merged files

Now also need a few plugins: JS, CSS files linked into a file plug-in, compressed plug-ins, error checking plug-ins

Installation method,

NPM Install Grunt-contrib-concat--save-dev

Enter install, install next after completion, and so on

NPM Install Grunt-contrib-csslint--save-dev

NPM Install Grunt-contrib-cssmin--save-dev

NPM Install Grunt-contrib-jshint--save-dev

NPM Install grunt-contrib-uglify--save-dev

NPM Install Grunt-contrib-watch--save-dev

When we've finished loading the plugins, we'll see Package.json.

All plug-ins have a version number. Next, the gruntfile.js needs to be configured

Module.exports =function(grunt) {//initializing the grunt configurationGrunt.initconfig ({//get information on Package.jsonPkg:grunt.file.readJSON (' Package.json '),        //configuration information for the concat pluginconcat: {options:{stripbanners:true,//allow output header information when mergingBanner: '/*!<%= pkg.name%>-<%= pkg.version%>-' + ' <%=grunt.template.today ("YYYY-MM-DD")%> */'}, cssconcat:{src:[' Src/css/css1.css ', ' src/css/css2.css '], dest:' src/css/concat/<%= pkg.name%>-<%= pkg.version%>.css '//dest is the destination output}, jsconcat:{src:' Src/js/*.js ', dest:' Src/js/concat/<%=pkg.name%>-<%= pkg.version%>.js '            }        },        //Compress CSScssmin:{options:{stripbanners:true,//allow output header information when mergingBanner: '/*!<%= pkg.name%>-<%= pkg.version%>-' + ' <%=grunt.template.today ("Yyyy-mm-dd")%> */\n '}, build:{src:' Src/css/concat/<%=pkg.name%>-<%=pkg.version%>.css ',//compression is to compress the mergedDest: ' dist/css/<%= pkg.name%>-<%= pkg.version%>.min.css '//dest is the destination output            }        },        //Compression JSuglify:{options:{stripbanners:true,//allow output header information when mergingBanner: '/*!<%= pkg.name%>-<%= pkg.version%>-' + ' <%=grunt.template.today ("Yyyy-mm-dd")%> */\n '}, build:{src:' Src/js/concat/<%=pkg.name%>-<%=pkg.version%>.js ',//compression is to compress the mergedDest: ' dist/js/<%= pkg.name%>-<%= pkg.version%>.min.js '//dest is the destination output}}, jshint:{options:{jshintrc:'. Jshint '}, build:[' Gruntfile.js ', ' Src/js/*js ']}, csslint:{options:{csslintrc:'. Csslint '}, build:[' Src/css/*.css ']        },        //Watch Automationwatch:{build:{files:[' Src/js/*.js ', ' src/css/*.css '], tasks:[' Jshint ', ' csslint ', ' concat ', ' cssmin ', ' uglify '], Options:{spawn:false}            }        }    }); //tell Grunt we will use the pluginGrunt.loadnpmtasks (' Grunt-contrib-concat '); Grunt.loadnpmtasks (' Grunt-contrib-cssmin '); Grunt.loadnpmtasks (' Grunt-contrib-uglify '); Grunt.loadnpmtasks (' Grunt-contrib-jshint '); Grunt.loadnpmtasks (' Grunt-contrib-csslint '); Grunt.loadnpmtasks (' Grunt-contrib-watch '); //tell grunt what we need to do when we enter grunt at the terminalGrunt.registerinittask (' Default ', [' jshint ', ' csslint ', ' concat ', ' cssmin ', ' uglify ', ' Watch ']);//The grammar check first, if there is no problem, then merge, and then compress};

The above notes are written clearly, so copy them to your gruntfile.js.

Ah, good tired, blog wrote for one hours, and study this grunt also spent a few days of my time, no way, now do not understand Nodejs ah.

Formal compression before the last step: Create a new two files, write content, these two files are used for CSS and JS code check configuration. We are interested to check from the Internet, there is not much to say, everyone with me this is no problem. One is. Csslint, one is. jshint

Note that these two files are. At the beginning, specifically why not yet to study, the file is in text format, and Gruntfile is the same level. Gruntproject their upper-level

Configuration of the. csslint file:

{    "Adjoining-classes":false,    "Box-sizing":false,    "Box-model":false,    "Compatible-vendor-prefixes":false,    "Floats":false,    "Font-sizes":false,    "Gradients":false,    "Important":false,    "Known-properties":false,    "Outline-none":false,    "Qualified-headings":false,    "Regex-selectors":false,    "Shorthand":false,    "Text-indent":false,    "Unique-headings":false,    "Universal-selector":false,    "Unqualified-attributes":false}

. jshint File Configuration

{    "Boss":false,    "Curly":true,    "Eqeqeq":true,    "Expr":true,    "Immed":true,    "Newcap":true,    "Noempty":true,    "Noarg":true,    "Undef":true,    "RegExp":true,    "Browser":true,    "Devel":true,    "Node":true}

Ultimately the ultimate final tree structure:

At this point, all the configuration is complete, we can do code inspection, merging, compression ~ ~ ~

Everyone in the JS file, the CSS file to write some content, see if can merge compression success?

command is

Grunt

then enter.

At this point, you will find that the world is at your feet! Another skill, the sense of accomplishment in my heart is beyond words. Come on, everybody!

Configuring Grunt for CSS, JS checking, merging, and compression