1 前言
这周我在规范代码。其中要用的grunt-scss-lint这个插件,用于检查scss代码的规范,对于不规范的代码,插件会给出warining,不规范的代码包括但不限于:
选择器命名,0px的问题,空格的问题,属性顺序,不建议使用!important,选择器使用规范(避免使用id选择器)等等。
为什么避免使用id选择器:
http://oli.jp/2011/ids/
2 For mac OS
环境:OS:mac OS 10.12.5 (16F73)
安装
$ npm install grunt --save-dev
Gruntfile.js的代码如下
module.exports=function(grunt){
grunt.initConfig({
pkg:grunt.file.readJSON('package.json'),
scsslint:{
allFiles:['view.scss'],
option:{
bundleExec:true,
config:null
}
}
});
grunt.loadNpmTasks('grunt-scss-lint');
grunt.registerTask('check-scss',['scsslint'])
grunt.registerTask('default');
};
package.json代码
{
"name": "scss-try",
"version": "1.0.0",
"description": "try scss-lint plugin",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [
"scss-lint"
],
"author": "achao_zju <zhangshichao628@sina.com>",
"license": "ISC",
"devDependencies": {
"grunt": "^1.0.1",
"grunt-scss-lint": "^0.5.0"
}
}
使用插件
$ grunt check-scss
报错
Running "scsslint:allFiles" (scsslint) task
Warning:
You need to have Ruby and scss_lint installed and in your PATH for this task to work.More info: https://github.com/ahmednuaman/grunt-scss-lint
Use --force to continue.
运行
$ ruby -v
信息如下:
ruby 2.0.0p648 (2015-12-16 revision 53162) [universal.x86_64-darwin16]
访问https://github.com/ahmednuaman/grunt-scss-lint查看更多信息
This task requires you to have Ruby, and scss-lint installed. If you're on OS X or Linux you probably already have Ruby installed; test with ruby -v in your terminal. When you've confirmed you have Ruby installed, run gem update --system && gem install scss_lint to install the scss_lint gem.
运行
$ gem update --system
没报错
Latest version currently installed. Aborting.
运行
$ gem install scss_lint
报错了:
Fetching: scss_lint-0.54.0.gem (100%)
ERROR: While executing gem ... (Gem::FilePermissionError)
You don't have write permissions for the /Library/Ruby/Gems/2.0.0 directory.
尝试sudo,也报错
谷歌,找到答案:
https://github.com/sass/sass/issues/1768
This should get you up and running:
sudo gem install -n /usr/local/bin GEM_NAME_HERE
GEM_NAME_HERE应该被替换为:scss_lint
$ sudo gem install -n /usr/local/bin scss_lint
成功了
Successfully installed scss_lint-0.54.0
Parsing documentation for scss_lint-0.54.0
Installing ri documentation for scss_lint-0.54.0
1 gem installed
接下来给出Windows上面遇到的问题,必须声明,在Windows10上使用grunt-scss-lint,我只解决了部分
3 For Windows10
环境:OS: Windows10 专业版
正如上文所说,在Windows10上的一系列操作与Mac上基本相同,但是在执行如下命令时出了问题
$ gem update system
报错信息如下:
谷歌找答案,这个比较难找,解决方案在链接里
https://rubygems.org/pages/download
1 Download from above
2 Unpack into a directory and cd there
3 Install with: ruby setup.rb (you may need admin/root privilege)
大致步骤如上,详细信息见链接
ruby setup.rb结果如下(信息很长,只截取最后一段)
结果
$ gem update system
$ gem install scss_lint
我觉得插件已经成功安装了,但是在具体使用最后会遇到如下报错信息,这个问题一直没解决,这也是我转向Mac上使用grunt-scss-lint的原因
代码我用的是grunt-scss-lint上的示范代码
https://www.npmjs.com/package/grunt-scss-lint
如果有大佬能解决了上述报错信息,还望分享。
4 其他
gem其实ruby插件的管理工具,grunt-scss-lint虽然可以从npm上下载,但实则是ruby写的