Rapid development of grunt plug-in----compression JS template

Objective

Grunt is a front-end build tool that helps us automate the construction of front-end projects. It can be automatic to JS, CSS, HTML files, such as merging, compression and other column operations. Grunt has a lot of plugins, each plug-in implements a feature, you can use NPM name to download plug-ins, and then used them. About the use of grunt and the configuration, halogen cooking is not intended to be introduced here. This blog post focuses on how to quickly develop a custom grunt plugin. Because of the stew in the package merge code when found unable to mix HTML and JS file compression processing, for this stew also turned a lot of information, did not find the ideal solution. In the mountains of poor water at the time, the bullet-bite himself developed a simple plug-in. Share it here for you, and look for the gentlemen that is using the grunt build tool to help.

Creating plugins

1 npm install -g grunt-init install Grunt-init by command.

2 git clone git://github.com/gruntjs/grunt-init-gruntplugin.git ~/.grunt-init/gruntplugin Install the grunt plugin template by command.

3 executes in an empty directory grunt-init gruntplugin .

4 Execute npm install The command to prepare the development environment.

There are a number of options for you to fill out in the third step, which are the configuration options when initializing the plugin. Put your plugin name and GitHub to replace the local address in the other can be selected by default. Then we got a default plug-in module engineering catalog. As shown below:

Where Gruntfile.js is the dependency of the current module, what you need is to write your own plugin in the JS file in Tasks.

Writing plugins

A plugin is configurable, and you need to understand some of the execution parameters and configurations before developing the plugin. Assuming your plugin has been put into the project, then in the project's Gruntfile file must be written on the plugin to be loaded and give him parameters, tell the plugin how to deal with which files. Here is still an example of compressing JS and HTML mixed code HTML files, showing the basic configuration when we write the plugin:

Module.exports = function (grunt) {    //Build task Configuration    grunt.initconfig ({//        read Package.json content, form a JSON data        pkg: Grunt.file.readJSON (' Package.json '),        //Compressed template file        htmlmin: {            options: {                a:1,                b:2,                c:3            } ,            HTML: {                expand:true,                cwd: ' js/tpl/',                src: [' *.html '],                dest: ' js/html_min/'            }        }    });    Load the specified plug-in task    grunt.loadnpmtasks (' grunt-htmlmin ');    Default performed task    grunt.registertask (' Default ', [' htmlmin ']);};

We can see that there are a number of configuration items in the configuration file, so how do we read it in our own Htmlmin plugin? For options we can get from this.options in our own plugins, and the configuration in other HTML objects is directly referenced as the default property of the file.

/* * template-uglify * https://github.com/Charcoal Burner Party-Schonbauch/grunt-plugin * * Copyright (c) CHEN.Y * Licensed under the MIT lic Ense. */' use strict '; module.exports = function (grunt) {//* * See the grunt documentation for more information regarding TA SK//creation:http://gruntjs.com/creating-tasks//Start registering Task grunt.registermultitask (' htmlmin ', ' uglify these HTML Template ', function () {//Merge task-specific and/or target-specific options with these defaults. Here is the parameter default configuration item in the options,    A b C above will be passed in where var options = this.options ({punctuation: ', separator: ', '});    Iterate over all specified file groups.      This.files.forEach (function (f) {//Concat specified files.        var src = f.src.filter (function (filepath) {//Warn on and remove invalid source files (if Nonull is set).          if (!grunt.file.exists (filepath)) {Grunt.log.warn (' Source file ' ' + filepath + ' "not found. ');        return false;        } else {return true; }     }). map (function (filepath) {///Read file source.      return Grunt.file.read (filepath);      }). Join (Grunt.util.normalizelf (options.separator));      Handle options.src no file content string src + = options.punctuation;      Here for the added business, the contents of the file to be read compressed src = src.replace (/\r\n/g, "). Replace (/\s+/g,"). Replace (/>\s+ (?=<)/g, ' $ ');      Save the processed file to the target location dest is the path configured above/js/html_min/grunt.file.write (f.dest, SRC);      Print a success message. Grunt.log.writeln (' File ' + f.dest + ' "created. ');});};

Publishing plugins

Now, your basic plugin is complete as well. After the local test you can execute the npm publish command to publish the Grunt plugin you created npm! To verify the plug-in, we compress an HTML file with the HTML suffix name:

<!--consumption order--><script id= "Tplmenu" type= "text/template" ><footer class= "Bottom" ><%for (var i=0; i <globalConfig.menu.length; i++) {%><div class= "box <%if (Globalconfig.menu[i].sub_button.length > 0) {%>haschild<%}%>" Data-url= "<%=globalConfig.menu[i].url%>" ><div><%=globalConfig.menu[i].name%></div> <%if (Globalconfig.menu[i].sub_button.length > 0) {%><ul class= "hidelist" ><%for (var n=0; n< Globalconfig.menu[i].sub_button.length; n++) {%><a href= "<%=globalConfig.menu[i].sub_button[n].url%>" ><%=globalconfig.menu[i].sub_ button[n].name%></a><%}%></ul><%}%></div><%}%></footer></ Script>

Configure Gruntfile file CWD: ' source ', src:[' *.html '], dest: ' Target ', execute grunt command, get compressed HTML:

<!--consumption order--><script id= "Tplmenu" type= "text/template" ><footer class= "Bottom" ><%for (var i=0; i <globalConfig.menu.length; i++) {%><div class= "box <%if (Globalconfig.menu[i].sub_button.length > 0) {%>haschild<%}%>" Data-url= "<%=globalConfig.menu[i].url%>" ><div><%=globalConfig.menu[i].name%></div> <%if (Globalconfig.menu[i].sub_button.length > 0) {%><ul class= "hidelist" ><%for (var n=0; n< Globalconfig.menu[i].sub_button.length; n++) {%><a href= "<%=globalConfig.menu[i].sub_button[n].url%>" ><%=globalconfig.menu[i].sub_ button[n].name%></a><%}%></ul><%}%></div><%}%></footer></ Script>

Reference documents

Http://www.gruntjs.net/creating-plugins

Http://www.gruntjs.net/api/grunt

How to write a grunt plugin

Grunt plug-in development and mode

Rapid development of grunt plug-in----compression JS template