grunt 执行

几天以前,我决定开始启用一个CSS预处理器,找了很久,我选择了SASS并且尝试着去安装它。但是这似乎不是一件简单的事,在安装过程中出现了许多让我始料不及的问题,我很沮丧,但查找了很多资料,我终于找到了一个正确的安装它的方法。

因此在本文中,我将向你展示两件事:

  1. 怎样去安装Ruby,SASS和Compass样式框架
  2. 怎样去处理一些可能在安装过程中出现的常见问题

你可能已经去过《SASS的FAQ》页面,不过一般基本上都是说“当你需要安装并运行SASS时,请下载Ruby”。

在我看来,对于很多人来说,手册上给予的安装教程说明远远不够,这是我自己一步一步的安装过程,详细的记录下来,希望能帮助到你。

安装Ruby

第一步、点此进入Ruby Installer for Windows下载页面,下载Ruby的最新版。

第二步、运行安装下载的Ruby.exe文件,选择你的语言,接受条款协议,到这里都没有什么特别的地方。点击下一步屏幕会出现如下图的框,这一步很重要,主要就是要完成添加Ruby的可执行路径到你的环境变量里,再点击下一步完成安装。

第三步、打开命令提示符窗口,即DOS黑窗口。(这相信这个窗口你应该很熟悉)

第四步、到了这儿就差不多大功告成了,你只要检测一下你安装的Ruby是否运行正常,在黑窗口的提示符输入以下命令:

ruby –v

1.

如果你看到一行显示结果为“ruby x.x.x....”等版本平台信息,这意味着你的Ruby安装成功并正常运行了(如下图)。

如果你得到一个错误消息说“ruby没有被识别为内部或外部命令,操作或批处理文件” 你可能在安装过程中忽略了第2步的检查框。 那么请你卸载Ruby,再次运行安装,这一次一定要确保你检查了Ruby可执行文件添加到您的环境变量中。

(重新安装是最简单的方式来解决这个问题。 但是,如果你不想这样做,请看《如何手动添加ruby可执行文件到您的环境变量》 )。

安装SASS

第五步、现在就该安装你的CSS预处理器了,回到命令提示符窗口,并在窗口中输入以下命令:

gem install sass

1.

这里等待30秒的样子,看到几条信息就成功安装了(如下图)。

第六步、检查你的SASS是否安装正常,输入以下命令:

sass –v

1.

不出意外的话,将会打印一行显示SASS的版本号。

安装Compass样式框架

第七步、安装Compass,就像安装SASS一样。

gem install compass

1.

键入命令测试是否正常:

compass -v

1.

如果直到安装到现在都没出现问题的话,说明你已经完成SASS的全部安装。

当你尝试着安装这些软件的时候,会出现许多你意想不到的错误,不要担心这个。安装任何的软件都不是那么顺心如意,比如经常会得到如下的错误信息:

Could not find a valid gem ‘sass’ (>= 0) in any repository.
Could not find a valid gem ‘compass (>= 0) in any repository.


者你出现的错误信息与这些都不相同,但不管怎样,当你遇到这些问题时,你的第一反应就是“google”或者“百度”,并且有着尝试修复一下。很糟糕的事
又来了,你对那些命令行一无所知,并且又没有现成的教程供你使用,“百度”、“google”又也查找不了有用的信息提供参考。

解决方案有两个:

    • 切换到另一条网络连接,再尝试重新安装一次
    • 如果安装还是不能通过,仍得到相同的错误结果,那么请你移步到《手动安装SASS和Compass样式框架》页面,这里有些好的建议,可能会解决你的问题。

先打开node.js的shell(打开cmd执行不了)

执行grunt  --version 即可查看grunt的版本

时间: 2024-11-10 21:24:43

grunt 执行的相关文章

Grunt 之 Connect

前端开发 Grunt 之 Connect 在前端开发过程中,我们需要在开发过程中,将开发中的站点部署到服务器上,然后,在浏览器中查看实际的效果,在 Grunt 环境下,可以直接使用集成在 Grunt 中的 Connect 插件完成站点服务器的支持,在开发过程中,直接查看效果. 1. Connect 资源 与 Grunt 集成的 Connect 可以在 GitHub 上找到,地址:https://github.com/gruntjs/grunt-contrib-connect 安装的时候,直接通过

grunt简单教程

