来源：蜘蛛抓取(WebSpider)
时间：2016-01-01 04:11
标签：
grunt 插件列表
收藏，993 浏览
问题对人有帮助，内容完整，我也想知道答案
问题没有实际价值，缺少关键内容，没有改进余地
请问各位前端同仁，grunt 有哪些比较好的插件？
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
grunt-autoprefixer
grunt-concurrent
grunt-contrib-clean
grunt-contrib-coffee
grunt-contrib-concat
grunt-contrib-connect
grunt-contrib-copy
grunt-contrib-cssmin
grunt-contrib-htmlmin
grunt-contrib-imagemin
grunt-contrib-jasmine
grunt-contrib-jshint
grunt-contrib-sass
grunt-contrib-uglify
grunt-contrib-watch
grunt-mocha
grunt-modernizr
grunt-newer
grunt-sass
grunt-svgmin
grunt-usemin
grunt-wiredep
jshint-stylish
load-grunt-tasks
time-grunt
官方推荐的，挨个看去吧。
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
Gulp大法好
同步到新浪微博
分享到微博？
与我们一起探索更多的未知
专业的开发者技术社区，为用户提供多样化的线上知识交流，丰富的线下活动及给力的工作机会
加入只需一步
关闭理由：
删除理由：
忽略理由：
推广（招聘、广告、SEO 等）方面的内容
与已有问题重复（请编辑该提问指向已有相同问题）
答非所问，不符合答题要求
宜作评论而非答案
带有人身攻击、辱骂、仇恨等违反条款的内容
无法获得确切结果的问题
非开发直接相关的问题
非技术提问的讨论型问题
其他原因（请补充说明）
我要举报该，理由是：
扫扫下载 App
SegmentFault
一起探索更多未知grunt搭建项目实例+grunt.initConfig配置详解 - 郑星阳 - ITeye技术网站
博客分类：
作者：zccst
参考网址：
Grunt教程——初涉Grunt
Grunt教程——安装Grunt
Grunt教程——Gurnt任务的配置
实践1：最基础（能运行起来）
第一步：搭建环境，主要是nodejs, npm, grunt(grunt-cli)
$ mkdir installGrunt
$ cd installGrunt
$ npm install grunt --save-dev& #如果看到如下信息表示grunt安装成功
$ grunt --version
grunt-cli v0.1.13
grunt v0.4.5
第二步：创建 package.json
# 在项目的根目录下创建package.json文件
（1）根据grunt-init模板自动创建一个特定的package.json文件；（需要先安装 npm install -g grunt-init）
（2）在命令终端通过npm init命令自动创建一个基本的package.json文件；（亲自测试过）
（3）从官网上复制或者下载一个package.json文件；（对新手最方便）
（4）手工创建一个package.json文件；（对高手最方便）
添加依赖
（1）逐个添加，逐个执行命令 $ npm install XXX --save-dev
XXX是常用插件名，如grunt-contrib-jshint
最好是全称，不要简写。我曾试过 npm install cssmin --save-dev 生成了无用的东西。
（2）也可以一次在package.json中添加多个插件，然后一次执行命令 $ npm install
安装声明的依赖关系grunt插件同时， 在项目根目录下添加一个node_modules目录，目录中放置对应grunt插件所需的插件目录名。
注：当你给npm install添加 --save-dev标志是，一个波浪线范围将被用于你的package.json中。（建议）
第三步：创建Gruntfile.js
# 添加自己合适的gruntfile配置，运行，得出预期输出
module.exports=function(grunt){
&&& //任务配置
&&& grunt.initConfig({
&&& });
&&& //载入任务
&&& grunt.loadNpmTasks();
&&& //注册任务
&&& grunt.registerTask();
}
内容参见demo1
$ grunt&&&& #
运行成功，在目标目录下创建了一个压缩后的js，引用压缩后的js，效果一样。
实践2：加上css压缩的过程
1，在package.json使用命令加一个插件
npm install grunt-contrib-cssmin --save-dev #一开始使用npm install cssmin不对，下了两个
2，在Gruntfile.js中三个部分都加入cssmin相关的命令
3，运行grunt
注：如果已经在initConfig里配置了uglify和cssmin，则不能再注册任务名为uglify和cssmin，报错如下
(node) warning: Recursive process.nextTick detected. This will break in the next version of node.
Please use setImmediate for recursive deferral（递归延迟）.
解决办法：注释掉
//grunt.registerTask("uglify",['uglify']);
//grunt.registerTask("cssmin",['cssmin']);
grunt.registerTask("default",['uglify','cssmin']);//默认执行的任务
参考文档：
grunt.initConfig配置详解
简单的能运行起来，到真正的能够在项目中用起来，中间还有很长的一段路要走。
那就是熟悉配置参数的含义，以能够使用较复杂的配置参数，完成工作。
之前一直对配置参数的含义一直似懂非懂，在网上搜的东西一般都是片段，说得不够完整和透彻（被这些文章害苦了，折腾了很久，始终没有完整理解），其实有三个地方非常容易能找到：
1，官网-配置任务 一节描述的很清楚，包括任务的结构和参数含义。
2，github搜对应的任务。如grunt-cmd-transport
3，github上通过seajs等推荐的链接。如：
常用插件：
grunt-contrib-jshint（js语法检查）
grunt-contrib-uglify（采用UglifyJS压缩js）
grunt-contrib-concat（js合并）
grunt-contrib-cssmin（Css压缩合并）
grunt-htmlhint（html语法验查）
如果您觉得本文的内容对您的学习有所帮助，您可以微信：
浏览: 1016285 次
来自: 北京
也觉得前置加载比较好，不会造成卡顿。这也涉及到效率优先，还是选 ...
莫非只会拷贝？ 一点思想内容都没有。
写的是啥啊。
专门登录上来，感谢一下楼主的无私分享。帮助我解决问题了。当前访客身份：游客 [
这个人很懒，啥也没写
：敢不敢把代码贴完！！！
：我用的IDE是IntelliJ IDEA13，我个人认为比Eclip...
今日访问：1
昨日访问：43
本周访问：145
本月访问：1
所有访问：7804
Grunt 插件开发与调式
发表于1年前( 12:08)&&
阅读（687）&|&评论（）
0人收藏此文章,
1 grunt是什么
官方网站解释的很清楚， 
它是一种javascript任务运行器，对于需要反复重复的任务，例如压缩、编译、单元测试、代码检查等，自动化工具可以减轻你的劳动，简化你的工作。
grunt的安装请参考官方文档。
2 grunt 插件开发步骤
with npm install -g grunt-init
Install the gruntplugin template with git clone git:///gruntjs/grunt-init-gruntplugin.git ~/.grunt-init/gruntplugin
Run grunt-init gruntplugin in an empty directory.
Run npm install to prepare the development environment.
Author your plugin.
Run npm publish to publish the Grunt plugin to npm!
3 使用webstorm调试
WebStrom是由jetbrains开发的javascript IDE，是付费的，功能非常强大。
1，首先要确定安装了nodejs
2，打开webstrom，并open上述构建好的项目目录
3，工具栏Run—& Edit configrations
4，点击绿色图标，选择Node.js
其中Javascript file： 要选择grunt程序，而不是Gruntfile.js
Application parameters: test，表示启动 grunt test 这个命令。
至此就可以对gurnt进行debug运行了。
更多开发者职位上
1)">1)">1" ng-class="{current:{{currentPage==page}}}" ng-repeat="page in pages"><li class='page' ng-if="(endIndex<li class='page next' ng-if="(currentPage
相关文章阅读自动化任务运行器 Grunt 迅速上手 - 博客 - 伯乐在线
& 自动化任务运行器 Grunt 迅速上手
这篇文章将带领你用Grunt来提速和优化网站开发的流程。首先我们会简短介绍Grunt的功能，然后我们直接上手，介绍如何用Grunt的不同插件来替你完成网站项目开发中的很多繁冗工作。
接着我们会创建一个简单的input校验器，用
来完成CSS的预处理，我们会学习如何用grunt-cssc 和CssMin来合并和压缩CSS，如何用
来保证我们的HTML正确无误，以及如何实现在运行时部署和压缩我们的文件。最后，我们会学习如何用 来极简化我们的JavaScript以尽可能地节约带宽。
是一个JavaScript 任务运行工具，它能替你完成重复性的任务，如极简化、 编译、单元测试和linting。
过去几年JavaScript的发展速度令人震惊，不管是像Backbone.js和Ember.js这样的开发框架，还是JS Bin这样的开发社区，这个语言的发展都不仅改变了我们作为用户对网站的体验，还改变了我们作为开发者对网站的开发方式。
使用JavaScript，你往往需要定期去执行一系列的任务， 在大部分项目里人们可能对此已习以为常了，但它们仍然是重复的、浪费时间的活计。身处一个如此活跃的开发社区，你大概已经猜到，有现成的工具可以帮你自动化和加速完成这些任务了——这就是Grunt的用武之地。
Grunt 是什么？
Grunt基于Node.js之上，是一个以任务处理为基础的命令行工具，可以减少优化开发版本为发布版本所需的人力和时间，从而加速开发流程。它的工作原理是把这些工作整合为不同的任务，在你开发时自动执行。基本上，你可以让Grunt完成任何让你厌烦的任务：那些你需要重复进行的手工设置和运行发布的任务。
早期版本的Grunt自带JSHint和Uglify等plugin，最新的版本（version 0.4）则完全依赖用户指定plugin来运行任务。到底有哪些任务可以运行呢？这个单子可是长得很，可以说，Grunt能干任何你扔给它的活，从极简化（) 到合并JavaScript （)。它还可以完成一些跟JavaScript无关的任务，比如从LESS和Sass编译CSS。我们甚至还用过它跟
来做编译失败的提醒。
为什么要用Grunt ？
Grunt最大的优势之一是给团队带来一致性。如果你和别人一起工作过，你肯定知道代码风格的不一样有多让人伤神。Grunt能让团队使用一套统一的命令，从而保证每个人写的代码符合统一标准。说到底，如果因为团队中几个人代码风格的微小不同而导致编译失败，那可是最烦人的事了。
Grunt还有一个极其活跃的开发者社区，定期发布新的plugin。使用Grunt的门槛也相对较低，因为很多工具和自动化任务都是直接可用的。
要使用Grunt，第一件事是安装Node.js。（即使你没用过Node.js也不用担心——你只需安装它让Grunt能运行。）
安装了Node.js之后，用命令行工具执行以下命令：
$ npm install -g grunt-cli
要确认Grunt是否正确安装，可以使用以下命令：
$ grunt --version
下一步是在你的项目的根目录下创建package.json和gruntfile.js两个文件。
创建package.json文件
这个JSON文件让我们指定我们的开发环境所依赖的必须模块。有了它，项目的所有开发者都能保证安装上一致的必须模块，从而保证所有人拥有一样的开发环境。
在项目根目录下的pacakge.json文件中写上：
&name& : &SampleGrunt&,
&version& : &0.1.0&,
&author& : &Brandon Random&,
&private& : true,
&devDependencies& : {
然后在命令行工具运行：
$ npm install
该命令告诉npm 需要安装的必须模块，npm会安装它们，自动保存在项目根目录下一个叫做 node_modules 的文件夹里。
创建gruntfile.js文件
gruntfile.js 文件本质上就是一个wrapper函数，接受grunt作为参数：
module.exports = function(grunt){
grunt.initConfig({
pkg: grunt.file.readJSON('package.json')
grunt.registerTask('default', []);
现在你已经可以在项目根目录下运行grunt命令行工具了。
& Task &default& not found. Use --force to continue.
这里我们只指定了Grunt作为必须模块，还没定义任何任务。接下来我们就要指定任务和必须模块。首先来看如何拓展package.json文件。
拓展package.json文件
使用Node.js最好的一点，就是它可以根据package.json文件的内容，一次性查找和安装多个package。要安装我们项目的所有必须任务，只须在package.json文件中加上以下内容：
&name& : &SampleGrunt&,
&version& : &0.1.0&,
&author& : &Mike Cunsolo&,
&private& : true,
&devDependencies& : {
&grunt-contrib-cssmin&:
&grunt-contrib-sass&:
&grunt-contrib-uglify&:
&grunt-contrib-watch&:
&grunt-cssc&:
&grunt-htmlhint&:
&matchdep&:
那么如何实现安装？你肯定已经猜到了：
$ npm install
使用Grunt载入任务
package安装好后，还必须被Grunt载入才能为我们所用。使用 matchdep，我们用一行代码就可以自动载入所有任务。这是开发流程的一大优化，因为现在我们只须把必须任务列表写在package.json一个文件里，便于管理。
在gruntfile.js里，grunt.initConfig之上，写上以下代码：
require(&matchdep&).filterDev(&grunt-*&).forEach(grunt.loadNpmTasks);
要是没有matchdep，我们就必须为每一个必须任务写一次grunt.loadNpmTasks(“grunt-task-name”); ，随着我们使用的任务的增加，这些载入任务的代码很快就会变得相当繁冗。在Grunt载入这些任务前，我们还可以指定设置选项。
现在我们需要创建我们的HTML文件（index.html）：
&!DOCTYPE html&
&html lang=&en&&
&meta charset=&utf-8&&
&meta name=&viewport&
content=&width=device- initial-scale=1.0; maximum-scale=1.0;&&
&title&Enter your first name&/title&
&link rel=&stylesheet&
href=&build/css/master.css&&
&label for=&firstname&&Enter your first name&/label&
&input id=&firstname& name=&firstname& type=&text&&
&p id=&namevalidation& class=&validation&&&/p&
&script type=&text/javascript& src=&build/js/base.min.js&&&/script&
用HTMLHint验证HTML
在grunt.initConfig里加入下列设置代码：
htmlhint: {
options: {
'tag-pair': true,
'tagname-lowercase': true,
'attr-lowercase': true,
'attr-value-double-quotes': true,
'doctype-first': true,
'spec-char-escape': true,
'id-unique': true,
'head-script-disabled': true,
'style-disabled': true
src: ['index.html']
一般来说，一个plugin的设置方法如下：plugin的名称（去掉grunt-contrib-或grunt-前缀），选择使用此plugin的一个或多个对象（在这里可以给不同文件设置此plugin 的不同选项），一个选项object，以及plugin要作用的对象。现在，如果我们用命令行工具运行grunt htmlhint，该plugin就会检查我们在src里指定的HTML文件，验证其中有没有错误！但是每个小时都要手动运行几次这个任务，很快就让人觉得很繁琐了。
自动化任务运行
watch是一个特殊的任务，它可以在目标文件保存时自动触发一系列任务的运行。在grunt.initConfig里加入以下设置：
files: ['index.html'],
tasks: ['htmlhint']
然后，在命令行工具中运行grunt watch命令。现在，你可以试试在index.html里加一行注释，保存文件。你会注意到，保存文件时会自动触发HTML的验证！这是对开发流程的一大优化：在你写代码时，watch任务就会默默同时为你验证代码，如果验证失败任务就会报告失败（它还会告诉你问题在哪）。
注意grunt watch任务会一直运行，直到命令行工具关闭，或手动停止（control+c在Mac中)。
保持JavaScript极简
让我们来写一个验证用户输入的名字的JavaScript文件。简便起见，我们这里只检查其中是否含有非字母的字符。我们的JavaScript会使用strict模式，这可以防止我们写可用但低质量的JavaScript。创建assets/js/base.js文件并在其中写上：
function Validator()
&use strict&;
Validator.prototype.checkName = function(name)
&use strict&;
return (/[^a-z]/i.test(name) === false);
window.addEventListener('load', function(){
&use strict&;
document.getElementById('firstname').addEventListener('blur', function(){
var _this =
var validator = new Validator();
var validation = document.getElementById('namevalidation');
if (validator.checkName(_this.value) === true) {
validation.innerHTML = 'Looks good! :)';
validation.className = &validation yep&;
_this.className = &yep&;
validation.innerHTML = 'Looks bad! :(';
validation.className = &validation nope&;
_this.className = &nope&;
让我们用UglifyJS来极简化这个源代码，在grunt.initConfig中加上以下设置：
'build/js/base.min.js': ['assets/js/base.js']
UglifyJS会替换所有的变量和函数名，剔除所有空白和注释，从而生成占据最小空间的JavaScript文件，对发布非常有用。同样地，我们需要设置一个watch任务来使用它，在watch的设置里加入以下代码：
files: ['assets/js/base.js'],
tasks: ['uglify']
从Sass源文件生成CSS
Sass对CSS相关工作非常有用，特别是在团队中。使用Sass可以大量减少代码量，因为Sass可通过变量、mixin函数生成CSS代码。Sass的具体使用方法并不在本教程探讨的范围内，所以如果你还不想使用Sass这样的CSS预处理器，可以跳过这一段。但我们这里会介绍一个很简单的用例，使用变量、一个mixin函数和Sass式CSS语法（SCSS）。
Grunt的Sass plugin需要使用Sass gem，为此你需要安装Ruby（OS X中已经预装了Ruby）。用以下命令你可以测试系统中是否已安装Ruby：
使用以下命令安装Sass gem：
gem install sass
根据系统设置的不同，你可能需要用sudo来运行此命令——即sudo gem install sass——这里你会被要求输入管理者密码。安装好Sass，在assets文件夹里创建sass文件夹，并在其中创建文件master.sass，然后写上：
@mixin prefix($property, $value, $prefixes: webkit moz ms o spec) {
@each $p in $prefixes {
@if $p == spec {
#{$property}: $
-#{$p}-#{$property}: $
$input_field:
$input_focus:
$validation_passed:
$validation_failed:
$bg_colour:
$box_colour:
$border_style:
$border_radius:
background:
background:
box-shadow:
0 1px 3px rgba(0, 0, 0, .1);
border-radius:
font-family:
input[type=&text&] {
prefix(appearance, none, webkit moz);
prefix(transition, border .3s ease);
border-radius:
$border_style $input_
input[type=&text&]:focus {
border-color:
input[type=&text&],
.validation {
line-height:
font-size:
margin-right:
input.yep {
border-color:
$validation_
input.nope {
border-color:
$validation_
$validation_
$validation_
你会注意到SCSS比起普通的Sass更像CSS。这个样式表使用了Sass的两个特性：mixin和变量。一个mixin根据给它的参数生成CSS代码块，很像函数。而一个变量可以用来定义一段CSS代码片段，然后在很多地方重用。变量对定义Hex颜色尤其有用，我们可以用它建立一个色表，然后在尝试不同设计时，只须修改一处代码，从而大大提高了效率。这里的mixin则用来给CSS3的apperance和transition等属性生成前缀，减少了冗余代码。编写一个很长的样式表文件时，任何减少代码量的方法，都会让团队中日后更新此样式表的人受益。
在Sass之外，grunt-cssc任务可以整合CSS文件中定义的样式规则，最大限度削减所生成的CSS文件中的重复内容。在中到大型项目中经常出现重复的样式规则，使用这个任务就很有益处。但是，由此生成的CSS文件也不一定就是最简的，所以我们还需要使用cssmin任务，它既能剔除所有空白，还能把颜色值替换为可能的最简形式（比如white会被替换为#fff）。在gruntfile.js中加入如下内容：
options: {
consolidateViaDeclarations: true,
consolidateViaSelectors:
consolidateMediaQueries:
'build/css/master.css': 'build/css/master.css'
src: 'build/css/master.css',
dest: 'build/css/master.css'
'build/css/master.css': 'assets/sass/master.scss'
现在我们设置好了处理样式表的任务，还要让它们自动运行。Grunt自动创建了build文件夹来存放所有的发布用script、CSS和（如果这是一个完整的网站项目的话）压缩后的图片文件。这意味着assets文件夹里可以包含为开发而做的详细的注释文件甚至说明文档，而build文件夹里则只会包含极简化代码和优化压缩过的图像文件。
我们给CSS相关的工作定义一套新的任务，在gruntfile.js里的default task下面加上以下内容：
grunt.registerTask('buildcss',
['sass', 'cssc', 'cssmin']);
现在，运行grunt buildcss任务就会按顺序运行所有CSS相关的任务，比起分别运行grunt sass、grunt cssc然后grunt cssmin来，这样简洁多了。最后我们需要做的就是更新watch任务的设置，让这些CSS相关任务也能自动运行：
files: ['assets/sass/**/*.scss'],
tasks: ['buildcss']
这个路径可能看起来有点奇怪，它的用途是递归地遍历我们assets/sass文件夹里的所有文件和子文件夹，来查找.scss文件。如此一来，我们就可以创建任意多的.scss文件，而不需要在gruntfile.js里添加它们的路径。现在，你的gruntfile.js应该是下面这样：
module.exports = function(grunt){
&use strict&;
require(&matchdep&).filterDev(&grunt-*&).forEach(grunt.loadNpmTasks);
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
options: {
consolidateViaDeclarations: true,
consolidateViaSelectors:
consolidateMediaQueries:
'build/css/master.css': 'build/css/master.css'
src: 'build/css/master.css',
dest: 'build/css/master.css'
'build/css/master.css': 'assets/sass/master.scss'
files: ['index.html'],
tasks: ['htmlhint']
files: ['assets/js/base.js'],
tasks: ['uglify']
files: ['assets/sass/**/*.scss'],
tasks: ['buildcss']
htmlhint: {
options: {
'tag-pair': true,
// Force tags to have a closing pair
'tagname-lowercase': true,
// Force tags to be lowercase
'attr-lowercase': true,
// Force attribute names to be lowercase e.g. &div id=&header&& is invalid
'attr-value-double-quotes': true,
// Force attributes to have double quotes rather than single
'doctype-first': true,
// Force the DOCTYPE declaration to come first in the document
'spec-char-escape': true,
// Force special characters to be escaped
'id-unique': true,
// Prevent using the same ID multiple times in a document
'head-script-disabled': true,
// Prevent script tags being loaded in the
for performance reasons
'style-disabled': true
// Prevent style tags. CSS should be loaded through
src: ['index.html']
'build/js/base.min.js': ['assets/js/base.js']
grunt.registerTask('default',
grunt.registerTask('buildcss',
['sass', 'cssc', 'cssmin']);
现在我们有了一个静态HTML页面，一个存放Sass和JavaScript源文件的assets文件夹，一个存放优化后的CSS和JavaScript的build文件夹，以及package.json文件和gruntfile.js文件。
至此你已经有了一个不错的基础来进一步探索Grunt。像之前提到的，一个非常活跃的开发者社区在为Grunt开发前端plugin。我建议你现在就到 去看看那300个以上的plugin。
关于作者：
可能感兴趣的话题
o 100 回复
关于伯乐在线博客
在这个信息爆炸的时代，人们已然被大量、快速并且简短的信息所包围。然而，我们相信：过多“快餐”式的阅读只会令人“虚胖”，缺乏实质的内涵。伯乐在线博客团队正试图以我们微薄的力量，把优秀的原创/译文分享给读者，做一个小而精的精选博客，为“快餐”添加一些“营养”元素。
新浪微博：
推荐微信号
（加好友请注明来意）
– 好的话题、有启发的回复、值得信赖的圈子
– 分享和发现有价值的内容与观点
– 为IT单身男女服务的征婚传播平台
– 优秀的工具资源导航
– 翻译传播优秀的外文文章
– 国内外的精选文章
– UI,网页，交互和用户体验
– 专注iOS技术分享
– 专注Android技术分享
– JavaScript, HTML5, CSS
– 专注Java技术分享
– 专注Python技术分享
& 2015 伯乐在线
赞助云主机
