如何使用Grunt（好文）
Grunt 是什么？
Grunt 基于Node.js之上，是一个以任务处理为基础的命令行工具，可以减少优化开发版本为发布版本所需的人力和时间，从而加速开发流程。它的工作原理是把这 些工作整合为不同的任务，在你开发时自动执行。基本上，你可以让Grunt完成任何让你厌烦的任务：那些你需要重复进行的手工设置和运行发布的任务。
工具/原料
- NodeJs
- Windows系统
方法/步骤
要使用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" : {
"grunt" : "~0.4.0"
}
}
然后在命令行工具运行：
$ 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命令行工具了。
$ 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" : "~0.4.0",
"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">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;">
<title>Enter your first name</title>
<link rel="stylesheet" href="build/css/master.css">
</head>
<body>
<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>
</body>
</html>
用HTMLHint验证HTML
在grunt.initConfig里加入下列设置代码：
htmlhint: {
build: {
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里加入以下设置：
watch: {
html: {
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 = 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";
}
else {
validation.innerHTML = 'Looks bad! :(';
validation.className = "validation nope";
_this.className = "nope";
}
});
});
让我们用UglifyJS来极简化这个源代码，在grunt.initConfig中加上以下设置：
uglify: {
build: {
files: {
'build/js/base.min.js': ['assets/js/base.js']
}
}
}
UglifyJS会替换所有的变量和函数名，剔除所有空白和注释，从而生成占据最小空间的JavaScript文件，对发布非常有用。同样地，我们需要设置一个watch任务来使用它，在watch的设置里加入以下代码：
watch: {
js: {
files: ['assets/js/base.js'],
tasks: ['uglify']
}
}
现在我们有了一个静态HTML页面，一个存放Sass和JavaScript源文件的assets文件夹，一个存放优化后的CSS和JavaScript的build文件夹，以及package.json文件和gruntfile.js文件。
至此你已经有了一个不错的基础来进一步探索Grunt。像之前提到的，一个非常活跃的开发者社区在为Grunt开发前端plugin。我建议你现在就到plugin library 去看看那300个以上的plugin。
END
注意事项
- Grunt.js 是一个JavaScript 任务运行工具，它能替你完成重复性的任务，如极简化、 编译、单元测试和linting。
如何使用Grunt（好文）的更多相关文章
- grunt api 文档
Grunt docs Grunt和 Grunt 插件是通过 npm 安装并管理的,npm是 Node.js 的包管理器. 安装 grunt-cli npm install grunt-cli -g 注 ...
- Grunt基本使用-V1.0
浅语:grunt中文网:http://www.gruntjs.net/ 第一步:Grunt 依赖 Node.js 所以在安装之前确保你安装了 Node.js.然后开始安装 Grunt. 实际上,安装的 ...
- 基于Grunt构建一个JavaScript库
现在公认的JavaScript典型项目需要运行单元测试,合并压缩.有些还会使用代码生成器,代码样式检查或其他构建工具. Grunt.js是一个开源工具,可以帮助你完成上面的所有步骤.它非常容易扩展,并 ...
- Grunt的配置及使用（压缩合并js/css）
Grunt的配置及使用(压缩合并js/css) 安装 前提是你已经安装了nodejs和npm. 你能够在 nodejs.org 下载安装包安装.也能够通过包管理器(比方在 Mac 上用 homebre ...
- 利用grunt-contrib-connect和grunt-connect-proxy搭建前后端分离的开发环境
前后端分离这个词一点都不新鲜,完全的前后端分离在岗位协作方面,前端不写任何后台,后台不写任何页面,双方通过接口传递数据完成软件的各个功能实现.此种情况下,前后端的项目都独立开发和独立部署,在开发期间有 ...
- gulp + browserSync 一起提高前端开发效率吧！
前端开发的时候,每次修改代码后,要移动鼠标到浏览器选中再刷新查看效果,不知觉间我们的加班的时间又增加了0.5s, 真是罪孽!所以在使用gulp之后,就一直对能自动监听文件刷新页面的browserSyn ...
- Mediocre String Problem （2018南京M,回文+LCP 3×3=9种做法 %%%千年好题 感谢"Grunt"大佬的细心讲解）
layout: post title: Mediocre String Problem (2018南京M,回文+LCP 3×3=9种做法 %%%千年好题 感谢"Grunt"大佬的细 ...
- grunt配置任务
这个指南解释了如何使用 Gruntfile 来为你的项目配置task.如果你还不知道 Gruntfile 是什么,请先阅读 快速入门 指南并看看这个Gruntfile 实例. Grunt配置 Grun ...
- 快速开发Grunt插件----压缩js模板
前言 Grunt是一款前端构建工具,帮助我们自动化搭建前端工程.它可以实现自动对js.css.html文件的合并.压缩等一些列操作.Grunt有很多插件,每一款插件实现某个功能,你可以通过npm命名去 ...
随机推荐
- CF 389 E 贪心（第一次遇到这么水的E）
http://codeforces.com/contest/389/problem/E 这道题目刚开始想的特别麻烦...但是没想到竟然是贪心 我们只需要知道偶数的时候可以对称取的,然后奇数的时候没次取 ...
- qt博客
http://blog.csdn.net/foruok/article/category/418962/1
- Jquery页面跳转
<mce:script type="text/javascript"><!-- $(function(){ var pn = $("#gotopagen ...
- C#入门经典（第五章-1）
- oracle sql 分页
Oracle实现分页时,需要引入一个rownum的函数,rownum可以给记录一个类似于id的字段. 以下收整理了常用的几种sql分页算法,数据库以Oracle中emp为例.查询结果如下: SQL&g ...
- c# 动态产生控件 注册动态控件事件
用CheckEdit演示 其他控件类推 CheckEdit AllSele = new CheckEdit(); AllSele.Location = new System.Drawing.Point ...
- 搭建网络yum源
#!/bin/bash #Linux搭建163网络yum源 cd /etc/yum.repos.d/ echo "-------------------下载163-repo--------- ...
- Java之Property类使用
http://blog.csdn.net/hopestar2/article/details/6372883 在项目中经常用到各种配置文件,有.properties的,也有.xml格式的 都可以通过j ...
- 鼠标滚轮事件 onmousewheel
1.fiefox:DOMMouseScroll detail detail*(-40)=wheelDelta 除了firefox之外:mousewheel ...
- Alcatraz：插件管理
安装: 终端粘贴 "curl -fsSL https://raw.github.com/alcatraz/Alcatraz/master/Scripts/install.sh | sh&qu ...