如今前端工程化，自動化已經成為了新趨勢，如果我們要重新開始做一個專案，你會花費多久的時間在前期環境的搭建上呢？在我們前端的的積累中，我們需要將這些技術沉澱下來，便於我們開始一個新的專案，而不必花費過多的經歷在環境搭建中。
這次我做的是一個整合了 eslint、stylelint、git hook的前端程式碼檢查工具。專案已經開源在github上，名字叫做oishi,一開始想起名叫husky(哈士奇),後來這個名字被佔了(無奈臉)。
先來理一下我們這個工具需要做什麼事情
需要讓他初始化eslint,stylelint的配置檔案
安裝好我們需要的依賴
掛載git鉤子，在程式碼提交時進行進行eslint檢查
有了目標我們開始實現我們這樣的一個工具：
1.準備工作
- 這次我們採用commander來開發我們的命令列，
- 利用chalk來美化我們控制檯的輸出，
- 利用shelljs來執行我們檔案中的一些指令碼
在本地除錯時需要在package.json中配置bin選項，然後開發好後npm link 釋出到本地的全域性，就可以開始使用自己的命令列了
2.進入正題
-
對於之前提到的第一點，我們首先要有自己的一個配置，在初始化的時候將它拉下來，我們在這裡將自己的配置扔到了github的倉庫中，可以參考一下我的專案目錄配置檔案,從github上拉下來後利用node原生的fs模組讀寫配置檔案。
-
我們所需要的依賴專案也都會記錄在配置檔案中，讀取檔案後與當前目錄下的package.json對比一下，利用shell執行安裝缺少的依賴即可
-
掛載git鉤子，有兩種方式，第一種，我們可以自己寫一個pre-commit,也可以安裝pre-commit npm包，我們這裡採用了第一種方式，也是因為shell指令碼比較通用，到此為止，我們在本地已經開發完成了一個命令列,在我們將我們寫的pre-commit,移入到git hooks下面的時候，記得要加許可權，
chmod +x pre-commit
pre-commit如何編寫，相信網上有很多了，這裡我給一個大概的實現思路
首先是獲取到你要eslint的程式碼，
JS_FILES=$(git diff --cached --name-only --diff-filter=ACM | grep -E "(.js?)$")
CSS_FILES=$(git diff --cached --name-only --diff-filter=ACM | grep -E "(.p?css)$")
複製程式碼然後呼叫自己的eslint命令，
oishi lintjs --exitcode $JS_FILES
最後判斷返回值，
有一個小坑的地方在於你的入口檔案處，你要宣告一下自己的node路徑
#!/usr/bin/env node
3.結尾工作
我們在npm上註冊一個自己的賬號，然後切換到專案目錄下，
npm login
npm publish
複製程式碼對於一些具體的技術細節可以參見我專案中的原始碼，也可以在我的部落格中評論留言