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 来安装这个模块进行使用。