我将帮助你开始使用Grunt，这是一个开源的JavaScript任务运行器，它将帮助你自动化一些web开发任务。Grunt将加速和改善你的建造过程。我的这个Grunt教程的目标是让你体验我通过这个出色的任务运行器获得的同样的效率提高。
呼噜声是什么?
当我开始在CDNify(游戏邦注:我们是面向网页开发者，初创公司和数字机构的内容交付网络)担任前端网页开发者时，我完全不知道Grunt是什么，也不知道它如何显著改善我的开发工作流程。几个月过去了，我现在每天都在使用Grunt。
我无法想象我的前端web开发工作流程现在没有它。简而言之,咕哝着说是一个开源的JavaScript项目，可以自动完成web开发人员经常要做的重复性任务。使用Grunt，您可以自动化诸如缩小、单元测试、准备用于生产的文件和网站资产等任务。
Grunt通过将这些过程包装成任务。以下是一些你可以使用Grunt自动化的事情:
- 优化您的网络图像的速度和性能
- 分析代码中潜在的错误(通常称为产品毛羽）
- 整合外部资源更快的页面加载时间
- 在整个项目的代码库中加强编码风格指南的一致性和可读性
- 从你选择的预处理器(例如Sass和Less)编译你的CSS
你反复做的任何事情都可以被称为Grunt。
您可以配置Grunt以监视某些文件的更改，然后动态构建结果。
在Web开发团队中使用Grunt
当在团队环境中使用Grunt时，它可以帮助团队中的每个人编写遵循相同标准/风格指南的代码。控制代码缩进等细节现在可以成为一个严格的过程，因为如果任何部分抛出错误，整个构建将失败。例如，当缩进代码时，您可以自动强制使用空格而不是制表符(反之亦然，这取决于您的偏好)，这将确保整个团队具有相同的配置。
当团队成员将代码推送到存储库时，它是预期的格式。Grunt将帮助您捕获草率的代码，例如缺少分号、没有括号的控制语句、未使用的变量，以及在与您喜欢的代码质量工具(例如JSHint)结合使用时尾随空格。
这对于发现人为错误以及禁止有效的(但编写得很糟糕的)JavaScript非常有用。
你需要知道的
为了充分利用Grunt，你应该首先了解(或学习)以下内容。
命令行界面
为了有效地使用Grunt，您需要对命令提示符/终端有基本的了解。至少，您应该知道如何在系统上导航到一个目录，并通过CLI在上面运行命令。如果你不习惯使用cli，请先阅读本教程:开始使用命令行接口．
不要推辞;一旦开始使用CLI，您会发现它使用起来非常简单。命令行是一个非常强大的工具。知道如何有效地使用Grunt可以加快开发工作流程，而不仅仅是能够使用Grunt。
了解CLIs是一项有价值的投资。
2 .可选:版本控制系统
虽然使用Grunt在技术上不是必需的，但Grunt在使用版本控制的环境中工作得最好。使用Grunt用于一个可能不经常更新的小型静态网站可能会被认为是多余的。任何比这更大的web开发项目都应该以任何方式进行版本控制。
在大型网站上，Grunt变得非常重要和有用。读到这Git新手教程列表或者这个Git入门指南来帮助您开始使用Git，这是一个流行的版本控制系统。
从Grunt开始
我将介绍安装Grunt的一般步骤，这是一个依赖于Grunt的过程node . js(网络应用程序的开源开发平台)。
安装node . js
为了安装Grunt，node . js必须首先安装或可在您的开发环境，其中可以是您的个人计算机或web服务器。如果你需要帮助，读这个:如何安装Node.js．安装Node.js允许我们使用Node.js的包管理器来安装Gruntnpm。
安装繁重
接下来，需要安装Grunt及其依赖项。只要运行这个命令:
NPM安装-g grunt在Web开发项目中使用Grunt
现在您已经安装了Grunt，让我们来看看如何在web开发项目中使用它的基础知识。要在web开发项目中使用Grunt，我们需要两个文件:package.json和一个Gruntfile(如。Gruntfile.js)．
package.json
package.json是JSON文件。该文件应该位于项目的根目录中。中指定项目信息和设置package.json，例如项目名称、版本、作者，以及是否为私有项目。
package.json也包含了Node.js中所谓的devDependencies。devDependencies是项目所需的项目。在这个意义上，Grunt将被列在devDependencies，以及您希望用于项目的Grunt插件(我将在后面讨论这个问题)。
下面是一个示例模板package.json文件:
{"name": "Project name"， "version": "version number"， "author": "Your name"， "private": true，" devDependencies ": {" grunt ": " ~0.4.0 "}}通过在package.json，我们可以使用NPM来自动安装它们，只需在我们的项目目录下运行以下命令:
npm安装运行这个命令会得到这样的输出:
npm http GET https://registry.npmjs.org/grunt npm http 304 https://registry.npmjs.org/grunt npm http GET https://registry.npmjs.org/async npm http GET https://registry.npmjs.org/dateformat/1.0.2-1.2.3 npm http GET https://registry.npmjs.org/colors npm http GET https://registry.npmjs.org/coffee-script npm http GET https://registry.npmjs.org/glob npm http GET https://registry.npmjs.org/iconv-lite npm http GET https://registry.npmjs.org/findup-sync npm http GET https://registry.npmjs.org/lodash npmhttp GET https://registry.npmjs.org/js-yaml npm http GET https://registry.npmjs.org/hooker npm http GET https://registry.npmjs.org/minimatch npm http GET https://registry.npmjs.org/nopt npm http GET https://registry.npmjs.org/which npm http GET https://registry.npmjs.org/rimraf npm http GET https://registry.npmjs.org/underscore.string npm http GET https://registry.npmjs.org/eventemitter2 npm http 304 https://registry.npmjs.org/async npm http 304 https://registry.npmjs.org/dateformat/1.0.2-1.2.3 npm http GET https://registry.npmjs.org/dateformat/-/dateformat-1.0.2-1.2.3.tgz npm http 304 https://registry.npmjs.org/glob npm http 304 https://registry.npmjs.org/colors npm http 304 https://registry.npmjs.org/iconv-lite npm http 304 https://registry.npmjs.org/findup-sync npm http 304 https://registry.npmjs.org/lodash npm http 304 https://registry.npmjs.org/js-yaml npm http 304 https://registry.npmjs.org/hooker npm http 304 https://registry.npmjs.org/minimatch npm http 304 https://registry.npmjs.org/which npm http 304 https://registry.npmjs.org/rimraf npm http 304 https://registry.npmjs.org/underscore.string npm http 200 https://registry.npmjs.org/coffee-script npm http 304 https://registry.npmjs.org/eventemitter2 npm http 200 https://registry.npmjs.org/nopt npm http 200 https://registry.npmjs.org/dateformat/-/dateformat-1.0.2-1.2.3.tgz npm http GET https://registry.npmjs.org/graceful-fs npm http GET https://registry.npmjs.org/abbrev npm http GET https://registry.npmjs.org/sigmund npm http GET https://registry.npmjs.org/lru-cache npm http GET https://registry.npmjs.org/graceful-fs npm http GET https://registry.npmjs.org/inherits npm http GET https://registry.npmjs.org/argparse npm http GET https://registry.npmjs.org/esprima npm http 304 https://registry.npmjs.org/graceful-fs npm http 304 https://registry.npmjs.org/abbrev npm http 304 https://registry.npmjs.org/lru-cache npm http 304 https://registry.npmjs.org/graceful-fs npm http 304 https://registry.npmjs.org/sigmund npm http 304 https://registry.npmjs.org/inherits npm http 304 https://registry.npmjs.org/argparse npm http 304 https://registry.npmjs.org/esprima npm http GET https://registry.npmjs.org/underscore npm http 304 https://registry.npmjs.org/underscore(电子邮件保护)node_modules /繁重? ?(电子邮件保护)?？?(电子邮件保护)?？?(电子邮件保护)?？?(电子邮件保护)?？?(电子邮件保护)?？?(电子邮件保护)?？?(电子邮件保护)?？?(电子邮件保护)?？?(电子邮件保护)?？?(电子邮件保护)?？?(电子邮件保护)（(电子邮件保护)) ? ?(电子邮件保护)（(电子邮件保护)) ? ?(电子邮件保护)（(电子邮件保护)) ? ?(电子邮件保护)（(电子邮件保护)，(电子邮件保护)) ? ?(电子邮件保护)（(电子邮件保护)，(电子邮件保护)) ? ?(电子邮件保护)（(电子邮件保护)，(电子邮件保护)）Gruntfile
Gruntfile是项目的主要配置文件，它指定了Grunt应该运行哪些任务，以及它们影响项目中的哪些文件。你的项目的Gruntfile可以是一个JavaScript文件(Gruntfile.js)或CoffeeScript文件(Gruntfile.coffee)．在本教程中，我们将使用JavaScript。
在它最基本的形式，Gruntfile应该包含以下内容:
模块。导出=函数(grunt){grunt.initConfig({pkg: grunt.file.readJSON('package.json')});咕哝着说.registerTask(“违约”,[]);}；initConfig是指定依赖项选项的地方。每个Grunt插件都使用一个JSON对象进行配置(有些例外)。有些插件允许加载多个配置。
例如，可能有一组特定的实验性JavaScript使用了与jQuery不同的库，因此该库必须在JSHint配置中预定义，而不是jQuery。(我们将在Grunt教程系列的第三部分更详细地讨论这个问题。)registerTask可以指定多次。当在命令行中执行Grunt时，将运行默认任务，因此它应该包含常见的设置任务。
此时，如果你成功运行Grunt，它将生成如下输出:
完成,没有错误。现在我们有了一个项目框架，一旦我们使用一些插件，它就会变得很有用。
使用繁重插件
Grunt的一个关键特性是Grunt插件的使用。Grunt插件被称为gruntplugins在Grunt的命名法中gruntplugin是用户贡献的模块，它可以帮助您自动化任务，而无需编写自己的任务脚本。
例如，您可以使用grunt-contrib-compressGruntplugin压缩和优化你的项目文件的文件大小。要在项目中使用插件，需要采取以下步骤:
- 把它列为
devDependency对象package.json - 使用
loadNpmTasks函数在项目的Gruntfile中 - 控件注册任务
registerTask函数在项目的Gruntfile中 - 运行
npm安装来安装Grunt和插件
下面是在项目中使用grunt-contrib-compress gruntplugin的示例源代码。package.json
{"name": "My Sample Project"， "version": "1.0"， "author": " Ben Briggs"， "private": true， "devDependencies": {"grunt": "~0.4.0"，:“grunt-contrib-compress ~ 0.5.2”}}Gruntfile
模块。导出=函数(grunt){grunt。initConfig（{ pkg: grunt.file.readJSON('package.json') });grunt.loadNpmTasks(“grunt-contrib-compress”);grunt.registerTask(“违约”,(压缩)）;}；Grunt插件实际上只是遵循gruntplugin模板的npm模块。你可以在npm注册表中通过浏览标记为“”的模块找到gruntpluginsgruntplugin或在官方繁重的插件页面。
目前有超过300个列出的gruntplugin。
总结
以下是我们在本教程中涉及到的内容:
- Grunt是什么，它是如何帮助web开发人员加快工作流程的
- Grunt和Node.js的安装
- Grunt在web开发项目中的普遍使用
- 如何使用gruntplugin
