Windows环境下使用Guard整合Compass和Livereload进行SASS的开发
配置运行环境
Guard,Compass 和 Livereload 是 Ruby 的 Gem 套件,需要 Ruby 运行环境。另外还需要安装 Ruby 的扩展开发包 Development-Kit,以实现 Livereload 的功能和 SASS 的编译。最后需要 Bundler 用于打包 Gem 依赖。
安装 Ruby
- 下载并安装 Rubyinstaller。
- 安装过程中勾选相关设置,这样可以直接通过cmd命令行操作(不必手动添加Path)。
- 安装完成后,在 CMD 窗口运行
ruby --version
,若安装成功会显示 Ruby 版本信息。
安装 Development-Kit
- 下载 Development-Kit。
- 将其解压到某个目录,例如:C:/DevKit/。
- 打开你的Development-Kit所在的位置,在里面执行以下命令:
ruby dk.rb init
ruby dk.rb install
安装 Bundler
- 更新 Gem 系统,然后安装 Bundler:
gem update --system
gem install bundler
使用 Bundler 打包所需的 gem 依赖
- 打开用户目录,增加 Gemfile 和 .Guardfile 这两个文件(文件内容见文末附件)。
Shift+右键调出当前目录CMD窗口,运行如下命令:
bundle
Bundler 会根据 Gemfile 中的配置安装 Compass 和 SASS 等 gem,安装过程会比较久,打杯水静静等待 gem 安装完成或执行下一步安装浏览器的 Livereload 插件。
给浏览器安装 Livereload 插件
Safari:Safari extension 2.0.9
Chrome:Chrome extension on the Chrome Web Store
Firefox:Firefox extension 2.0.8
详见 Livereload 的官网:http://feedback.livereload.com/knowledgebase/articles/86242-how-do-i-install-and-use-the-browser-extensions-
运行 Guard
- 在项目目录中运行:
guard
。 - 打开浏览器,点击浏览器的 Livereload 图标。
至此完成所有的配置,Compass 会检测 Gemfile 定义文件的改动,生成 CSS,并自动刷新浏览器。
附件
以下是 Gemfile 和 .Guardfile 的内容:
Gemfile
source "http://rubygems.org" group :development do
gem 'compass' # Depends on Sass, will be installed automatically.
# gem 'compass-960-plugin' # 960.gs
# gem 'compass-validator' # So you can `compass validate`.
# gem 'oily_png' # Faster Compass sprite generation.
# gem 'css_parser' # Helps `compass stats` output statistics.
gem 'guard-compass' # Compile on sass/scss change.
gem 'guard-livereload' # Browser reload.
gem 'yajl-ruby' # Faster JSON with LiveReload in the browser.
end
.Guardfile
# More info at https://github.com/guard/guard#readme notification :off # Current watch directory must contain the Compass config file.
if File.exists?("./config.rb")
# https://github.com/guard/guard-compass
guard 'compass' do
watch(%r{(.*)\.s[ac]ss$})
end
end # If current or child directories has files we want to monitor for live changes.
# This may throw an error with ruby <.9.
require 'find'
if Find.find(Dir.pwd).detect{|dir|dir=~/.+\.(css|js|html?|php|inc)$/}
# https://github.com/guard/guard-livereload
guard 'livereload' do
watch(%r{.+\.(css|js|html?|php|inc)$})
end
end
Windows环境下使用Guard整合Compass和Livereload进行SASS的开发的更多相关文章
- 在windows环境下运行compass文件出现的错误提示解决方案
在windows环境下运行compass文件出现的错误提示解决方案 例如:经常在项目中运行grunt命令编译scss文件的时候,会出现下面的错误提示 (Encoding::CompatibilityE ...
- Windows环境下用C#编程将文件上传至阿里云OSS笔记
Windows环境下用C#编程将文件上传至阿里云OSS笔记 本系列文章由ex_net(张建波)编写,转载请注明出处. http://blog.csdn.net/ex_net/article/detai ...
- Windows环境下JDK的配置及多版本JDK切换的方法记录
(这里记录了笔者了解的关于JDK环境配置的信息,以及针对系统上存在不同版本JDK时所尝试的解决方案.具体来说,是已安装 JDK 8 后,又安装了 JDK 9 时所遇到的问题和尝试的解决方法.这次记录以 ...
- 关于docker在windows环境下运行的第一次体验
关于docker在windows环境下执行的原理 1.1. 首先是Docker Quickstart启动,如果在虚拟机Oracle VM VirtualBox不存在default虚 ...
- Redis在windows环境下ThinkPHP的安装和使用
1.Redis概述: 2.Redis在windows环境下的安装: 下载地址:https://github.com/dmajkic/redis/downloads,选取其中一个zip压缩包:
- 【经验之谈】Git使用之Windows环境下配置
前言 安装 配置 关于git使用的几个问题 后记 关于代码托管,以前用过vss和svn,看博客或论坛的时候,经常有人提到github,有很多著名的开源软件都托管在github,想来肯定不错(莫笑),当 ...
- 【经验之谈】Windows环境下配置WordPress
前言 wordpress全球著名的开放博客平台,拥有成千上万个各式插件和不计其数的主题模板样式,使用php和mysql搭建,下面说下载windows环境下配置wordpress,经验之谈. 安装 关于 ...
- 在 windows 环境下安装 redislive
这是一篇在 windows 环境下安装 redislive 的教程! 项目地址:https://github.com/nkrode/RedisLive 配置文档:http://www.nkrode.c ...
- Windows环境下MongoDB的安装与配置
MongoDB是一种高性能的文档型数据库,现介绍一下在Windows环境下MongDB的安装与配置 获取MongoDB 打开官方网站 www.mongodb.org,找到页面右上解的DownLoad链 ...
随机推荐
- Unity3D项目
Input.mousePosition //鼠标点击的位置 0 左键 1右键 2滚轮 Input.GetMouseButton(0) //当鼠标左键处于按下状态的时候返回True Input.Ge ...
- Unity 自己旋转 方法
transform.Rotate(Vector3.up * Time.deltaTime * 100);
- Unity 声音播放不受Time.scale为0的影响
其他会暂停,目前发现声音不受影响 嗯,就这样.
- python简单的购物系统
#coding = utf-8 #2016-11-19#我的工资是存在文件中的,执行后会判断是否存过工资,如果存过无需输入,直接购物,没存过需要输入工资#wages.txt是存工资的文件 import ...
- Vue学习之路第二篇:插值表达式
要开始写Vue的功能了,是不是很激动呢!开始吧! 1.首先建立一个html页面,导入Vue js包 <script type="text/javascript" src=&q ...
- NodeJS踩坑实录
nodejs的常用api url 主要是配置一系列和路径相关的信息 url.parse(urlString[, parseQueryString[, slashesDenoteHost]]) 将一个U ...
- c++里面的单冒号和双冒号
c++ 中的单冒号与双冒号 1.冒号(:)用法 (1)表示机构内位域的定义(即该变量占几个bit空间) typedef struct _XXX{ unsigned char a:4; unsigned ...
- [luogu] P2519 [HAOI2011]problem a (贪心)
P2519 [HAOI2011]problem a 题目描述 一次考试共有n个人参加,第i个人说:"有ai个人分数比我高,bi个人分数比我低."问最少有几个人没有说真话(可能有相同 ...
- VUE:内置指令与自定义指令
VUE:内置指令与自定义指令 常用的内置指令 1)v:text 更新元素的 textContent 2)v-html 更新元素的 innerHTML 3)v-if 如果为true,当前标签才会输出到页 ...
- STM32 的 printf() 函数串口重定向(HAL库标准库都适用)
1.建立工程 2.核心:添加新文件usar_fputc.c (名字随便自己命名),把文件添加到项目中去 #include "stdio.h" #include "stm3 ...