grunt--自动化任务快速上手
这篇文章将带领你用Grunt来提速和优化网站开发的流程。首先咱们会简短介绍Grunt的功能，而后咱们直接上手，介绍如何用Grunt的不一样插件来替你完成网站项目开发中的不少繁冗工做。javascript
接着咱们会建立一个简单的input校验器，用 Sass 来完成CSS的预处理，咱们会学习如何用grunt-cssc 和CssMin来合并和压缩CSS，如何用 HTMLHint 来保证咱们的HTML正确无误，以及如何实如今运行时部署和压缩咱们的文件。最后，咱们会学习如何用UglifyJS 来极简化咱们的JavaScript以尽量地节约带宽。css
Grunt.js 是一个JavaScript 任务运行工具，它能替你完成重复性的任务，如极简化、 编译、单元测试和linting。html
Grunt入门前端
过去几年JavaScript的发展速度使人震惊，不论是像Backbone.js和Ember.js这样的开发框架，仍是JS Bin这样的开发社区，这个语言的发展都不只改变了咱们做为用户对网站的体验，还改变了咱们做为开发者对网站的开发方式。java
使用JavaScript，你每每须要按期去执行一系列的任务， 在大部分项目里人们可能对此已习觉得常了，但它们仍然是重复的、浪费时间的活计。身处一个如此活跃的开发社区，你大概已经猜到，有现成的工具能够帮你自动化和加速完成这些任务了——这就是Grunt的用武之地。node
Grunt 是什么？git
Grunt基于Node.js之上，是一个以任务处理为基础的命令行工具，能够减小优化开发版本为发布版本所需的人力和时间，从而加速开发流程。它的工做原理是把这些工做整合为不一样的任务，在你开发时自动执行。基本上，你可让Grunt完成任何让你厌烦的任务：那些你须要重复进行的手工设置和运行发布的任务。github
早期版本的Grunt自带JSHint和Uglify等plugin，最新的版本（version 0.4）则彻底依赖用户指定plugin来运行任务。到底有哪些任务能够运行呢？这个单子但是长得很，能够说，Grunt能干任何你扔给它的活，从极简化（minifying) 到合并JavaScript （concatenating)。它还能够完成一些跟JavaScript无关的任务，好比从LESS和Sass编译CSS。咱们甚至还用过它跟 blink(1) 来作编译失败的提醒。web
为何要用Grunt ？npm
Grunt最大的优点之一是给团队带来一致性。若是你和别人一块儿工做过，你确定知道代码风格的不同有多让人伤神。Grunt能让团队使用一套统一的命令，从而保证每一个人写的代码符合统一标准。说到底，若是由于团队中几我的代码风格的微小不一样而致使编译失败，那但是最烦人的事了。
Grunt还有一个极其活跃的开发者社区，按期发布新的plugin。使用Grunt的门槛也相对较低，由于不少工具和自动化任务都是直接可用的。
设置安装
要使用Grunt，第一件事是安装Node.js。（即便你没用过Node.js也不用担忧——你只需安装它让Grunt能运行。）
安装了Node.js以后，用命令行工具执行如下命令：
|
1
|
$ npm install -g grunt-cli
|
要确认Grunt是否正确安装，可使用如下命令：
|
1
|
$ grunt --version
|
下一步是在你的项目的根目录下建立package.json和gruntfile.js两个文件。
建立package.json文件
这个JSON文件让咱们指定咱们的开发环境所依赖的必须模块。有了它，项目的全部开发者都能保证安装上一致的必须模块，从而保证全部人拥有同样的开发环境。
在项目根目录下的pacakge.json文件中写上：
|
1
2
3
4
5
6
7
8
9
10
|
{
"name" : "SampleGrunt",
"version" : "0.1.0",
"author" : "Brandon Random",
"private" : true,
"devDependencies" : {
"grunt" : "~0.4.0"
}
}
|
而后在命令行工具运行：
|
1
|
$ npm install
|
该命令告诉npm 须要安装的必须模块，npm会安装它们，自动保存在项目根目录下一个叫作 node_modules 的文件夹里。
建立gruntfile.js文件
gruntfile.js 文件本质上就是一个wrapper函数，接受grunt做为参数：
|
1
2
3
4
5
6
7
8
9
|
module.exports = function(grunt){
grunt.initConfig({
pkg: grunt.file.readJSON('package.json')
});
grunt.registerTask('default', []);
};
|
如今你已经能够在项目根目录下运行grunt命令行工具了。
|
1
2
|
$ grunt
> Task "default" not found. Use --force to continue.
|
这里咱们只指定了Grunt做为必须模块，还没定义任何任务。接下来咱们就要指定任务和必须模块。首先来看如何拓展package.json文件。
拓展package.json文件
使用Node.js最好的一点，就是它能够根据package.json文件的内容，一次性查找和安装多个package。要安装咱们项目的全部必须任务，只须在package.json文件中加上如下内容：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
{
"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": "*"
}
}
|
那么如何实现安装？你确定已经猜到了：
|
1
|
$ npm install
|
使用Grunt载入任务
package安装好后，还必须被Grunt载入才能为咱们所用。使用 matchdep，咱们用一行代码就能够自动载入全部任务。这是开发流程的一大优化，由于如今咱们只须把必须任务列表写在package.json一个文件里，便于管理。
在gruntfile.js里，grunt.initConfig之上，写上如下代码：
|
1
|
require("matchdep").filterDev("grunt-*").forEach(grunt.loadNpmTasks);
|
要是没有matchdep，咱们就必须为每个必须任务写一次grunt.loadNpmTasks(“grunt-task-name”); ，随着咱们使用的任务的增长，这些载入任务的代码很快就会变得至关繁冗。在Grunt载入这些任务前，咱们还能够指定设置选项。
如今咱们须要建立咱们的HTML文件（index.html）：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
|
<!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里加入下列设置代码：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
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里加入如下设置：
|
1
2
3
4
5
6
|
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文件并在其中写上：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
|
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中加上如下设置：
|
1
2
3
4
5
6
7
|
uglify: {
build: {
files: {
'build/js/base.min.js': ['assets/js/base.js']
}
}
}
|
UglifyJS会替换全部的变量和函数名，剔除全部空白和注释，从而生成占据最小空间的JavaScript文件，对发布很是有用。一样地，咱们须要设置一个watch任务来使用它，在watch的设置里加入如下代码：
|
1
2
3
4
5
6
|
watch: {
js: {
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：
|
1
|
ruby -v
|
使用如下命令安装Sass gem：
|
1
|
gem install sass
|
根据系统设置的不一样，你可能须要用sudo来运行此命令——即sudo gem install sass——这里你会被要求输入管理者密码。安装好Sass，在assets文件夹里建立sass文件夹，并在其中建立文件master.sass，而后写上：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
|
@mixin prefix($property, $value, $prefixes: webkit moz ms o spec) {
@each $p in $prefixes {
@if $p == spec {
#{$property}: $value;
}
@else {
-#{$p}-#{$property}: $value;
}
}
}
$input_field: #999;
$input_focus: #559ab9;
$validation_passed: #8aba56;
$validation_failed: #ba5656;
$bg_colour: #f4f4f4;
$box_colour: #fff;
$border_style: 1px solid;
$border_radius: 4px;
html {
background: $bg_colour;
}
body {
width: 720px;
padding: 40px;
margin: 80px auto;
background: $box_colour;
box-shadow: 0 1px 3px rgba(0, 0, 0, .1);
border-radius: $border_radius;
font-family: sans-serif;
}
input[type="text"] {
@include prefix(appearance, none, webkit moz);
@include prefix(transition, border .3s ease);
border-radius: $border_radius;
border: $border_style $input_field;
width: 220px;
}
input[type="text"]:focus {
border-color: $input_focus;
outline: 0;
}
label,
input[type="text"],
.validation {
line-height: 1;
font-size: 1em;
padding: 10px;
display: inline;
margin-right: 20px;
}
input.yep {
border-color: $validation_passed;
}
input.nope {
border-color: $validation_failed;
}
p.yep {
color: $validation_passed;
}
p.nope {
color: $validation_failed;
}
|
你会注意到SCSS比起普通的Sass更像CSS。这个样式表使用了Sass的两个特性：mixin和变量。一个mixin根据给它的参数生成CSS代码块，很像函数。而一个变量能够用来定义一段CSS代码片断，而后在不少地方重用。变量对定义Hex颜色尤为有用，咱们能够用它创建一个色表，而后在尝试不一样设计时，只须修改一处代码，从而大大提升了效率。这里的mixin则用来给CSS3的apperance和transition等属性生成前缀，减小了冗余代码。编写一个很长的样式表文件时，任何减小代码量的方法，都会让团队中往后更新此样式表的人受益。
在Sass以外，grunt-cssc任务能够整合CSS文件中定义的样式规则，最大限度削减所生成的CSS文件中的重复内容。在中到大型项目中常常出现重复的样式规则，使用这个任务就颇有益处。可是，由今生成的CSS文件也不必定就是最简的，因此咱们还须要使用cssmin任务，它既能剔除全部空白，还能把颜色值替换为可能的最简形式（好比white会被替换为#fff）。在gruntfile.js中加入以下内容：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
|
cssc: {
build: {
options: {
consolidateViaDeclarations: true,
consolidateViaSelectors: true,
consolidateMediaQueries: true
},
files: {
'build/css/master.css': 'build/css/master.css'
}
}
},
cssmin: {
build: {
src: 'build/css/master.css',
dest: 'build/css/master.css'
}
},
sass: {
build: {
files: {
'build/css/master.css': 'assets/sass/master.scss'
}
}
}
|
如今咱们设置好了处理样式表的任务，还要让它们自动运行。Grunt自动建立了build文件夹来存放全部的发布用script、CSS和（若是这是一个完整的网站项目的话）压缩后的图片文件。这意味着assets文件夹里能够包含为开发而作的详细的注释文件甚至说明文档，而build文件夹里则只会包含极简化代码和优化压缩过的图像文件。
咱们给CSS相关的工做定义一套新的任务，在gruntfile.js里的default task下面加上如下内容：
|
1
|
grunt.registerTask('buildcss', ['sass', 'cssc', 'cssmin']);
|
如今，运行grunt buildcss任务就会按顺序运行全部CSS相关的任务，比起分别运行grunt sass、grunt cssc而后grunt cssmin来，这样简洁多了。最后咱们须要作的就是更新watch任务的设置，让这些CSS相关任务也能自动运行：
|
1
2
3
4
5
6
|
watch: {
css: {
files: ['assets/sass/**/*.scss'],
tasks: ['buildcss']
}
}
|
这个路径可能看起来有点奇怪，它的用途是递归地遍历咱们assets/sass文件夹里的全部文件和子文件夹，来查找.scss文件。如此一来，咱们就能够建立任意多的.scss文件，而不须要在gruntfile.js里添加它们的路径。如今，你的gruntfile.js应该是下面这样：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
|
module.exports = function(grunt){
"use strict";
require("matchdep").filterDev("grunt-*").forEach(grunt.loadNpmTasks);
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
cssc: {
build: {
options: {
consolidateViaDeclarations: true,
consolidateViaSelectors: true,
consolidateMediaQueries: true
},
files: {
'build/css/master.css': 'build/css/master.css'
}
}
},
cssmin: {
build: {
src: 'build/css/master.css',
dest: 'build/css/master.css'
}
},
sass: {
build: {
files: {
'build/css/master.css': 'assets/sass/master.scss'
}
}
},
watch: {
html: {
files: ['index.html'],
tasks: ['htmlhint']
},
js: {
files: ['assets/js/base.js'],
tasks: ['uglify']
},
css: {
files: ['assets/sass/**/*.scss'],
tasks: ['buildcss']
}
},
htmlhint: {
build: {
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']
}
},
uglify: {
build: {
files: {
'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。我建议你如今就到plugin library 去看看那300个以上的plugin。
资料转自：http://blog.jobbole.com/51586/
- 1. grunt快速上手
- 2. Jenkins 自动化构建 快速上手
- 3. 5分钟上手自动化测试——Airtest+Poco快速上手
- 4. No Grunt. substack风格的使用npm run来自动化任务
- 5. PC 下自动化任务，教你 5 步快速实现！
- 6. 快速上手UIView动画
- 7. Python编程快速上手——让繁琐工作自动化（1）
- 8. 1-5分钟上手自动化测试——Airtest+Poco快速上手
- 9. grunt快速入门
- 10. grunt快速学习
- 更多相关文章...
- • Maven 自动化部署 - Maven教程
- • Eclipse 任务管理 - Eclipse 教程
- • IntelliJ IDEA 代码格式化配置和快捷键
- • SpringBoot中properties文件不能自动提示解决方法
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. 「插件」Runner更新Pro版，帮助设计师远离996
- 2. 错误 707 Could not load file or assembly ‘Newtonsoft.Json, Version=12.0.0.0, Culture=neutral, PublicKe
- 3. Jenkins 2018 报告速览，Kubernetes使用率跃升235%！
- 4. TVI-Android技术篇之注解Annotation
- 5. android studio启动项目
- 6. Android的ADIL
- 7. Android卡顿的检测及优化方法汇总（线下+线上）
- 8. 登录注册的业务逻辑流程梳理
- 9. NDK(1)创建自己的C/C++文件
- 10. 小菜的系统框架界面设计-你的评估是我的决策