给那些认为Grunt奇怪又难懂的人看的Grunt教程

http://www.html-js.com/article/Grunt-use-for-those-who-believe-that-the-Grunt-strange-and-difficult-to-see-the-Grunt-tutorial

前端工程师经常会被要求做下面这些事：

• 每次编写一小段CSS和JavaScript，然后在最后把它们拼接起来
• 压缩你的CSS和JavaScript使得它们的文件尺寸尽可能小
• 优化你的图片，在不损害图片质量的前提下减少文件尺寸
• 使用Sass来比那些CSS，使用它其中内置的有用的抽象

这些东西做起来并不容易，但是其中的一些是我们必须要去做的。你可能将它们成为任务。

我敢保证你肯定听说过Grunt，Grunt是一个任务运行器。Grunt可以为你做所有的事情。一旦你设置完成 – 这个设置过程并不困难 – 这些事情就会自动完成而无需你再去考虑。

但是我们必须面对一个事实：Grunt是那些酷小孩在使用的新鲜玩意但是第一眼看上去会感到很陌生甚至有点可怕。我听说了这些事情。因此这篇文章就是为你而写的。

首先来消除一些错误的观念

也许你已经听说过了Grunt，但是还没有用它做过任何事。我相信很多人都有这样的情况。也许下列情形的其中一条就发生在你的身上：

我不需要Grunt能做的这些事情

实际上，你真的可能需要。检查一下文章开头的的清单，这些事情做起来可不轻松。它们对于如今的网站开发来说都是至关重要的。如果你已经做过所有的事情，那么非常好。也许你使用了其他不同的工具来帮助你完成任务。Grunt可以帮助你一次性解决所有问题。所以说，如果你准备完成所有的事情，你也许应该使用Grunt来帮助你。然后，一旦你开始做这些事情，你可以持续使用Grunt来为你完成更多的事情，这常常会使你在工作中事半功倍。

Grunt运行在Node.js中 – 但是我不懂Node

你玩全不需要动Node。就像你不需要懂得Ruby就可以使用Sass一样。或者不懂PHP就可以使用Wordpress。或者不懂C++就可以使用Microsoft Word。

我可以使用其他工具来完成Grunt能帮我做的事

那些工具可以在一个地方组织多有任务，配置并且在需要的时候运行吗？可以在一个项目中的所有人之间分享任务吗？我打赌，这不太可能。

Grunt要使用命令行 – 我只是一个设计师

我也是一个设计师。我更加倾向于使用有图形界面的团建。但是我并不认为这些将发生在Grunt身上。

你需要使用的命令行仅仅是下面几条：

1.进入你项目所在的目录。

2.输入grunt并按下回车。

在设置完成之后，这些事情看起来并不困难。

好的，现在来安装Grunt

Node是Grunt能够运行的前提条件。如果你没有安装Node，不要担心，它非常简单。你只需要下载安装器并且运行它。点击Node网站上的大大的Install按钮即可。

你需要在每一个项目中安装Grunt。进入你的项目文件夹。它需要一个叫做package.json的文件位于根目录下。你可以创建一个并且将它放在那。

这个文件的内容应该是这样的：

{  "name": "example-project",  "version": "0.1.0",  "devDependencies": {    "grunt": "~0.4.1"  }}   

你可以随意改变项目名称和版本，但是devDependencies字段必须这样写。

这就是Node配置依赖模块的方式。Node拥有一个叫做NPM（Node包管理器）的东西来管理所有的Node依赖木块（就好像你在Ruby中使用gem一样）。你甚至可以将它想象成Wordpress中的插件。

一旦package.json文件编写完成，进入命令行并且进入你项目所在的文件夹。像我这样的命令行白痴通常直接将这个文件夹拖到终端中。

然后运行下面的命令：

npm install    

在你运行完这条命令之后，一个叫做node_modules的心得文件夹将出现在你的项目中。

你看到的其他的文件，README.md以及LICENSE存在是因为我将要把这个项目放到Github上，这是标准做法。

