转载

[Task Master] gulp-lint

初衷

从事前端开发这个职业几年之后，我已经彻底从一个完美主义者变成实用主义者。但是对于代码风格的要求，却越来越强烈。

在一个「用户体验」已经用滥的圈子，也有很多 web 开发者或真心或虚伪得说要一个「有非常好的用户体验」的产品。但是你看看他们的代码，可读性极差都不算什么严重问题，有的甚至像几个不同性格的分身写出来的。在我看来，写代码也是在做「产品」，只不过不同于直接面向用户的产品。但是，如果这点意识都没有，我很难相信他们能做出什么体验良好的产品来。

在我看来，良好的代码风格就像好的木工做壁橱时，放在靠墙那侧的那块好板子。同时，我不相信人可以一直对自己有高要求，因为我自己有时候也很懈怠，总想着「以后再说」，可是 “Wait” has almost always meant ‘Never’.“。我也不相信所有人都会追求好的事物。所以，我更相信工具。

实现

首先需要创建 .git/hooks/pre-commit 并且使用 chmod +x 确保它是可执行的。

#!/bin/sh  if git diff --cached --name-only --diff-filter=ACM | grep ‘.js$’ >/dev/null 2>&1 then     ./node_modules/.bin/gulp lint fi  exit $?

git diff --cached --name-only --diff-filter=ACM 会获取当前 commit 里面的所有文件（不包括删除掉的文件），之后 grep ‘.js$’ 过滤出所有的 js 文件。然后调用 gulp lint 来进行验证。

exit $? 会返回自后执行的程序的返回值。

当返回 0 时，Git 会继续进行 commit ，如果返回 1，会放弃 commit。

但是因为 pre-commit 在 .git 里面，没法放到代码仓库里面，因此还需要做些别的处理。

首先把 pre-commit 改名为 .pre-commit 并放到项目根目录下。然后创建一个 hook task。

# hook var symlink = require(‘gulp-symlink’); //Again don’t forget to install it  gulp.task(‘hook’, function () {     return gulp.src(‘.pre-commit’)         .pipe(symlink(‘.git/hooks/‘, ‘pre-commit’)); });

hook 做的事情就是把 .pre-commit 链接到 ./git/hooks/pre-commit 上。

// lint.js var config = require(‘./config/gulp’); var gulp = require(‘gulp’); var jshint = require(‘gulp-jshint’); function lint() {  return gulp.src([   config.src.root + ‘/*.js’  ])  .pipe(jshint(config.src.jshintrc))  .pipe(jshint.reporter(‘jshint-stylish’))  .pipe(jshint.reporter(‘fail’)); } gulp.task(‘lint’, lint); module.exports = lint;

然后利用 npm postinstall 在 npm install 时自动运行 hook。

// package.json {   “name”: “Task Master”,   “version”: “0.0.1”,   “description”: “gulp task collection”,   “main”: “app.js”,   “scripts”: {     “postinstall”: “gulp hook”   },   “repository”: “https://github.com/gaowhen/task-master.git”,   “author”: “Miko Gao <gaowhen.at.qq.com>”,   “license”: “”,   “dependencies”: {     “express”: “^4.11.0”,     “jade”: “^1.9.0”   },   “devDependencies”: {     “gulp”: “^3.8.10”,     “gulp-jshint”: “^1.9.0”,     “gulp-less”: “^2.0.1”   } }

效果如图：

[Task Master] gulp-lint