[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 ”,
“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”
}
}
效果如图：
后续
我在 github 建了一个项目，后面会陆续把日常工作中需要用到的一些 gulp task 添加进来。欢迎 Fork 并且提交 PR 。
项目地址：Task Master