Rookie Advanced--grunt

In order to guarantee the author's copyright in this statement this part is excerpted from http://yujiangshui.com/grunt-basic-tutorial/another, reference article
http://www.tuicool.com/articles/yABV73 and official English document Http://gruntjs.com/plugins start learning Grunt

It is a tool framework, with many plugins extending its functionality.

is a set of front-end automation tools, Nodejs-based command-line tools, typically used to:

① Compressed Files

② Merging files

③ Simple Grammar Check

Grunt is based on node. JS and is developed with JS so that node. JS enables cross-system, cross-platform desktop operations, such as file manipulation and more. In addition, Grunt and its plugins, as a package, can be managed with NPM installation.

So the Package.json project file generated by NPM can record the Grunt plug-in used in the current project, and Grunt will call gruntfile.js the file, parse the task within it and perform the appropriate action.

If you are unfamiliar with the nouns of node. js and NPM, it is recommended to search for them first, as the following commands will cover them, but this article will not be too much.

Installing Grunt

Grunt relies on node. js so make sure you have node. js installed before installing. (Can be downloaded on the official website) and 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

It is important to note that because the-G command is installed to the global, it may involve system-sensitive directories, and if you use Windows, you may need administrator privileges, and if you use OS X/linux, you may need to add the sudo command.

Here we create a new project directory, and create a new file, here I prepared a very simple project, put on Github, the following operation will be done here, you can download or clone down: https://github.com/yujiangshui/gruntxx

Generate Package.json File

This Package.json file is actually node. js to describe a project file in JSON format. Generating this file is super simple and it is recommended to generate it interactively with the command line:

Open the command line, cd gruntxx under the folder, enter the instructions npm init , then come out a lot of information, and then start to fill out the project name, fill in and then enter. Actually here you all the way to go down also no harm, but suggest you carefully fill, do not understand skip good.

Once you've filled it out, you'll find the Package.json file generated when you look at the directory, so it's ready to build.

is actually a file, you think this way trouble, you can create a new file, and then copy the code similar to the following, change the corresponding options, save as Package.json file can be:

{ "name": "my-project-name", "version": "0.1.0", "devDependencies": { } }

Finally, I generated the following code:

However, we have not yet installed Grunt and related task plugins in the project file.

Install Grunt and required plugins

As far as this example project is concerned, I'm going to let Grunt help implement the following features: checking each JS file syntax, merging two JS files, compressing the merged JS file, compiling the SCSS file, and creating a new local server listener file changes automatically refreshes the HTML file.

That's almost all, depending on the requirements of these tasks, you need to use:

• 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

They are both named and documented, because these are the more commonly used plugins that are officially available. These plugins are both NPM managed packages, such as grunt-contrib-concat-npm you can also see usage on this.

Below we will install these plugins in this project, execute the command:

npm install grunt --save-dev

Indicates that grunt is installed through NPM to the current project with the-save-dev parameter added to the Package.json file for the newly installed items. Don't believe you open the Package.json file look, is not much

"devDependencies": { "grunt": "^0.4.5" }

Yes, this means that the current project relies on grunt, followed by its version, we don't have to worry about it. If the-save-dev parameter is not added at the time of installation, it will not appear here and you will need to add it yourself.

Below we come to install Grunt plug-in, of course, do not need a installation, too much trouble, we can:

npm install --save-dev grunt-contrib-concat grunt-contrib-jshint grunt-contrib-sass grunt-contrib-uglify grunt-contrib-watch grunt-contrib-connect

Waiting for a bunch of messy download status, we put grunt and related plug-ins are installed, do not believe to see if there is more than a node_modules folder? Open and look, inside is the plugin we just installed.

Syntax for configuring Gruntfile.js

Plug-ins are loaded, so start writing tasks! Since it is necessary for the program to read the execution, there must be some grammatical specification, the following is simple to say:

First of all understand that this is a JS file, you can write arbitrary JS code, such as declaring an object to store a task to write the parameters, or a variable as a switch and so on.

Then, all the code will be wrapped in

module.exports = function(grunt) { ... };

Inside. No, why not.

In the code here, except that you write a mess of JS, and Grunt related to the main three code: Task Configuration Code , plug-in loading code , task registration code .

As the name implies, these three pieces of code, the task configuration code is to invoke the plug-in configuration to perform the task and implementation of the function, plug-in loading code is the need to load the plug-in, the task registration code is to register one task, which contains the task configuration code just written earlier.

In this way, you can use grunt to execute a registered task so that the required plug-in is called according to the task configuration code to perform the appropriate operation.

Here's a look at the three pieces of code.

Task Configuration Code

For example, the following code:

As can be seen, the specific task configuration code in the object format in the grunt.initConfig function, wherein the first write a pkg: grunt.file.readJSON(‘package.json‘) function is to read the Package.json file, and the information inside to get out, easy to use in later tasks (for example, the following

Rookie Advanced--grunt