grunt插件製做

插件內容：在文件的頂部加入字符畫。

一個從無到有的項目，因此咱們須要用yeoman來初始化項目。上yeoman官網的generator收納頁搜索gruntplugin。

安裝這個generator:

npm install -g generator-gruntplugin //generator的命名規則：genetator-generator的名字

生成項目代碼

yo gruntplugin grunt-buddha //yo generator的名字 項目的名字

而後cmd會出現項目的配置信息，自定義輸入,生成package.json。生成的項目目錄如圖：

 

 

 

 

 

 

 

 

 

插件代碼存放在tasks的文件夾中，tasks文件名不能更改。

下載字符畫

在網上找幾幅字符畫保存到tesks下的assert目錄中，這裏我找了一個綿陽和馬。

     

 

gruntplugin生成的核心工做代碼

 

'use strict';//使用es5嚴格模式

module.exports = function (grunt) { //"warp"函數 
  //grunt.registerMultiTask：容許爲一個插件配置多個target,'buddha_Liu':插件的名字,'The best Grunt plugin ever.'：插件的描述,fn：插件核心的功能

  grunt.registerMultiTask('buddha_Liu', 'The best Grunt plugin ever.', function () {

 //設置插件屬性的默認值，若是插件定義了punctuation則覆蓋，有點想jquery的extend方法。
 //這裏的this是指在gruntfile中配置的配置屬性。

    var options = this.options({
      punctuation: '.',
      separator: ', '
    });

    // gruntfile配置中的file文件格式，不論以什麼形式寫，都將轉換成文件數組形式的格式，eg:
　　// files:[
　　//　　　　{
　　//　　　　　　src:['src/aa.js','src/bb.js'],
　　//　　　　　　dest:['src/aa.min.js','src/bb.min.js']　　　　　
　　//　　　　}
　　//　　　]

    //這裏的this.files是包含src,dest的object鍵值對數組。
　　//forEach是ECMASCript6新的語法，遍歷數組回調的形參中有三個參數分別是(value,index,arr)

    this.files.forEach(function (file) {
      // 鏈接指定文件
　　　　//參數和foreach類似。
　　　　//filter也是必需ECMASCript6新的語法。回調函數一個接受最多三個參數的函數。 對於數組中的每一個元素，filter 方法都會調用 callbackfn 函數一次
　　　　//filter的返回值是一個包含回調函數爲其返回 true 的全部值的新數組。 若是回調函數爲 array1 的全部元素返回 false，則新數組的長度爲 0。      
　　　　
　　　　//不論配置裏面的src是什麼，這裏的file.src會被轉換成數組的形式
　　　　var src = file.src.filter(function (filepath) {

　　　　// 用grunt提供的api查看這個文件是否存在
        if (!grunt.file.exists(filepath)) {
　　　　　　//不會中斷grunt Task
          grunt.log.warn('Source file "' + filepath + '" not found.');
          return false;
        } else {
          return true;
        }
      }).map(function (filepath) {

　　　　//filter也是必需ECMASCript6新的語法,參數和forEach類似，操做數組中的每一個元素，返回一個新的數組

        return grunt.file.read(filepath);
      }).join(grunt.util.normalizelf(options.separator)); //grunt.util.normalizelf是grunt的API的一個方法，用來跨系統轉換換行符

 　　　src += options.punctuation; // 加上結尾符號

　　　//這裏的file.dest會是一個字符串的值，不會像file.src那樣是個arr
　　　//寫入到目標文件中
      grunt.file.write(file.dest, src);

      // 在控制檯給一個提示信息。
      grunt.log.writeln('File "' + file.dest + '" created.');
    });  });

};

 改造代碼，實現咱們的在文件頂部加入字符化功能

 

第一步:設計gruntfile.js的配置內容。

'use strict'; module.exports = function
  require('load-grunt-tasks')(grunt);

  grunt.initConfig({
//
    buddha_Liu: {
　　　　//由於咱們是在原有文件的基礎上，添加字符畫，因此咱們這裏只須要一個src就能夠了
　　　　//插件的配置參數
　　　　options:{
　　　　　　who:'sheep', //須要鏈接哪一個字符畫，這裏有horse和sheep兩個選項
　　　　　　comentSymbol:"//" 字符畫前面的註釋符號
　　　　},
      dist:{
　　　　　　src:['test/fixtures/*.js'] //須要鏈接字符畫的文件
　　　　}
    }
  });

//
  grunt.loadTasks('tasks');

  grunt.registerTask('test', [ 'buddha_Liu', ]);

};

第二步：改造Tasks目錄下的插件js文件

'use strict';//使用嚴格模式 var path = require("path");//加載nodeJS中對路徑操做的path模塊

module.exports = function (grunt) {

  grunt.registerMultiTask('buddha_Liu', 'The best Grunt plugin ever.', function () {

    // 替換插件默認項
    var options = this.options({
        who:'sheep', //sheep,horse
        commentSymbol:"//"
    });
　　
　　//字符畫路徑地圖

    var commentTextMap={
       "horse":"assert/horse.txt",
       "sheep":"assert/sheep.txt"
    }
    //正則匹配表達式，不能屢次添加相同字符畫到一個文件中 // var  testRegexMap = {
    //   "sheep":/_.-----..,-'   (`"--^ /,
    //    "horse":/(   |   y;- -,-""'"-.\   \/   /
    // }
   
   //這裏的__dirname是nodeJS環境中的全局變量用來表示當前運行代碼所在的目錄
　　//用來找到字符畫的路徑

    var commentFilePath=path.join(__dirname,commentTextMap[options.who]);
   
 //讀取字符畫的內容 var commentFileText=grunt.file.read(commentFilePath);
   
  //拿到字符畫的每一行內容，這裏的

　　var lineComment = commentFileText.split(grunt.util.normalizelf("\r\n"));
   //給每一行內容加上註釋符號
    lineComment = lineComment.map(function(x){
       return options.commentSymbol+x;
    })
  //組成一個新的文件
    commentFileText=lineComment.join(grunt.util.normalizelf("\r\n"));

    // 遍歷gruntfile配置的src文件列表
    this.files.forEach(function (file) {
     
       file.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) {
        // 讀取源文件的內容，在鏈接上字符畫的內容
         var originContent = grunt.file.read(filepath),
               newFileContent = commentFileText + grunt.util.normalizelf("\r\n") + originContent;
                //不能重複添加相同字符畫到一個文件中 // if(testRegexMap[options.who].test(originContent)){
                //   return;
                // }
　　　　　　　　　//將鏈接好後的文件，重寫寫入目標文件，完成目標

               grunt.file.write(filepath,newFileContent)
      })

      // 打印消息，提示任務完成.
      grunt.log.writeln('File "' + file.dest + '" created.');
    });
  });

};

至此,完成grunt插件的製做，而後能夠經過git上傳到github中，而後在發佈成npm模塊，下次使用，能夠直接用npm install 來安裝這個模塊進行使用。