grunt翻译（grunt）
你们好，最近小活发现有诸多的小伙伴们对于grunt翻译，grunt这个问题都颇为感兴趣的，今天小活为大家梳理了下，一起往下看看吧。
1、要使用Grunt，第一件事是安装Node.js。（即使你没用过Node.js也不用担心——你只需安装它让Grunt能运行。）
2、安装了Node.js之后，用命令行工具执行以下命令：
3、$ npm install -g grunt-cli
4、要确认Grunt是否正确安装，可以使用以下命令：
5、$ grunt --version
6、下一步是在你的项目的根目录下创建package.json和gruntfile.js两个文件。
7、创建package.json文件
8、这个JSON文件让我们指定我们的开发环境所依赖的必须模块。有了它，项目的所有开发者都能保证安装上一致的必须模块，从而保证所有人拥有一样的开发环境。
9、在项目根目录下的pacakge.json文件中写上：
10、{
11、"name" : "SampleGrunt",
12、"version" : "0.1.0",
13、"author" : "Brandon Random",
14、"private" : true,
15、"devDependencies" : {
16、"grunt" : "~0.4.0"
17、}
18、}
19、然后在命令行工具运行：
20、$ npm install
21、该命令告诉npm需要安装的必须模块，npm会安装它们，自动保存在项目根目录下一个叫做node_modules的文件夹里。
22、创建gruntfile.js文件
23、gruntfile.js文件本质上就是一个wrapper函数，接受grunt作为参数：
24、module.exports = function(grunt){
25、grunt.initConfig({
26、pkg: grunt.file.readJSON('package.json')
27、});
28、grunt.registerTask('default', []);
29、};
30、现在你已经可以在项目根目录下运行grunt命令行工具了。
31、$ grunt
32、> Task "default" not found. Use --force to continue.
33、这里我们只指定了Grunt作为必须模块，还没定义任何任务。接下来我们就要指定任务和必须模块。首先来看如何拓展package.json文件。
34、拓展package.json文件
35、使用Node.js最好的一点，就是它可以根据package.json文件的内容，一次性查找和安装多个package。要安装我们项目的所有必须任务，只须在package.json文件中加上以下内容：
36、{
37、"name" : "SampleGrunt",
38、"version" : "0.1.0",
39、"author" : "Mike Cunsolo",
40、"private" : true,
41、"devDependencies" : {
42、"grunt" : "~0.4.0",
43、"grunt-contrib-cssmin": "*",
44、"grunt-contrib-sass": "*",
45、"grunt-contrib-uglify": "*",
46、"grunt-contrib-watch": "*",
47、"grunt-cssc": "*",
48、"grunt-htmlhint": "*",
49、"matchdep": "*"
50、}
51、}
52、那么如何实现安装？你肯定已经猜到了：
53、$ npm install
54、使用Grunt载入任务
55、package安装好后，还必须被Grunt载入才能为我们所用。使用matchdep，我们用一行代码就可以自动载入所有任务。这是开发流程的一大优化，因为现在我们只须把必须任务列表写在package.json一个文件里，便于管理。
56、在gruntfile.js里，grunt.initConfig之上，写上以下代码：
57、require("matchdep").filterDev("grunt-*").forEach(grunt.loadNpmTasks);
58、要是没有matchdep，我们就必须为每一个必须任务写一次grunt.loadNpmTasks(“grunt-task-name”);，随着我们使用的任务的增加，这些载入任务的代码很快就会变得相当繁冗。在Grunt载入这些任务前，我们还可以指定设置选项。
59、现在我们需要创建我们的HTML文件（index.html）：
60、<!DOCTYPE html>
61、<html lang="en">
62、<head>
63、<meta charset="utf-8">
64、<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;">
65、<title>Enter your first name</title>
66、<link rel="stylesheet" href="build/css/master.css">
67、</head>
68、<body>
69、<label for="firstname">Enter your first name</label>
70、<input id="firstname" name="firstname" type="text">
71、<p id="namevalidation" class="validation"></p>
72、<script type="text/javascript" src="build/js/base.min.js"></script>
73、</body>
74、</html>
75、用HTMLHint验证HTML
76、在grunt.initConfig里加入下列设置代码：
77、htmlhint: {
78、build: {
79、options: {
80、'tag-pair': true,
81、'tagname-lowercase': true,
82、'attr-lowercase': true,
83、'attr-value-double-quotes': true,
84、'doctype-first': true,
85、'spec-char-escape': true,
86、'id-unique': true,
87、'head-script-disabled': true,
88、'style-disabled': true
89、},
90、src: ['index.html']
91、}
92、}
93、一般来说，一个plugin的设置方法如下：plugin的名称（去掉grunt-contrib-或grunt-前缀），选择使用此plugin的一个或多个对象（在这里可以给不同文件设置此plugin的不同选项），一个选项object，以及plugin要作用的对象。现在，如果我们用命令行工具运行grunthtmlhint，该plugin就会检查我们在src里指定的HTML文件，验证其中有没有错误！但是每个小时都要手动运行几次这个任务，很快就让人觉得很繁琐了。
94、自动化任务运行
95、watch是一个特殊的任务，它可以在目标文件保存时自动触发一系列任务的运行。在grunt.initConfig里加入以下设置：
96、watch: {
97、html: {
98、files: ['index.html'],
99、tasks: ['htmlhint']
100、}
101、}
102、然后，在命令行工具中运行gruntwatch命令。现在，你可以试试在index.html里加一行注释，保存文件。你会注意到，保存文件时会自动触发HTML的验证！这是对开发流程的一大优化：在你写代码时，watch任务就会默默同时为你验证代码，如果验证失败任务就会报告失败（它还会告诉你问题在哪）。
103、注意gruntwatch任务会一直运行，直到命令行工具关闭，或手动停止（control+c在Mac中)。
104、保持JavaScript极简
105、让我们来写一个验证用户输入的名字的JavaScript文件。简便起见，我们这里只检查其中是否含有非字母的字符。我们的JavaScript会使用strict模式，这可以防止我们写可用但低质量的JavaScript。创建assets/js/base.js文件并在其中写上：
106、function Validator()
107、{
108、"use strict";
109、}
110、Validator.prototype.checkName = function(name)
111、{
112、"use strict";
113、return (/[^a-z]/i.test(name) === false);
114、};
115、window.addEventListener('load', function(){
116、"use strict";
117、document.getElementById('firstname').addEventListener('blur', function(){
118、var _this = this;
119、var validator = new Validator();
120、var validation = document.getElementById('namevalidation');
121、if (validator.checkName(_this.value) === true) {
122、validation.innerHTML = 'Looks good! :)';
123、validation.className = "validation yep";
124、_this.className = "yep";
125、}
126、else {
127、validation.innerHTML = 'Looks bad! :(';
128、validation.className = "validation nope";
129、_this.className = "nope";
130、}
131、});
132、});
133、让我们用UglifyJS来极简化这个源代码，在grunt.initConfig中加上以下设置：
134、uglify: {
135、build: {
136、files: {
137、'build/js/base.min.js': ['assets/js/base.js']
138、}
139、}
140、}
141、UglifyJS会替换所有的变量和函数名，剔除所有空白和注释，从而生成占据最小空间的JavaScript文件，对发布非常有用。同样地，我们需要设置一个watch任务来使用它，在watch的设置里加入以下代码：
142、watch: {
143、js: {
144、files: ['assets/js/base.js'],
145、tasks: ['uglify']
146、}
147、}
148、现在我们有了一个静态HTML页面，一个存放Sass和JavaScript源文件的assets文件夹，一个存放优化后的CSS和JavaScript的build文件夹，以及package.json文件和gruntfile.js文件。
149、至此你已经有了一个不错的基础来进一步探索Grunt。像之前提到的，一个非常活跃的开发者社区在为Grunt开发前端plugin。我建议你现在就到pluginlibrary去看看那300个以上的plugin。
以上就是grunt这篇文章的一些介绍，希望对大家有所帮助。
免责声明：本文由用户上传，如有侵权请联系删除！
猜你喜欢
- 01-13
- 01-13
- 01-13
- 01-13
- 01-13
- 01-13
- 01-13
- 01-13
最新文章
- 01-13
- 01-13
- 01-13
- 01-13
- 01-13
- 01-13
- 01-13
- 01-13