在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 <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写的

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值