前端观察

\[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 postinstallnpm 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”
  }
}

效果如图:

Screen_Shot_2015-02-08_at_下午5_04_21

后续

我在 github 建了一个项目,后面会陆续把日常工作中需要用到的一些 gulp task 添加进来。欢迎 Fork 并且提交 PR 。

项目地址:Task Master

Reference