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

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

使用Grunt压缩JavaScript文件

在正式开始之前我们需要做很多准备工作，添加新的任务到Grunt中非常简单。我们只需要做：

1.找到一个我们需要的Grunt插件 
2.学习这个插件的配置风格 
3.将配置在项目中使用

官方提供的压缩代码的插件是grunt-contrib-uglify。就像我们在前面所做的那样，我们运行一个NPM命令来安装它：

npm install grunt-contrib-uglify --save-dev

然后我们修改Gruntfile.js文件来载入这个插件：

grunt.loadNpmTasks('grunt-contrib-uglify');   

然后我们来配置它：

uglify:{
        build:{
                src: 'js/build/production.js',
                dest: 'js/build/production.min.js'
        }
}

我们现在更新default任务来运行压缩任务：

grunt.registerTask('default',['concat','uglify']);

和拼接文件的设置非常相似，不是吗？

在终端中运行grunt你将会得到一个压缩的很好的JavaScript文件：

这个production.min.js文件是我们将在index.html中使用的js文件。

使用Grunt来优化我们的图片

我们现在对此已经很熟悉了。Grunt官方挺高的图片压缩插件是grunt-contrib-imagemin，安装它：

npm install grunt-contrib-imagemin –save-dev

在Gruntfile.js中注册它：

grunt.loadNpmTasks(’grunt-contrib-imagemin’);

配置它：

imagemin:{
        dynamic:{
                files:[{
                        expand: true,
                        cwd:    'images/',
                        src:    ['**/*.{png,jpg,gif}'],
                        dest:   'images/build/'
                }]
        }
}

确保它能运行：

grunt.registerTask('defauly',['concat','uglify','imagemin']);    

运行grunt命令然后你会看到图片压缩发生了：

你现在一定开始喜欢这种毫不费力的工作方式了。

让Grunt变得更加聪明又自动化

到目前为止，我们做的所有事情都很有用且完美。但是我们还可以做一些其他的事情来让事情变得更加简单容易，对于Grunt来说也一样：

1.当任务应该运行时自动运行任务 2.只在需要的时间运行任务

例如：

1.当JavaScript文件发生变化时拼接斌并压缩JavaScript文件 
2.当添加新图片或者旧图片发生变化时压缩图片

我们可以通过监视文件来完成这项任务。我们可以告诉Grunt时刻注意观察文件发生的变化，并在变化发生时自动运行相应的任务。监视任务可以通过官方插件grunt-contrib-watch来完成。

我不会告诉你如何安装它。安装它的过程和前面几个一模一样。我们在配置中指定几个特定的文件（或文件夹）来监视。监视意味着对文件变化，文件删减，以及文件增加。然后我们告诉它当它侦测到变化是需要运行什么任务。

我们想要在/js/文件夹下的文件发生变化时运行拼接和压缩任务。当变化发生时，我们应该运行相应的JavaScript任务。当其他变化发生时，我们不应该运行相应的JavaScript任务，因为它是不相关的。因此：

watch: { scripts: { files: ['js/*.js'], tasks: ['concat', 'uglify'], options: { spawn: false, }, } }

现在觉得一切都很熟悉，对吗？唯一有点陌生的是spawn。你知道吗？我其实一点都不关心它是用来做什么的。我从文档里学到的是它是一个很好的默认配置。这是现实世界中的开发。要是它管用了，把他放到一边，要是没用，那么继续学习研究。

注意：当你发现教程中一些看似简单的东西在实际操作时没有用是不是很纠结？如果你在做了一些修改之后发现Grunt没有正确运行，那么极有可能是你的Gruntfile.js文件发生了语法错误。此时终端中会显示下面的东西：

通常情况下Grunt都会让你了解到究竟是什么地方发生了错误，因此确保你阅读了错误信息。在这个例子中，我因为漏写了一个逗号而引发了语法错误。将逗号添加进去即可正常运行。

使用Grunt来做预处理

我们文章顶部列表中的最后一项是使用Sass – 这也是一个Grunt任务 – Grunt会帮助我们来处理它。但是等等？Sass不是要在Ruby环境下运行吗？确实是这样。现在已经有一个运行在Node中的Sass版本并且我们不需要在项目中添加额外的依赖模块，但是它并不能等同于主要的Ruby项目。因此，我们使用官方的grunt-contrib-sass插件并且假设你已经在你的电脑中安装了Sass。

Sass任务中很有用的一点是它能够完全自动拼接并压缩文件。因此对于我们的小项目我们只需要让它编译我们主要的global.css文件：

sass: { dist: { options: { style: 'compressed' }, files: { 'css/build/global.css': 'css/global.scss' } } }

我们并不想要手动运行这个任务。我们已经安装了watch插件。现在我们就来使用它！在watch的配置中，我们添加另一个子任务：

css: { files: ['css/*.scss'], tasks: ['sass'], options: { spawn: false, } }

这样就完成了。现在，每次我们改变我们的Sass文件时，CSS都会自动被更新。

我们再进一步（这绝对值得）并且添加实时更新。有了实时更新，你需在需要回到你的浏览器刷新页面。页面刷新会自动发生并且连同新的样式一起被刷新。

它非常容易设置，因为实时刷新功能已经内建在了watch插件中。我们只需要：

1.安装browser插件 
2.在watch配置配置的顶部添加代码：

watch: { options: { livereload: true, }, scripts: { 
/* etc */

3.重启浏览器并且点击实时刷新按钮来激活它 
4.更新一些Sass来观察页面的自动改变

这是在是太好了！！！

---

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