Gulp系列教程：检查SCSS和JavaScript的语法

这是Gulp系列教程的第九部分。今天我会使用Gulp.js来自动检测SCSS和JavaScript文件的语法错误和警告。

我决定检测SCSS文件而不是CSS文件，因为检测生成的CSS没有意义。但是你也可以用gulp-csslint来检测。

$ npm install --save-dev gulp-scss-lint@0.3.6 gulp-jshint@1.8.5 jshint-stylish@2.0.1

另外你需要安装sass-lint的Gem包并运行bundle install：

// Gemfile

source "https://rubygems.org"

gem 'jekyll', '~> 2.5.2'
gem 'sass', '>= 3.3'
gem 'scss-lint', '~> 0.31.0'
gem 'fontcustom', '~> 1.3.7'

还要添加一些jshint和scss-lint配置：

// gulp/config.js

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'
}

我忽略一些文件的检查（通过在路径前添加!），因为它们不是我写的或者我无权控制语法。

// gulp/tasks/development/scss-lint.js

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 

var gulp    = require('gulp');
var jshint  = require('gulp-jshint');
var stylish = require('jshint-stylish');
var config  = require('../../config').jshint;

/**
 * Check JavaScript sytax with JSHint
 */
gulp.task('jshint', function() {
  return gulp.src(config.src)
    .pipe(jshint())
    .pipe(jshint.reporter(stylish));
});

语法检查工具的配置你可以在根目录下给SCSS检查添加隐藏文件.scss-lint.yml和给JSHint添加.jshintrc来修改检查规则。查看哪些选项可用请查阅SCSS-Lint和JSHint的文档。

源代码

在GitHub上查看源码

总结

这是Gulp系列教程的第九部分的总结。今天我们学习了如何使用Gulp.js检查SCSS和JavaScript文件的语法。这个任务在编写文件时会持续运行并在出错时立刻在命令行输出错误。

本文根据@Stefan Imhoff的《Introduction to Gulp.js 9: Checking the Syntax of SCSS and JavaScript》所译，整个译文带有我们自己的理解与思想，如果译得不好或有不对之处还请同行朋友指点。如需转载此译文，需注明英文出处：http://stefanimhoff.de/2014/gulp-tutorial-9-linting-scss-and-javascript/。