Grunt常用插件及示例说明

Posted 奋飛

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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)从指定文件夹合并svghttps://github.com/FWeinb/grunt-svgstore
grunt-csscomb(CSS)格式化https://github.com/csscomb/grunt-csscomb
grunt-contrib-less(CSS)将Less编译成csshttps://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.html1.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常用插件及示例说明的主要内容,如果未能解决你的问题,请参考以下文章

grunt 常用插件有哪些?

grunt -- javascript自动化工具

Grunt项目构建-插件学习

Visual Studio Code 常用插件整理

Maven 插件 maven-tomcat7-plugin - 常用命令及配置

grunt两小时入门