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));
});

源代碼

在GitHub上查看源碼

總結

這是Gulp系列教程的第九部分的總結。今天我們學習了如何使用Gulp.js檢查SCSS和JavaScript文件的語法。這個任務在編寫文件時會持續運行并在出錯時立刻在命令行輸出錯誤。

Blueed

現居上海。正在學習前端的道路上，歡迎交流。個人博客： Blueed.me ,微博：@Ivan_z3