在Mac和Windows上使用grunt-scss-lint的问题

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 <[e-mail]>",  "license": "ISC",  "devDependencies": {    "grunt": "^1.0.1",    "grunt-scss-lint": "^0.5.0"  }}

使用插件

$ grunt check-scss

报错

Running "scsslint:allFiles" (scsslint) taskWarning: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-lintUse --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.0Parsing documentation for scss_lint-0.54.0Installing ri documentation for scss_lint-0.54.01 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 above2 Unpack into a directory and cd there3 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写的