如何编写grunt 插件

也许现有的grunt plugin无法满足你的需求,那就只能自己写一个plugin。

准备工作:

一、 当然首先是查一下plugin的API文档及模板。grunt的API比较少,但是已经包含了大部分的基础功能了。如常用的文件读取,log输出等。

相关前期文档可以查看:

http://www.gruntjs.net/docs/creating-plugins/ 
http://www.gruntjs.net/api/grunt.file/

二、 创建项目环境。

看完文档之后,接下来就得开始编写项目了,还好grunt已经为我们准备了标准的plugin模板,我们通过git命令下载回来后直接修改。然后就可以进入插件开发。

项目创建流程如下:

vIfyie

1、通过 npm install -g grunt-init 命令安装 grunt-init 。 
2、通过 git clone git://github.com/gruntjs/grunt-init-gruntplugin.git ~/.grunt-init/gruntplugin 命令安装grunt插件模版。 
3、在一个空的目录中执行 grunt-init gruntplugin 。 
执行这一步时,会出现如下问答式的内容。根据自己需要填写好就会创建出相应的项目所需文件。 
当然,如果你还不清楚这些怎么填写,也可以随便写一下,日后也可以直接修改配置文件。 

4、执行 npm install 命令以准备开发环境。

好了,现在可以开始grunt plugin的书写了。

140531151439

以下是我新建的一个插件目录结构。 

在task文件夹里编写你需要的任务,其中常用的一个函数接口是 grunt.files

以下是我刚写是timestamp 插件,看代码也许比文字更容易理解,呵呵。插件的项目地址: https://github.com/baofen14787/grunt-timestamp-file

/*
 * grunt-timestamp-file
 * https://github.com/baofen14787/grunt-timestamp-file
 *
 * Copyright (c) 2014 hugo
 * Licensed under the MIT license.
 */
var crypto = require('crypto');

'use strict';

module.exports = function (grunt) {

	// Please see the Grunt documentation for more information regarding task
	// creation: http://gruntjs.com/creating-tasks

	grunt.registerMultiTask('timestamp_file', 'grunt create timestamp file in project', function () {

		// Merge task-specific and/or target-specific options with these defaults.
		//默认参数
		var options = this.options({
			punctuation	 :   '.',
			separator	   :   '\n ',
			urlRoot		 :   '',						  //生成的页面片地址URL根目录地址
			timestampType   :   'md5',  //md5 || time
			timestampFormat :   'yymmddhMMss'
		});

		function ttType(filepath){
			var timeString,
				sourcedata;
			if(options.timestampType == 'md5'){
				sourcedata = grunt.file.read(filepath);
				timeString = md5(sourcedata, options.timestampType).substring(0,10);  //MD5太长 截短一点
			}else{
				timeString = grunt.template.today(options.timestampFormat)
			}
			return timeString;
		}

		function md5(content, encoding) {
			return crypto.createHash('md5').update(content, encoding).digest('hex');
		}

		/**
		 * 创建script标签
		 * @param filepath
		 * @param attr
		 * @returns {string}
		 */
		function createScript(filepath,attr){
			var version = ttType(filepath),
				url = options.urlRoot + filepath;

			var str = '<script src="'+ url + '?v='+ version +'" ';
			if(typeof attr === 'object'){
				for(var i in attr){
					str += i + '="' + attr[i] + '" ';
				}
			}
			str += '></script>';
			return str;
		}

		function createStyle(filepath,attr){
			var version = ttType(filepath),
				url = options.urlRoot + filepath;
			var str = '<link rel="stylesheet" type="text/css" media="screen" href='+ url + '?v='+ version +'" ';
			if(typeof attr === 'object'){
				for(var i in attr){
					str += i + '="' + attr[i] + '" ';
				}
			}
			str += '/>';
			return str;
		}

		function createTimesTamp(filepath,attr){
			//判定文件类型
			var fileTyle = filepath.split('.'),
				tag;
			attr = attr || options.attr;
			fileTyle = fileTyle[fileTyle.length -1];

			switch (fileTyle){
				case 'js':
					tag = createScript(filepath,attr);
					break
				case 'css':
					tag = createStyle(filepath,attr);
			}
			return tag;
		}

		console.info('filepath:', this.files)
		//开始读取文件
		this.files.forEach(function (f) {

			// Concat specified files.
			var src = f.src.filter(function (filepath) {
				//如果文件不存在 则 提示警告
				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 createTimesTamp(filepath);
				}).join(grunt.util.normalizelf(options.separator));

			// Handle options.
			src += options.punctuation;

			// Write the destination file.
			grunt.file.write(f.dest, src);

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



};

三、最后,插件编写完后就开始发布了。

官网的发布写的比较简单,直接就是 npm pulish .但实际上直接运行这个命令很可能报错。

正确的发布顺序是:

# 初始化 package.json
C:\GitHub\grunt-timestamp-file> npm init
 
# 验证你在 npmjs.org 上的账号
C:\GitHub\grunt-timestamp-file> npm adduser
 
# 发布
C:\GitHub\grunt-timestamp-file> npm publish .

上面三部是初次发布插件的步骤。当然,在发布前需要你先去npmjs.org上注册一个账号。

如果你以后修改了代码,然后想要同步到 npm 上的话请修改 package.json 中的 version 然后再次 publish

最后,如果你报错 
no_perms Private mode enable, only admin can publish this module

那么可能是你用了国内的镜像地址了,只需要重新把地址注册回npmjs即可。npm config set registry http://registry.npmjs.org

发表评论

电子邮件地址不会被公开。 必填项已用*标注