mirror of
https://github.com/kogakure/website-astro-stefanimhoff.de.git
synced 2026-02-03 20:15:27 +00:00
102 lines
3.0 KiB
Plaintext
102 lines
3.0 KiB
Plaintext
---
|
||
title: "Introduction to Gulp.js 9: Syntax-Check of SCSS and JavaScript"
|
||
slug: gulp-tutorial-9-linting-scss-and-javascript
|
||
author: Stefan Imhoff
|
||
date: 2014-10-26
|
||
description: "The ultimate tutorial and guide for Gulp.js: How to check the syntax of SCSS and JavaScript files."
|
||
cover: /assets/images/cover/gulp-9.webp
|
||
tags: ["code"]
|
||
series: gulp
|
||
---
|
||
|
||
This is the 9th part of my series, _Introduction to Gulp.js_. Today, I will use Gulp.js to automatically check my SCSS and JavaScript files for syntax errors and warnings.
|
||
|
||
I decided to lint my SCSS files and not the CSS files because it’s pointless to lint generated CSS. But you can do this with [gulp-csslint](https://www.npmjs.com/package/gulp-csslint/).
|
||
|
||
```bash
|
||
$ npm install --save-dev gulp-scss-lint@0.3.6 gulp-jshint@1.8.5 jshint-stylish@2.0.1
|
||
```
|
||
|
||
Additionally, you’ll need to install the `scss-lint` Gem and run `bundle install`:
|
||
|
||
#### Gemfile
|
||
|
||
```ruby
|
||
source "https://rubygems.org"
|
||
|
||
gem 'jekyll', '~> 2.5.2'
|
||
gem 'sass', '>= 3.3'
|
||
gem 'scss-lint', '~> 0.31.0'
|
||
gem 'fontcustom', '~> 1.3.7'
|
||
```
|
||
|
||
Add the options for `jshint` and `scss-lint`:
|
||
|
||
#### gulp/config.js
|
||
|
||
```javascript
|
||
scsslint: {
|
||
src: [
|
||
srcAssets + '/scss/**/*.{sass,scss}',
|
||
'!' + srcAssets + '/scss/base/_sprites.scss',
|
||
'!' + srcAssets + '/scss/helpers/_meyer-reset.scss'
|
||
],
|
||
options: {
|
||
bundleExec: true
|
||
}
|
||
},
|
||
jshint: {
|
||
src: srcAssets + '/javascripts/*.js'
|
||
}
|
||
```
|
||
|
||
I ignore files from checking (by adding a `!` in front of the path) because I didn’t write them or don’t have control over the syntax.
|
||
|
||
#### gulp/tasks/development/scss-lint.js
|
||
|
||
```javascript
|
||
var gulp = require("gulp");
|
||
var scsslint = require("gulp-scss-lint");
|
||
var config = require("../../config").scsslint;
|
||
|
||
/**
|
||
* Lint SCSS files
|
||
* `gem install scss-lint` needed
|
||
*/
|
||
gulp.task("scsslint", function () {
|
||
return gulp.src(config.src).pipe(scsslint(config.options));
|
||
});
|
||
```
|
||
|
||
#### gulp/tasks/development/jshint.js
|
||
|
||
```javascript
|
||
var gulp = require("gulp");
|
||
var jshint = require("gulp-jshint");
|
||
var stylish = require("jshint-stylish");
|
||
var config = require("../../config").jshint;
|
||
|
||
/**
|
||
* Check JavaScript syntax with JSHint
|
||
*/
|
||
gulp.task("jshint", function () {
|
||
return gulp.src(config.src).pipe(jshint()).pipe(jshint.reporter(stylish));
|
||
});
|
||
```
|
||
|
||
<Banner summary="Configuration of Syntax Check Tools">
|
||
|
||
You may change the rules for linting SCSS or JavaScript by adding a hidden file `.scss-lint.yml` for SCSS lint and `.jshintrc` for JSHint to your project root.
|
||
|
||
To find out which options are available, look into the documentation of [SCSS-Lint](https://github.com/brigade/scss-lint) and [JSHint](https://jshint.com/docs/).
|
||
|
||
</Banner>
|
||
|
||
## Conclusion
|
||
|
||
This concludes the 9th part of my series, _Introduction to Gulp.js_. Today, we learned how to use Gulp.js to check the syntax of SCSS and JavaScript files. This task will run continuously while I write my files and print out errors to my console the moment I created them.
|
||
|
||
<Figure>
|
||
<MoreLink href="https://github.com/kogakure/gulp-tutorial" text="View Source on GitHub" />
|
||
</Figure>
|