安装步骤的最后一步是安装Grunt CLI（命令行界面）。它是使得在终端中运行grunt命令的保障，没有它，在命令行中输入grunt只会得到一个“命令未找到”的错误。它需要在其他地方安装。否则，在十个项目中你必须使用十个Grunt CLI的副本。

依然是一行命令。在终端中运行下面命令：

npm install -g grunt-cli     

这时你应该关闭终端并重新打开。这是一个保证所有东西都运行正确的好习惯。就好比你在过去安装完一个软件后重启计算机一样。

使用Grunt来拼接一个文件

也许你的想没有下面三个分开的JavaScript文件：

1.jquery.js - 我们使用的JS库 
2.carousel.js - 一个我们使用的jQuery插件 
3.global.js - 我们主要的JavaScript文件，用来配置和调用插件

在生产过程中，我们由于性能的原因需要将这些文件都拼接起来（一次请求好过三次）。我们需要告诉Grunt来替我们完成这项任务。

但是等一等。Grunt实际上并不会自己做任何事情。记住Grunt是一个任务运行器。我们需要自己将任务添加进去。我们实际上还没有对Grunt进行任何设置。我先现在就来做这件事。

官方的Grunt拼接文件的插件是grunt-contrib-concat。如果你想的话可以在Github上阅读关于它的说明，但是你只需要在终端中运行命令行在你的你的项目中使用它（）：

npm install grunt-contrib-concat --save-dev   

上面的命令行完成了一件非常有意思的事情：你的package.json文件会自动更行并将这个依赖模块包含进去。打开你的package.json文件检查一下，你会看到一行新的代码：

"grunt-contrib-concat": "~0.3.0"   

现在我们已经准备好使用它了。为了使用它你需要开始配置Grunt并告诉他应该做些什么。

你通过一个叫做Gruntfile.js的文件来配置Grunt。

就像我们的package.json文件一样，我们的Gruntfile.js文件有一个非常特殊的格式。你并不需要担心这些代码意味着什么，只需要记住格式就好：

module.exports = function(grunt) {    // 1. 所有的配置将在这里进行    grunt.initConfig({        pkg: grunt.file.readJSON('package.json'),        concat: {            // 2. 拼接文件的配置将在此进行        }    });    // 3. 我们在这里告诉grunt我们将使用插件        grunt.loadNpmTasks('grunt-contrib-concat');    // 4. 我们在这里告诉grunt当我们在终端中输入grunt时需要做些什么    grunt.registerTask('default', ['concat']);};   

现在我们需要创建一个配置文件。这个文件完全可以被修改。

记住，我们现在有三个需要拼接起来的JavaScript文件。我们将会把它们的文件路径放置在一个叫做src的包含文件路径的数组中（就像带引号的字符串那样）然后我们将最终的文件设置为dest。目标文件并不需要存在。当任务运行时它会自动被创建并且将所有文件包含在一起。

我们的jquery.js和carousel.js文件都是库。我们并不会修改它们。因此，为了组织方便，我们将它们放置在/js/libs/文件夹下。我们的global.js是我们自己编写的文件，因此我们将它放置在/js/文件夹下。现在我们告诉Grunt去找到所有的文件并将它们合并为一个单独的文件叫做production.js，这个名字预示着它将被用于我们真实存在的网站中。

concat: {       dist: {        src: [            'js/libs/*.js', // All JS in the libs folder            'js/global.js'  // This specific file        ],        dest: 'js/build/production.js',    }}   

配置完了concat之后，我们回到终端中，运行下面的命令：

grunt   

看看发生了什么！production.js被创建了并且完美的包含了说那个文件。多么令人惊喜啊！当我第一次运行成功时，我感到浑身都充满了力量。让我们再做一点别的事情。

---

本文译自Grunt for People Who Think Things Like Grunt are Weird and Hard，原文地址http://24ways.org/2013/grunt-is-not-weird-and-hard/