首页 > 代码库 > Grunt常用插件及示例说明
Grunt常用插件及示例说明
下述给出了常用Grunt插件,并列举了部分插件示例:
插件名称 | 说明 | Github地址 |
---|---|---|
grunt-contrib-clean | 清空文件和文件夹 | https://github.com/gruntjs/grunt-contrib-clean |
grunt-contrib-copy | 复制文件和文件夹 | https://github.com/gruntjs/grunt-contrib-copy |
grunt-contrib-concat | 连接、合并文件 | https://github.com/gruntjs/grunt-contrib-concat |
grunt-svgstore | (svg)从指定文件夹合并svg | https://github.com/FWeinb/grunt-svgstore |
grunt-csscomb | (CSS)格式化 | https://github.com/csscomb/grunt-csscomb |
grunt-contrib-less | (CSS)将Less编译成css | https://github.com/gruntjs/grunt-contrib-less |
grunt-contrib-cssmin | (CSS文件)压缩 | https://github.com/gruntjs/grunt-contrib-cssmin |
grunt-contrib-uglify | (JS文件)压缩 | https://github.com/gruntjs/grunt-contrib-uglify |
grunt-contrib-htmlmin | (HTML文件)压缩 | https://github.com/gruntjs/grunt-contrib-htmlmin |
grunt-filerev | 文件内容hash(MD5) | https://github.com/yeoman/grunt-filerev |
grunt-filerev-replace | 替换通过grunt-filerev的文件引用 | https://github.com/solidusjs/grunt-filerev-replace |
grunt-text-replace | (文本文件)使用字符串、正则、函数替换内容 | https://github.com/yoniholmes/grunt-text-replace |
grunt-html-build | (HTML文件)增加js、css、模板引用,移除调试代码 | https://github.com/spatools/grunt-html-build |
grunt-autoprefixer | 添加前缀依赖Can I Use数据库 | https://github.com/nDmitry/grunt-autoprefixer |
grunt-parallel | 并行运行命令和任务 | https://github.com/iammerrick/grunt-parallel |
grunt-contrib-watch | 文件发生改变运行任务 | https://github.com/gruntjs/grunt-contrib-watch |
load-grunt-tasks | 使用通配符加载所有任务 | https://github.com/sindresorhus/load-grunt-tasks |
time-grunt | 显示运行任务的执行时间 | https://github.com/sindresorhus/time-grunt |
Gruntfile.js 骨架
‘use strict‘;
module.exports = function(grunt){
// 配置信息
var config = {
path: __dirname,
src: __dirname + ‘/test/src‘,
dest: __dirname + ‘/test/dest‘
};
grunt.initConfig({
config: config,
pkg: grunt.file.readJSON(‘package.json‘)
});
/* 加载所有插件 */
require(‘load-grunt-tasks‘)(grunt);
/* 统计各个任务执行时间 */
require(‘time-grunt‘)(grunt);
};
示例:将1.html文件中的var requestAddress = "";
替换为var requestAddress = "http://blog.csdn.net/ligang2585116";
// grunt-text-replace 使用字符串、正则、函数替换文本内容
// grunt.initConfig({})中增加Task
replace: {
requestAddress: {
src: [‘<%= config.src %>/1.html‘],
overwrite: true,
replacements: [{
from: ‘var requestAddress = "";‘,
to: ‘var requestAddress = "http://blog.csdn.net/ligang2585116";‘
}]
}
}
示例:给1.js增加md5戳,并替换1.html对1.js引用
// grunt-filerev 文件加MD5摘要
// grunt-filerev-replace 替换通过grunt-filerev的文件引用
// grunt.initConfig({})中增加Task
filerev: {
options: {
algorithm: ‘md5‘,
length: 8
},
js: {
src: ‘<%= config.src %>/1.js‘
}
},
filerev_replace: {
options: {
assets_root: ‘<%= config.src %>/‘,
views_root: ‘<%= config.src %>/‘
},
js: {
src: ‘<%= config.src %>/1.html‘
}
}
// 注册任务
grunt.registerInitTask("js-md5", "add md5 for js", [‘filerev:js‘, ‘filerev_replace:js‘]);
Grunt常用插件及示例说明
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。