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

特别声明:小站对部分原创文章已开启付费阅读,并开通年费VIP通道,年费价格为 ¥365.00元。如果您喜欢小站的内容,可以点击开通会员进行全站阅读。如果您对付费阅读有任何建议或想法,欢迎发送邮件至: airenliao@gmail.com!(^_^)

这是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'

还要添加一些jshintscss-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-LintJSHint的文档。

源代码

在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/

Blueed

现居上海。正在学习前端的道路上,欢迎交流。个人博客:Blueed.me,微博:@Ivan_z3

如需转载,烦请注明出处:http://www.w3cplus.com/workflow/gulp-tutorial-9-linting-scss-and-javascript.htmljordans for sale blue

如需转载,烦请注明出处:https://www.w3cplus.com/workflow/gulp-tutorial-9-linting-scss-and-javascript.html

如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!

赏杯咖啡,鼓励他创作更多优质内容!
返回顶部