Grunt简单教程 1.grunt简介 Grunt是一个基于任务的命令行工具,依赖于node.js环境. 它能帮你合并js文件,压缩js文件,验证js,编译less,合并css,还可以配置自动任务,单元测试等等,grunt有非常多的插件,可以满足你的大部分需求. 2.怎么安装 先介绍一些东西: npm是node.js的包管理器通过npm可以下载安装nodejs的模块包 cnpm是淘宝 npm镜像,用此代替官方版本(只读),同步频率目前为10分钟一次. 安装cnpm方法 npm install -

如何使用 grunt

1>. 首先要有nodejs环境, 至少0.8.0版本: 2>. 转到 项目文件夹下: >npm install –g grunt-cli >npm init #生成一个基本的package.json文件,里面的 devDependencies 所需插件自己配置 >添加gruntfile.js #[随便copy一份] >npm install grunt –save-dev #[安装grunt插件] 与 grunt-cli不一样[这个应该是创建可以使用的grunt命令]

Angularjs Nodejs Grunt 一个样例

做了一个简单的演示样例,目的是记录环境配置以及这套框架的结构流程. 1.配置环境 默认nodejs已安装. 安装下面模块:express(nodejs框架),grunt(javascript task runner),grunt-contrib-watch(grunt live load插件),grunt-express-server(grunt启动express服务端插件). 命令行中进入程序文件夹,依次输入下面命令: npm install express 回车 npm install gr

Grunt - 安装指南

发现周围有些人对前端存在偏见. 他们认为前端只是用没那么复杂的技术对着界面调来调去,一点点打磨,最后做出一个没什么实用价值的“花瓶”. 其实,前端的技术栈并不简单,比如我们可以用Grunt进行一些自动化操作. 这里简单记录下Grunt的安装,希望对大家有帮助. Node.js 我们用到的很多组建都是依赖Node.js构建的,所以首先要安装Node.js. 安装Node.js几乎没什么难度,可以直接进Node.js的官网,或者使用brew,apt-get,yum等进行安装. 安装结束后,执行一下命

基于Grunt&Mocha 搭建Nodejs自动化单元测试框架(含代码覆盖率统计)

Introduction Grunt 是一个基于任务的JavaScript 世界的构建工具 Mocha 是具有丰富特性的 JavaScript 测试框架,可以运行在 Node.js 和浏览器中,使得异步测试更简单更有趣.Mocha 可以持续运行测试,支持灵活又准确的报告,当映射到未捕获异常时转到正确的测试示例. Prerequisite nodejs项目文件目录结构如下 ├── config ├── controllers ├── models ├── lib ├── node_modules

Grunt——前端自动化构建工具

Grunt和 Grunt 插件是通过 npm 安装并管理的,npm是 Node.js 的包管理器. Grunt 0.4.x 必须配合Node.js >= 0.8.0版本使用.:奇数版本号的 Node.js 被认为是不稳定的开发版. 在安装 Grunt 前,请确保当前环境中所安装的 npm 已经是最新版本,执行 npm update -g npm 指令进行升级(在某些系统中可能需要 sudo 指令). 安装:grunt-cli npm install -g grunt-cli 在使用Grunt时,

折腾一两天,终于学会使用grunt压缩合并混淆JS脚本,小激动,特意记录一下+spm一点意外收获

很长时间没有更新博客了,实在是太忙啦...0.0 ,以下的东西纯粹是记录,不是我原创,放到收藏夹还担心不够,这个以后常用,想来想去,还是放到这里吧,,丢不了..最后一句废话,网上搜集也好原创也罢,能解决问题不糊弄人才是真道理! 反正我的问题解决啦!!!哈哈哈!! 安装grunt 原文:www.bluesdream.com/blog/Windows-installs-the-grunt-and-instructions.html 怕这个网址打不开,记录下: 安装Grunt:如果你之前安装过老的0.

Grunt学习日记

Grunt和 Grunt 插件是通过npm安装并管理的, npm是Node.js的包管理器. 第一步:先安装node.js环境 第二步:安装Grunt-CLI 在node.js命令工具中输入npm install -g grunt-cli 敲击回车即可安装. -g为在全局安装. 第三步:在本地建一个文件夹,dos命令进入该文件夹下,输入npm init 配置package.json. 第四步:配置好了包的json文件,这一步开始安装Grunt,输入命令 npm install grunt --s