前言

Grunt是一款前端構建工具，幫助我們自動化搭建前端工程。它可以實現自動對js、css、html檔案的合併、壓縮等一些列操作。Grunt有很多外掛，每一款外掛實現某個功能，你可以通過npm命名去下載外掛，然後使用它們。關於grunt的使用以及配置，滷煮不打算在此介紹。本篇博文重點要講的是如何快速開發一款自定義的grunt外掛。因為滷煮在打包合併程式碼的時候發現了無法將html和js混合的檔案進行壓縮處理，為此滷煮也翻了很多資料，沒查詢到理想的解決方案。在山窮水復之時，硬著頭皮自己開發了一個簡單的外掛。在這裡分享出來給諸位，望對正在使用grunt構建工具的諸君能有所幫助。

建立外掛

1通過 npm install -g grunt-init

2通過 git clone git://github.com/gruntjs/grunt-init-gruntplugin.git ~/.grunt-init/gruntplugin 命令安裝grunt外掛模版。

3在一個空的目錄中執行 grunt-init gruntplugin 。

4執行 npm install 命令以準備開發環境。

在執行到第三步的時候會出現若干選擇讓你填寫，這些選項都是初始化外掛時的配置選項。把你的外掛名稱和github替換本地地址填上外其他的都可以選擇預設。然後我們得到了一個預設的外掛模組工程目錄。如下所示：

其中Gruntfile.js是當前模組需要的依賴，你需要的是在tasks中的js檔案中編寫自己的外掛。

編寫外掛

一個外掛是可以配置的，在開發外掛之前，你需要了解一些執行引數和配置。假設你的外掛放入到了工程中去了，那麼在該工程的gruntfile檔案中必須寫上要載入的外掛並且給他引數，告訴這個外掛怎麼樣處理哪些檔案。此處仍然以壓縮js和html混合程式碼的html檔案為例子，展示我們編寫外掛時的基礎配置：

module.exports = function(grunt) {

    // 構建任務配置
    grunt.initConfig({

        //讀取package.json的內容，形成個json資料
        pkg: grunt.file.readJSON('package.json'),
        //壓縮模板檔案
        htmlmin: {
            options: {
                a:1,
                b:2,
                c:3
            },
            html: {
                expand: true,
                cwd: 'js/tpl/',
                src: ['*.html'],
                dest: 'js/html_min/'
            }
        }

    });

    // 載入指定外掛任務
    grunt.loadNpmTasks('grunt-htmlmin');


    // 預設執行的任務
    grunt.registerTask('default', ['htmlmin']);

};

我們可以看到在配置檔案中有了若干的配置項，那麼我們在自己開發的htmlmin外掛中怎麼樣讀取呢。對於options我們可以在自己的外掛中用this.options獲取到，其他html物件中的配置是直接作為檔案的預設屬性而引用的。

/*
 * template-uglify
 * https://github.com/燒炭黨人-申包胥/grunt-plugin
 *
 * Copyright (c) 2016 chen.y
 * Licensed under the MIT license.
 */

'use strict';

module.exports = function(grunt) {

  // Please see the Grunt documentation for more information regarding task
  // creation: http://gruntjs.com/creating-tasks
//開始註冊任務
  grunt.registerMultiTask('htmlmin', 'uglify these html template', function() {
    // Merge task-specific and/or target-specific options with these defaults.此處即為options中的引數預設配置項，上面的a b c都會傳入其中
    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 was 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未檔案內容的字串
      src += options.punctuation;
      //此處為新增的業務，將讀取到的檔案內容壓縮
      src = src.replace(/\r\n/g, '').replace(/\s+/g, ' ').replace(/>\s+(?=<)/g, '$1');
      // 將處理後的檔案存入目標位置 dest是上文中配置的路徑/js/html_min/
      grunt.file.write(f.dest, src);

      // Print a success message.
      grunt.log.writeln('File "' + f.dest + '" created.');
    });
  });

};

釋出外掛

現在，你的基本的外掛以及完成。通過本地測試後你可以執行 npm publish命令將你建立的 Grunt 外掛提釋出npm！為了檢驗外掛，我們將一個html為字尾名的html檔案進行壓縮：

<!--消費訂單-->
<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>

配置gruntfile檔案cwd:'source',src:['*.html'], dest:'target',執行grunt命令，得到壓縮後的html:

<!--消費訂單--><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>

參考文件