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.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‘]);
时间: 2024-11-09 00:00:03

Grunt常用插件及示例说明的相关文章

grunt常用插件的使用

Grunt 作为前端自动化构建工具,我主要使用到的是其中对css的less预处理器的转换,图片的压缩,js,css文件的合并压缩以及实时监测的插件. 好处是:节省带宽流量,提高了代码的安全性. 使用Grunt的步骤如下: 1.安装:先要 安装 Node.js, 然后 安装 Grunt(打开控制台输入npm install -g grunt-cli进行全局安装). 2.创建自己的项目文件(此处用到了bootstrap配合grunt使用): 注意: Gruntfile.js 是用来配置和定义任务并加

Grunt 常用插件

插件名称 功能描述 grunt-contrib-uglify 用于JavaScript代码的压缩与混淆 grunt-contrib-jshint 用于JavaScript代码的语法验证 grunt-contrib-watch 实时监控文件变化,并调用配置好的任务 grunt-contrib-clean 清除文件或文件夹 grunt-contrib-concat 用于合并文件 grunt-contrib-copy 用于文件或文件夹的拷贝 grunt-contrib-cssmin CSS代码压缩 g

grunt 常用插件有哪些?

作者:顾城链接:https://www.zhihu.com/question/21917526/answer/19747259来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处. (GruntJS--的介绍和使用)(https://segmentfault.com/a/1190000000353114) Grunt plugin: Plugins - Grunt: The JavaScript Task Runner CSS gruntjs/grunt-contrib-

Sublime 常用插件简介

Sublime   常用插件简介 emmet: 前端必备神器.花个十几分钟学下Emmet语法 ,就可以极大提高web开发者HTML和CSS工作效率啦.一句话,牛逼---必备 CSS3: CSS3语法高亮.CSS语法提示,但是浏览器的私有属性不会高亮.     -----必备 CSS Extended Completions: 提示css文件(包括关联进来的)中的类名,非常好用. JavaScript Completions javascript原生语法提示, jQuery 提供了jQuery的A

Grafana、collectd 和 InfluxDB 打造酷炫监控系统(四)常用插件介绍和自定义数据篇

一.常用插件介绍 获取指定端口的连接状态ESTABLISHED.CLOSE_WAIT.LISTEN等 tcpconns: <Plugin tcpconns> ListeningPorts false LocalPort "80" RemotePort "80" </Plugin> 获取Nginx的状态 nginx: <Plugin nginx> URL "http://test.tt.com/NginxStatus&qu

转 Sublime text2 常用插件集锦

No.01 – Emmet Emmet 是一个前端开发的利器,其前身是Zen Coding.它让编写 HTML 代码变得简单.Emmet 的基本用法是:输入简写形式,然后按 Tab 键. 关于 Emmet 的更多用法,请看官方文档,这份速查表可以帮你快速记忆简写形式. No.02 – SublimeLinter SublimeLinter 是一个代码校验插件,它可以帮你找出错误或编写不规范的代码,支持 C/C++.CoffeeScript.CSS.Git Commit Messages.Haml

CDN公共库、前端开发常用插件一览表(VendorPluginLib)

=======================================================================================前端CDN公共库====================================================================================== 为什么使用前端CDN公共库: 使用前端CDN增加网页的并行载入速度,减少本地服务器的负担,节省流量.我们把静态资源放到自己的服务器上面固

Sublime text2 常用插件集锦

No.01 – EmmetEmmet 是一个前端开发的利器,其前身是Zen Coding.它让编写 HTML 代码变得简单.Emmet 的基本用法是:输入简写形式,然后按 Tab 键.关于 Emmet 的更多用法,请看官方文档,这份速查表可以帮你快速记忆简写形式. No.02 – SublimeLinterSublimeLinter 是一个代码校验插件,它可以帮你找出错误或编写不规范的代码,支持 C/C++.CoffeeScript.CSS.Git Commit Messages.Haml.HT

Sublime Text 3 常用插件以及安装方法(vue 插件)(转)

使用Package Control组件安装 也可以安装package control组件,然后直接在线安装:按Ctrl+` 调出console粘贴以下代码到底部命令行并回车: { import urllib.request,os; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_o