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 的文档。