巧用Guard提高web开发效率——编译CSS预处理器和CoffeeScript／自动刷新浏览器等

什么是Guard

Guard是一个开源的 用于处理系统文件变动的命令行工具，有很多工程师为它写了拓展插件和在github上贡献代码，让它不断变得强大。
官网
github项目地址

本文目的

现在我们利用它完成一下几个功能：
1.监听Sass／Less文件
2.监听CoffeeScript文件
3.连接css／js文件
4.保存文件自动刷新浏览器

本文基于的环境

Ubuntu 12.04 （根据文档看来，除了自动刷新浏览器的实现外，其他系统无影响）

安装Guard

Guard是用ruby写的，所以首先要有ruby环境。这里跳过安装ruby。
安装Guard和一个依赖rb-fsevent

$ gem install guard
$ gem install rb-fsevent

安装所需Guard插件

各插件相互独立，可以根据自己的需要安装。
1.sass

$ gem install guard-sass

2.less

$ gem install guard-less

3.coffeescript

$ gem install guard-coffeescript

4.连接文件

$ gem install guard-concat

5.浏览器自动刷新，用到的是livereload浏览器插件。官方没有linux版，这个是guard利用API做的。window和Mac的直接可以看这里， 也可以安装guard-livereload

$ gem install guard-livereload

使用前的工作

cd到开发目录，初始化Guard。

$ guard init

开启Guard

$ guard

SASS／Less 和 CoffeeScript

SASS／Less 和 Coffeescript 插件的用法大同小异，这里以sass为例。
先修改配置文件，找到Guardfile文件，可以看到一些配置定义。这里为了演示，添加以下配置，意思是监听“sass”文件夹内容编译到“css”文件夹：

guard 'sass', :input => 'sass', :output => 'css'
guard 'coffeescript', :input => 'cs', :output => 'js'

保存重启guard，才能是修改的配置生效。
现在在根目录新建“sass”文件夹，随意写个sass或者scss文件，保存，既可自动编译到"css"文件夹。同理，在“cs”文件夹里的coffe文件会被编译到“js”里。
更多参考戳进guard-sass, guard-less, guard-coffeescript

连接文件

同样修改配置，添加下面配置，意思是把js文件夹里的main.js和test.js合并到all.js里，且main.js在test.js之前(为避免代码之间的影响，请使用闭包)：

guard :concat, type: "js", files: %w(main test), input_dir: "js", output: "js/all"

CSS文件也可以做这样的连接

guard :concat, type: "css", files: %w(main header), input_dir: "css", output: "css/all"

还是要提醒一下，修改配置后保存，要重新开启guard

保存文件自动刷新浏览器

先安装chrome插件
修改配置，留下这段用来测试就可以。表示监听根目录下的css/js/html文件

guard 'livereload' do
  watch(%r{.+\.(css|js|html)})
end

确定开启Guard和Livereload后，就可以在保存文件时自动刷新页面，用多显示屏开发的话是特么滴爽。没有多显示屏的，可以把编辑器设置为离开时自动保存，就可以在写好代码后直接切换到浏览器，编辑器自动保存，外加浏览器自动刷新，自动神马的最有爱了～
此插件官网

写在后面

Guard还有很多强大的插件，有兴趣的可以研究一下：更多插件列表
上面这些功能用Gruntjs也能实现，但是Gruntjs很流行，少有人用Guard，我很不理解。这是我在SegmentFault提的问题关于Gruntjs和Guard的区别,请路过的大神帮忙解惑一下，谢谢～