gulp教程之 jshint

gulp jshint 插件主要用于检查代码，打印报告信息。

jshint 的安装命令:
ncmp install jshint gulp-jshint --save-dev

gulpfile.js 文件配置：

var gulp = require("gulp");
var jshint = require("gulp-jshint");
gulp.task("scripts",function(){
   gulp.src("src/js/*.js")
      .pipe(jshint())
      .pipe(jshint.reporter("default"))
});

执行命令： gulp scripts

如果想要让检查的信息以突出的样式显示，可以使用 jshint-stylish 插件来实现

给检索代码结果添加样式 的 jshint-stylish 插件安装命令：

cnpm install --svae-dev jshint-stylish

gulpfile.js 文件配置：

var gulp = require("gulp");
var jshint = require("gulp-jshint");
gulp.task("scripts",function(){
   gulp.src("src/js/*.js")
      .pipe(jshint())
      .pipe(jshint.reporter("stylish"))
      //.pipe(jshint.reporter("jshint-stylish"))  //或直接引用，不使用上一行的方式
});

如果想查看检查结果的详细的错误信息，可以使用 map-stream 这个插件

检索代码具体错误信息插件的安装命令：cnpm install --save-dev map-stream

var map = require("map-stream");
var customerReporter = map(function(file,cb){
    if(!file.jshint.success){
       //打印出错误信息
       console.log("jshint fail in:" + file.path);
       file.jshint.results.forEach(function(err){
           if(err){
              console.log(err);
              console.log("在 "+file.path+" 文件的第"+err.error.line+" 行的第"+err.error.character+" 列发生错误");
           }
       });
    }
});

gulp.task("scripts",function(){
   gulp.src("src/js/*.js")
      .pipe(jshint())
      .pipe(customerReporter);
});

执行命令： gulp scripts