gulp-scsslint
scss-lint is a Ruby gem written by The Causes Engineering Team. This plugin wraps the scss-lint binary for gulp and provides default and failure reporters.
Install
npm install gulp-scsslint --save-dev
This plugin requires Ruby and scss-lint to be installed. If you're on OS X or Linux you probably already have Ruby installed.
From a terminal:
ruby -v # test that Ruby is installed gem update --system && gem install scss-lint
Usage
var scsslint = ;var gulp = ; gulp;
Excluding files
Use file globbing and pattern negation to exclude files that should not be linted (e.g. vendor files):
gulp.src(['styles/*.scss', '!styles/vendor.scss'])
If you use the same task for linting and sass transpilation, then gulp-filter can temporarily remove the vendor files from the pipe:
gulp;
But it's probably better to use two separate tasks:
gulp;gulp;
API
scsslint(configFile)
configFile
Type: String
You can pass the path to your .scss-lint.yml file directly to the plugin, though if your config file uses the standard file name and location then SCSS-Lint will find it by default.
gulp });
scsslint(options)
options
Type: Object
For example:
config
options property: Type: String
Path to your .scss-lint.yml file. Default is undefined
.
bin
options property: Type: String
The scss-lint call signature. Default is scss-lint
. In the context of
bundler, bundle exec scss-lint
might be preferable.
args
options property: Type: Array
An array of additional arguments supported by scss-lint
. See
scss-lint --help
for options.
For example:
args: '--exclude=vendor.scss'
N.B.: Most options will conflict with this plugin or cause inconsistent
results. For example, --exclude
will cause an error to be emitted if
all files passed to scss-lint are excluded; and excluded files will be
marked us as successfully linted: excluded_file.scsslint = {success: true}
.
Use these options with caution.
N.B.: Options should not include a space between the option property and the value.
Results
Adds the following properties to the file object:
filescsslintsuccess = true; // or false filescsslinterrorCount = 0; // number of errors returned by SCSS-Lint filescsslintresults = ; // SCSS-Lint errors
The objects in results
have all the properties of the issue
tags in
SCSS-Lint's XML output, for example:
filescsslintresults = 'line': 123 'column': 10 'severity': 'warning' // or `error` 'reason': 'a description of the error'
Reporters
Default
The default reporter logs SCSS-Lint warnings and errors using a format similar to SCSS-Lint's default.
stuff
Example output:
test/fixtures/error.scss:3 [E] Invalid CSS after " font": expected ";", was ":"
test/fixtures/warning.scss:2 [W] Color `black` should be written in hexadecimal form as `#000`
Fail Reporter
By default, only program errors cause errors to be emitted on the stream. If you would also like SCSS-Lint warnings and errors to cause errors to be emitted on the stream (for example, to fail the build on a CI server), use the 'fail' reporter.
This example will log the errors using the default reporter, then fail if SCSS-Lint found any issues in the SCSS.
stuff
Custom Reporters
Custom reporter functions can be passed as scsslint.reporter(reporterFunc). The reporter function will be called for each linted file that includes an error or warning and passed the file object as described above.
If the custom reporter returns non-falsey, the returned value will be provided to the stream callback and will generate an error.
var scsslint = ;var gulp = ;var gutil = ; var { gutil;}; gulp;
See src/reports.js
for more detailed examples.