grunt 执行
几天以前,我决定开始启用一个CSS预处理器,找了很久,我选择了SASS并且尝试着去安装它。但是这似乎不是一件简单的事,在安装过程中出现了许多让我始料不及的问题,我很沮丧,但查找了很多资料,我终于找到了一个正确的安装它的方法。
因此在本文中,我将向你展示两件事:
- 怎样去安装Ruby,SASS和Compass样式框架
- 怎样去处理一些可能在安装过程中出现的常见问题
你可能已经去过《SASS的FAQ》页面,不过一般基本上都是说“当你需要安装并运行SASS时,请下载Ruby”。
在我看来,对于很多人来说,手册上给予的安装教程说明远远不够,这是我自己一步一步的安装过程,详细的记录下来,希望能帮助到你。
安装Ruby
第一步、点此进入Ruby Installer for Windows下载页面,下载Ruby的最新版。
第二步、运行安装下载的Ruby.exe文件,选择你的语言,接受条款协议,到这里都没有什么特别的地方。点击下一步屏幕会出现如下图的框,这一步很重要,主要就是要完成添加Ruby的可执行路径到你的环境变量里,再点击下一步完成安装。

第三步、打开命令提示符窗口,即DOS黑窗口。(这相信这个窗口你应该很熟悉)
第四步、到了这儿就差不多大功告成了,你只要检测一下你安装的Ruby是否运行正常,在黑窗口的提示符输入以下命令:
ruby –v
如果你看到一行显示结果为“ruby x.x.x....”等版本平台信息,这意味着你的Ruby安装成功并正常运行了(如下图)。

如果你得到一个错误消息说“ruby没有被识别为内部或外部命令,操作或批处理文件” 你可能在安装过程中忽略了第2步的检查框。 那么请你卸载Ruby,再次运行安装,这一次一定要确保你检查了Ruby可执行文件添加到您的环境变量中。
(重新安装是最简单的方式来解决这个问题。 但是,如果你不想这样做,请看《如何手动添加ruby可执行文件到您的环境变量》 )。
安装SASS
第五步、现在就该安装你的CSS预处理器了,回到命令提示符窗口,并在窗口中输入以下命令:
因为墙的原因,你安装的过程中可能会报错,这个时候你需要停掉ruby默认源,更改为国内淘宝的源
$ gem sources --remove https://rubygems.org/
$ gem sources -a http://ruby.taobao.org/
$ gem sources -l
*** CURRENT SOURCES *** http://ruby.taobao.org
gem install sass
这里等待30秒的样子,看到几条信息就成功安装了(如下图)。

第六步、检查你的SASS是否安装正常,输入以下命令:
sass –v
不出意外的话,将会打印一行显示SASS的版本号。
安装Compass样式框架
第七步、安装Compass,就像安装SASS一样。
gem install compass
键入命令测试是否正常:
compass -v

如果直到安装到现在都没出现问题的话,说明你已经完成SASS的全部安装。
当你尝试着安装这些软件的时候,会出现许多你意想不到的错误,不要担心这个。安装任何的软件都不是那么顺心如意,比如经常会得到如下的错误信息:
Could not find a valid gem ‘compass (>= 0) in any repository.
或
者你出现的错误信息与这些都不相同,但不管怎样,当你遇到这些问题时,你的第一反应就是“google”或者“百度”,并且有着尝试修复一下。很糟糕的事
又来了,你对那些命令行一无所知,并且又没有现成的教程供你使用,“百度”、“google”又也查找不了有用的信息提供参考。
解决方案有两个:
- 切换到另一条网络连接,再尝试重新安装一次
- 如果安装还是不能通过,仍得到相同的错误结果,那么请你移步到《手动安装SASS和Compass样式框架》页面,这里有些好的建议,可能会解决你的问题。
先打开node.js的shell(打开cmd执行不了)
执行grunt --version 即可查看grunt的版本
grunt 执行的更多相关文章
- Grunt-cli的执行过程以及Grunt加载原理
通过本篇你可以了解到: 1 grunt-cli的执行原理 2 nodeJS中模块的加载过程 Grunt-cli原理 grunt-cli其实也是Node模块,它可以帮助我们在控制台中直接运行grunt命 ...
- grunt自定义任务——合并压缩css和js
npm文档:www.npmjs.com grunt基础教程:http://www.gruntjs.net/docs/getting-started/ http://www.w3cplus.com/to ...
- 前端构建工具的用法—grunt、gulp、browserify、webpack
随着前端项目的飞速发展,项目越来越大.文件越来越多,前端工程化的工具也越来越多.下面介绍目前最流行的四种构建工具——grunt.gulp.browserify.webpack 所有的构建工具都是基于N ...
- 折腾一两天,终于学会使用grunt压缩合并混淆JS脚本,小激动,特意记录一下+spm一点意外收获
很长时间没有更新博客了,实在是太忙啦...0.0 ,以下的东西纯粹是记录,不是我原创,放到收藏夹还担心不够,这个以后常用,想来想去,还是放到这里吧,,丢不了..最后一句废话,网上搜集也好原创也罢,能解 ...
- 基于Grunt&Mocha 搭建Nodejs自动化单元测试框架(含代码覆盖率统计)
Introduction Grunt 是一个基于任务的JavaScript 世界的构建工具 Mocha 是具有丰富特性的 JavaScript 测试框架,可以运行在 Node.js 和浏览器中,使得异 ...
- Grunt备忘录
一.安装Grunt 应在全局环境下安装Grunt,以保障在任何目录下都能够正确找到grunt npm install grunt-cli -g 二.对已有Grunt基本目录结构文件进行操作 Grunt ...
- 前端开发 Grunt 之 Connect
在前端开发过程中,我们需要在开发过程中,将开发中的站点部署到服务器上,然后,在浏览器中查看实际的效果,在 Grunt 环境下,可以直接使用集成在 Grunt 中的 Connect 插件完成站点服务器的 ...
- JavaScript构建(编绎)系统大比拼:Grunt vs. Gulp vs. NPM
Nicolas Bevacqua进行了一个比较JavaScript构建(编绎)系统的任务.他对三巨头: Grunt, Gulp and NPM进行了比较,并讨论了每种的优缺点. By Nicolas ...
- 实战案例--Grunt构建Web程序
GruntJS构建Web程序.使用Gruntjs来搭建一个前端项目,然后使用grunt合并,压缩JS文件,熟练了node.js安装和grunt.js安装后,接下来来实战一个案例,案例是根据snandy ...
随机推荐
- Linux基础: 网络命令和进程管理
netstat lsof ps pstree pkill/kill (了解jenkins git,排查环境) 查询服务器之间是否有链接(netstat -an) 某个服务是否启动(了解服务对应的 ...
- 【Java基础之Object类(一)】Java中Object类中的所有方法(toString、equals、hashCode、clone、finalize、wait和notify等)详解(转载)
java中的hashcode.equals和toString方法都是基类Object的方法. 首先说说toString方法,简单的总结了下API说明就是:返回该对象的字符串表示,信息应该是简明但易于读 ...
- C++继承与派生(原理归纳)
1. C++继承与java不同,java遵循单继承,但java的接口为其不足做了很好的弥补了. C++则是灵活的多,为多继承.即一个C++类可以同时继承N个类的属性. 2. 对于继承方式 : 有三 ...
- XML中的非法字符转化成实体
问题 如果XML有非法字符比如 "·",或者HTML标签<br/>.XML在解析的过程中就会出错.就无法正常解析,或者把xml反射成实体. 有些字符,像(<)这类 ...
- 20145236 冯佳 《Java程序设计》第1周学习总结
20145236 冯佳 <Java程序设计>第1周学习总结 教材学习内容总结 因为假期在家的时候并没有提前自学Java,所以,这周算是真正开始第一次接触Java.我对Java的了解也仅仅停 ...
- VoltDB介绍——本质:数据保存在内存,充分利用CPU,单线程去锁,底层数据结构未知
转自:http://blog.csdn.net/ransom0512/article/details/50440316 简介 VoltDB数据库是一个分布式,可扩展,shared-nothing的内存 ...
- linux 安装 php
1. libxml2安装 tar -zxvf libxml2-2.6.26.tar.gz cd libxml2-2.6.26 ./configure --prefix=/usr ...
- 如何删除 Ubuntu 上不再使用的旧内核
提问:过去我已经在我的Ubuntu上升级了几次内核.现在我想要删除这些旧的内核镜像来节省我的磁盘空间.如何用最简单的方法删除Ubuntu上先前版本的内核? 在Ubuntu上,有几个方法来升级内核.在U ...
- cf 307
一开始我是不想打的 又因为307这个数字太特殊了 毕竟307 希望今天的考试不要挂掉 http://codeforces.com/contest/551/problem/A #include< ...
- S1:动态方法调用:call & apply
js中函数执行的两种方式:一是通过调用运算符’()’,二是通过调用call或apply来动态执行. 一.动态方法调用中指定this对象 开发中我们往往需要在对象B中调用对象A的方法,这个时候就用到了a ...