Grunt自动化构建环境搭建

最新推荐文章于 2024-08-13 16:49:07 发布

weixin_30498807

最新推荐文章于 2024-08-13 16:49:07 发布

阅读量158

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ruby git ViewUI

原文链接：http://www.cnblogs.com/nick4/p/6391043.html

本文详细介绍了前端开发所需环境的安装步骤，包括Git、Node.js、Bower、Grunt及Ruby等工具的安装配置方法，并提供了针对Sass编译插件安装过程中可能出现问题的解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.环境准备

需要安装Git、Node、Bower、Grunt、Ruby

NodeJS https://nodejs.org/en/

Ruby http://rubyinstaller.org/downloads/archives

Git https://www.git-scm.com/

2.安装配置检查

下载上面的软件，然后点击连续点击下一步进行安装，安装后看“系统环境变量”Path中是否存在“C:\Ruby23-x64\bin”与“C:\Program Files\Git\cmd”，没有则添加，Nodejs一般在安装时就会自动添回到系统变量中，然后验证安装结果

node -v
npm -v
ruby -v

3.安装Grunt

npm install -g grunt-cli

4.安装Grunt插件

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

注：--save-dev自动完善package.json

grunt-contrib-sass #sass编译插件
grunt-contrib-uglify #js压缩插件
grunt-contrib-watch #监控插件

5.安装Bower

npm install -g bower

6.常见错误分析

6.1.1 使用sass报You need to have Ruby and Sass installed and in your PATH for this task to work错误

Running "sass:dist" (sass) task
Warning:
You need to have Ruby and Sass installed and in your PATH for this task to work.

More info: https://github.com/gruntjs/grunt-contrib-sass
Use --force to continue.

原因说明：没有安装ruby环境，并且需要安装一下sass，安装sass过程如下

如果下载被墙了，要改一下修改源地址

$ gem sources --add https://gems.ruby-china.org/ --remove https://rubygems.org/

　再运行下面的命令

gem install sass
--验证
sass -v
sass -h

--安装Sass
npm install grunt-contrib-sass --save-dev

--执行编译命令
grunt sass

Running "sass:build" (sass) task
Error: Invalid GBK character "\xE7"
        on line 2 of app/src/sass/style.scss
  Use --trace for backtrace.
Warning: Exited with error code 13 Use --force to continue.

6.1.2 scss文件编译时候使用ruby环境，出现 Syntax error: Invalid GBK character "\xE5"

检查了好久才发现 scss编译不支持中文字体，进入到ruby安装目录
C:\Ruby23-x64\lib\ruby\gems\2.3.0\gems\sass-3.4.23\lib\sass
修改 engine.rb?文件?
在require 最下面加入以下代码即可解决

Encoding.default_external = Encoding.find('utf-8')

转载于:https://www.cnblogs.com/nick4/p/6391043.html