1.环境准备
需要安装Git、Node、Bower、Grunt、Ruby
NodeJS https://nodejs.org/en/
Ruby http://rubyinstaller.org/downloads/archives
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')