Shallow language: Grunt Chinese web: http://www.gruntjs.net/
Step One: Grunt relies on node. js so make sure you have node. js installed before you install it. Then start installing Grunt.
In fact, the installation is not Grunt, but GRUNT-CLI, which is the Grunt of the command line, so you can use the Grunt command to execute a task defined in Gruntfile.js in a project. Note, however, that GRUNT-CLI is just a command-line tool to execute, not Grunt the tool itself.
Installing GRUNT-CLI requires NPM, using the following line to install GRUNT-CLI at the global scope, in other words, you can execute Grunt commands from anywhere:
NPM install-g GRUNT-CLI
Step Two : Enter a folder you created, execute NPM init, and generate the Package.json file.
Package.json should be placed in the root directory of the project, with Gruntfile.js in the same directory >
Step three : Install the plugin to execute the command we need:
- Merging files: Grunt-contrib-concat
- Grammar checker: Grunt-contrib-jshint
- SCSS Compilation: Grunt-contrib-sass
- Compressed files: grunt-contrib-uglify
- Monitor file changes: Grunt-contrib-watch
- Establish local server: Grunt-contrib-connect
Initial folder: Initial directory Status: Package.json Installing grunt npm install grunt--save-dev **–save-dev says it will add the stuff you just installed to the Package.json file. Other files are also such commands: npm Install grunt-contrib-jshint--save-dev
What plugins you need to go to GitHub to download, there are a lot of interesting plugins:Once the installation is complete, you can see it in the project since the JSON file:directory structure:
Fourth Step : View Grunt versionGrunt--version
Fifth Step : Create a Gruntfile.js file to execute grunt the commands we needfile Format:
Sixth step :Action 1: Merging Filesmerge JS files under A.js and B.js to a new filegruntfile.js Content:run: Grunt ConcatjsRun successfully! To view a catalog file:generate Aandb.js, and the contents of the file are separated by ";" ;action two: Compress, check filegruntfile.js Content:jshint Check has been an error! because the second line in, has been missing a semicolon! Remove the semicolon also has been an error, said at the time of merging files used to separate the ";" It's not needed! Haloonce removed, the jshint is checked. To view a catalog file:
Seventh Step : This is the actual project? Each time manually? Of course not! Grunt also has an artifact: watch!operation One: Listen to an HTML file under Gruntdemo and add listening! gruntfile.js Content:Start monitoring:Change page: Constantly change the page file and save the time. The console will print continuously. operation two: monitor JS file change, and when changed, Carry on jshint check and compress. Execute grunt watchjsDocument Directory:after modifying the shop.js file, the command to check and compress is performed. we can also use time as a stamp.
Eighth Step : Upload our files to GitHubPull FirstPush againSee GitHub, it's up. Done!
Grunt using-v1.0
