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

</div> </div>

来自： http://www.w3cplus.com/workflow/gulp-tutorial-9-linting-scss-and-javascript.html