如何使用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命名去 ...
随机推荐
- nginx 502错误
一些运行在Nginx上的网站有时候会出现“502 Bad Gateway”错误,有些时候甚至频繁的出现.以下是小编搜集整理的一些Nginx 502错误的排查方法,供参考: Nginx 502错误的原因 ...
- cakephp 的query方法，直接写在controller中是否 有点不合适
模型的query()函数有时是非常实用的,它可以在任何需要数据的地方执行SQL语句.但不是在什么地方调用query()方法都是恰当的.特别是在控制器中直接调用模型的query()方法 $this-&g ...
- Java回调函数的理解
所谓回调,就是客户程序C调用服务程序S中的某个函数A,然后S又在某个时候反过来调用C中的某个函数B,对于C来说,这个B便叫做回调函数.例如Win32下的窗口过程函数就是一个典型的回调函数.一般说来,C ...
- PAT (Advanced Level) 1047. Student List for Course (25)
简单题. #include<iostream> #include<cstring> #include<cmath> #include<algorithm> ...
- 初始化Direct3D
1.Direct3D概述 Direct3D是一套底层图形API,借助该API,我们能够利用硬件加速功能来绘制3D场景. 设备制造商将其产品支持的全部功能都实现到HAL中. 1.1 Direct3D提供 ...
- js url编码函数
JavaScript中有三个可以对字符串编码的函数,分别是: escape,encodeURI,encodeURIComponent,相应3个解码函数:unescape,decodeURI,decod ...
- CTabCtrl
转载至 http://blog.csdn.net/jacklam200/archive/2008/08/01/2753797.aspx 一.在对话框视图中加入CTabCtrl控件 资源ID:IDC_T ...
- 转 android客户端版本检测更新，服务下载，通知栏显示
看图, 只要点击取消或是下载完毕 通知才会消失! 代码是大部分是借用别人的,再自己修改,达到自己所需要的效果 xml文件 update.xml <?xml version=" ...
- Object.defineproperty实现数据和视图的联动 ------是不是就是 Angular 模型和视图的同步的实现方式？？？
参考:http://www.cnblogs.com/oceanxing/p/3938443.html https://developer.mozilla.org/zh-CN/docs/Web/Java ...
- JavaScript运行原理解析
原文:1.http://blog.csdn.net/liaodehong/article/details/50488098 2.Stack的三种含义 (阮一峰) 3. http://lib.csdn. ...