前言
在此前文章介绍了如何在微信小程序中使用 CSScomb 来处理我们的小程序样式文件。
但是此前实现有个不足的地方：没有实现在提交代码之前去执行我们的脚步命令。
正文
一、设想
假设我们可以在 pre-commit 阶段做一些类似 ESLint、Prettier 的操作，岂不美哉！
例如，如下配置文件是利用 husky、lint-staged 做了一些处理，在代码 commit 之前对代码进行检查和格式化。
{ "husky": { "hooks": { "pre-commit": "lint-staged" } }, "lint-staged": { "*.{js}": "eslint --fix --ext .js", "*.{css,wxss,acss}": "prettier --config .prettierrc.js --write" } }
那我们使用 CSScomb 也想这么做的话，要怎样实现呢？
二、试图实现
关于前一篇文章的具体思路就不再赘述了
- 首先安装 husky、lint-staged。
# 这里我不安装最新版 husky 的原因是 husky 5.x 在使用上有很大变化 # 我暂时还没时间去了解它，所以先用着已经习惯的 4.x 版本，问题不大 $ yarn add --dev husky@4.3.8 lint-staged
- 在
package.json添加配置，如下：
{ "scripts": { "csscomb": "gulp wxssTask", "csscomb:mini": "gulp csscombTask --path './**/*.wxss'" }, "husky": { "hooks": { "pre-commit": "lint-staged" } }, "lint-staged": { "*.wxss": "gulp csscombTask" } }
- 接着，我们尝试去修改一个样式文件，并提交代码。
frankie@iMac csscomb-mini % git commit -m 'test' husky > pre-commit (node v14.16.0) ✔ Preparing... ⚠ Running tasks... ❯ Running tasks for *.wxss ✖ gulp csscombTask [FAILED] ↓ Skipped because of errors from tasks. [SKIPPED] ✔ Reverting to original state because of errors... ✔ Cleaning up... ✖ gulp csscombTask: [14:30:14] Task never defined: /Users/frankie/Desktop/Web/Git/csscomb-mini/app.wxss [14:30:14] To list available tasks, try running: gulp --tasks [14:30:14] Using gulpfile ~/Desktop/Web/Git/csscomb-mini/gulpfile.js husky > pre-commit hook failed (add --no-verify to bypass)
非常的遗憾，它失败了，并提示：Task never defined: /Users/frankie/Desktop/Web/Git/csscomb-mini/app.wxss。
执行如下命令，明明是找得到 csscombTask 任务的啊！
frankie@iMac csscomb-mini % npx gulp --tasks [14:35:09] Tasks for ~/Desktop/Web/Git/csscomb-mini/gulpfile.js [14:35:09] ├── wxssTask [14:35:09] └── csscombTask
为什么会这样呢？什么原因呢？这也是我的踩坑的地方。
三、寻找失败原因
首先，我先翻阅了 lint-staged 的文档 ，里面有一段话：
{ "*": "your-cmd" }
This config will execute your-cmd with the list of currently staged files passed as arguments.
So, considering you did git add file1.ext file2.ext, lint-staged will run the following command: your-cmd file1.ext file2.ext.
假设我们暂存的文件是 /Users/frankie/Desktop/Web/Git/csscomb-mini/app.wxss，那么我们执行：
{ "*.wxss": "gulp csscombTask" }
就等于执行了 gulp csscombTask /Users/frankie/Desktop/Web/Git/csscomb-mini/app.wxss 这条指令。
但如果熟悉 Gulp 的话，形式如：gulp <task> <othertask> 其实是执行了多个任务。 所以，上面实际上执行了两个任务 csscombTask、/Users/frankie/Desktop/Web/Git/csscomb-mini/app.wxss，它把后者也当成是一个任务了。
那么我们来验证一下，添加一个 Gulp 任务：
const test = cb => { // 需要注意的是： // 由于 node 特性，非主进程下执行该命令，无法将 test log 打印出来， // 例如在 lint-staged 下执行该 gulp 任务，就无法打印， // 如果通过 npx gulp xxx 执行任务，属于主进程，就能打印出来。 console.log('test log') cb() } module.exports = { csscombTask, '/Users/frankie/Desktop/Web/Git/csscomb-mini/app.wxss': test }
接着重新提交一下代码：
frankie@iMac csscomb-mini % git commit -m 'test' husky > pre-commit (node v14.16.0) ✔ Preparing... ✔ Running tasks... ✔ Applying modifications... ✔ Cleaning up... [master a2ba057] test 1 file changed, 3 insertions(+), 3 deletions(-)
它成功了，说明我们的猜想是正确的。
既然找到了缘由，那么我们开始着手解决问题吧。
四、解决问题
其实 /Users/frankie/Desktop/Web/Git/csscomb-mini/app.wxss 应该是我们 Gulp 任务的参数才对。
按照此前的约定：
gulp csscombTask --path '<filepath>' --ext <extension>
所以只要我们执行的命令形式如：gulp csscombTask --path '/Users/frankie/Desktop/Web/Git/csscomb-mini/app.wxss' 即可。
我们来修改一下 lint-staged 的配置文件，此前在 package.json 的配置方式局限性太大了，下面我们使用 JavaScript 形式的配置方式：
Writing the configuration file in JavaScript is the mo
st powerful way to configure lint-staged (
lint-staged.config.js, similar, or passed via--config).
其实 lint-staged 提供了很多的配置示例，我们使用 Example: Wrap filenames in single quotes and run once per file 即可。
移除 package.json 的配置项，并在项目根目录下，新建 .lintstagedrc.js 配置文件：
// .lintstagedrc.js module.exports = { '*.wxss': filenames => filenames.map(filename => `gulp csscombTask --path ${filename}`) } // 其实这里可配置的方式很多， // 例如：超过 10 个暂存文件时，我们可以在整个项目下执行一遍 csscombTask 操作： // module.exports = { // '*.wxss': filenames => { // if (filenames.length > 10) { // return 'gulp csscombTask --path './**/*.wxss'' // } // return `gulp csscombTask --path '${filenames.join(',')'}` // } // }
接下来我们修改两个样式文件，再提交一下：
frankie@iMac csscomb-mini % 🐶 git commit -m 'test' husky > pre-commit (node v14.16.0) ✔ Preparing... ✔ Running tasks... ✔ Applying modifications... ✔ Cleaning up... [master 7b84b9c] test 2 files changed, 7 insertions(+), 3 deletions(-)
可以正常运行，而且我们所提交的文件都经过了 CSScomb 格式化了，
The end.
