• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    迪恩网络公众号
登陆 注册
描述文字

juanfran/gulp-scss-lint: Gulp plugin to lint scss files with `scss-lint`

原作者: [db:作者] 来自: 网络 收藏 邀请

开源软件名称（OpenSource Name）：

juanfran/gulp-scss-lint

开源软件地址(OpenSource Url)：

https://github.com/juanfran/gulp-scss-lint

开源编程语言(OpenSource Language)：

JavaScript 98.7%

开源软件介绍(OpenSource Introduction)：

gulp-scss-lint

Build Status

Lint your .scss files

Install

npm install gulp-scss-lint --save-dev

This plugin requires Ruby and scss-lint

gem install scss_lint

Usage

gulpfile.js

var scsslint = require('gulp-scss-lint');

gulp.task('scss-lint', function() {
  return gulp.src('/scss/*.scss')
    .pipe(scsslint());
});

Api

config

scsslint({
    'config': 'lint.yml'
});

bundleExec

  • Type: Boolean
  • Default: false

If your gem is installed via bundler, then set this option to true

scsslint({
    'bundleExec': true
});

reporterOutput

  • Type: String
  • Default: null

If you want to save the report to a file then set reporterOutput with a file name

scsslint({
    'reporterOutput': 'scssReport.json'
});

reporterOutputFormat

  • Type: String
  • Default: JSON
  • Values: JSON or Checkstyle
gulp.src(['**/*.scss'])
  .pipe(scsslint({
    'reporterOutputFormat': 'Checkstyle',
  }))

filePipeOutput

  • Type: String
  • Default: null

If you want the pipe return a report file instead of the .scss file then set filePipeOutput with a filename

//xml
gulp.src(['**/*.scss'])
  .pipe(scsslint({
    'reporterOutputFormat': 'Checkstyle',
    'filePipeOutput': 'scssReport.xml'
  }))
  .pipe(gulp.dest('./reports'))

//json
gulp.src(['**/*.scss'])
  .pipe(scsslint({
    'filePipeOutput': 'scssReport.json'
  }))
  .pipe(gulp.dest('./reports'))

maxBuffer

  • Type: Number or Boolean
  • Default: 300 * 1024

Set maxBuffer for the child_process.exec process. If you get a maxBuffer exceeded error, set it with a higher number. maxBuffer specifies the largest amount of data allowed on stdout or stderr.

gulp.src(['**/*.scss'])
  .pipe(scsslint({
    'maxBuffer': 307200
  }))
  .pipe(gulp.dest('./reports'))

endless

  • Type: Boolean
  • Default: false

If you use gulp-watch set endless to true.

sync

  • Type: Boolean
  • Default: sync

scss-lint will be executed in sequence.

verbose

  • Type: Boolean
  • Default: false

If you want to see the executed scss-lint command for debugging purposes, set this to true.

Glob pattern without gulp.src

var scsslint = require('gulp-scss-lint');

gulp.task('scss-lint', function() {
  return scsslint({
    shell: 'bash', // your shell must support glob
    src: '**/*.scss'
  });
});

Excluding

To exclude files you should use the gulp.src ignore format '!filePath''

gulp.src(['/scss/*.scss', '!/scss/vendor/**/*.scss'])
  .pipe(scsslint({'config': 'lint.yml'}));

Or you should use gulp-filter

var scsslint = require('gulp-scss-lint');
var gulpFilter = require('gulp-filter');

gulp.task('scss-lint', function() {
  var scssFilter = gulpFilter('/scss/vendor/**/*.scss');

  return gulp.src('/scss/*.scss')
    .pipe(scssFilter)
    .pipe(scsslint())
    .pipe(scssFilter.restore());
});

Lint only modified files

You should use gulp-cached

In this example, without the gulp-cached plugin, every time you save a .scss file the scss-lint plugin will check all your files. In case you have gulp-cached plugin, it will only check the modified files.

var scsslint = require('gulp-scss-lint');
var cache = require('gulp-cached');

gulp.task('scss-lint', function() {
  return gulp.src('/scss/*.scss')
    .pipe(cache('scsslint'))
    .pipe(scsslint());
});

gulp.task('watch', function() {
  gulp.watch('/scss/*.scss', ['scss-lint']);
});

Results

Adds the following properties to the file object:

file.scsslint = {
  'success': false,
  'errors': 0,
  'warnings': 1,
  'issues': [
    {
      'line': 123,
      'column': 10,
      'severity': 'warning', // or `error`
      'reason': 'a description of the error'
    }
  ]
};

The issues have the same parameters that scss-lint

Custom reporter

You can replace the default console log by a custom output with customReport. customReport function will be called for each file that includes the lint results See result params

var scsslint = require('gulp-scss-lint');

var myCustomReporter = function(file) {
  if (!file.scsslint.success) {
    gutil.log(file.scsslint.issues.length + ' issues found in ' + file.path);
  }
};

gulp.task('scss-lint', function() {
  return gulp.src('/scss/*.scss')
    .pipe(scsslint({
        customReport: myCustomReporter
    }))
});

You can even throw an exception

var scsslint = require('gulp-scss-lint');

var myCustomReporter = function(file, stream) {
  if (!file.scsslint.success) {
    stream.emit('error', new gutil.PluginError("scss-lint", "some error"));
  }
};

gulp.task('scss-lint', function() {
  return gulp.src('/scss/*.scss')
    .pipe(scsslint({
        customReport: myCustomReporter
    }))
});

Default reporter

This is an example from the default reporter output

[20:55:10] 3 issues found in test/fixtures/invalid.scss
[20:55:10] test/fixtures/invalid.scss:1 [W] IdSelector: Avoid using id selectors
[20:55:10] test/fixtures/invalid.scss:2 [W] Indentation: Line should be indented 2 spaces, but was indented 0 spaces
[20:55:10] test/fixtures/invalid.scss:2 [W] EmptyRule: Empty rule

Fail reporter

If you want the task to fail when "scss-lint" was not a success then call failReporter after the scsslint call.

This example will log the issues as usual and then fails if there is any issue.

var scsslint = require('gulp-scss-lint');

gulp.task('scss-lint', function() {
  return gulp.src('/scss/*.scss')
    .pipe(scsslint())
    .pipe(scsslint.failReporter())
});

if you just want failReporter to fail just with errors pass the 'E' string

var scsslint = require('gulp-scss-lint');

gulp.task('scss-lint', function() {
  return gulp.src('/scss/*.scss')
    .pipe(scsslint())
    .pipe(scsslint.failReporter('E'))
});

Testing

To test you must first have scss-lint installed globally using gem install scss_lint as well as via bundler using bundle install.

鲜花
握手
雷人
路过
鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
More+
上一篇：
simon-dt/gulp-twig: Twig plugin for gulp.js, The streaming build system. Looking ...发布时间：2022-06-21
下一篇：
koistya/gulp-csscomb: CSScomb plugin for Gulp.js. Formats CSS according to a pre ...发布时间：2022-06-21
热门推荐
More+
热门话题
More+
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服（服务时间 9:00～18:00）

在线QQ客服
地址：深圳市南山区西丽大学城创智工业园
电邮：jeky_zhao#qq.com
移动电话：139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap