Npm Scripts

代码两周前就完成了，但是上周工作忙，这周又小小沉迷了泰拉瑞亚，现在才来进行总结。

这次主要讲讲返璞归真，用 npm 取代 Gulp 对前端项目进行一些处理。

这篇文章涉及内容过多，似乎应该拆成多个主题

原由

当我刚学着用 Gulp 的时候，就搜过一些文章，看看它有什么优缺点，那时 Gulp 正热，大有取代 Grunt 的趋势。在搜索的过程中，也看到了几篇文章，主旨是使用 npm 来取代 Gulp 和 Grunt，那些文章绝非彼时主流，虽然似乎也有些道理，却没有抓到我的痛点。毕竟用 Gulp 的插件还是比自己从头写方便。

转眼快三年了，Prettier 的出现打乱了我平静的生活～笑～。一个梦寐以求的功能出现在我的面前—— Prettier 的功能是对代码进行格式化，所有人写的代码都会被统一成相同的风格，相较我正在使用的“eslint检查后手动修改”的方案，更加彻底。

眼前就一个（致命的）问题，没有现成的方案可以在我们的项目中采用 Prettier。我们的前端代码用了 riot ，而 Prettier 尚不支持对 html 内嵌的 JavaScript 代码进行格式化，何况我们还用了 pug ，官方提供的编辑器插件和命令行工具都靠不住了。只能通过其提供的 API 来自行解决问题。

这时候，问题来了，我要写 Gulp 插件吗？虽然以前写过，但老早忘光了，要再学一次吗？现在 Gulp 的风头可是完全被 Webpack 盖住了，虽然严格讲它们定位不太一样。 而 Webpack 是不是会被 Parcel 干掉呢？

前端的世界发展太快。我需要找几篇文章证实一下自己的想法来压压惊。

结果，我还真找到了一篇 Why I Left Gulp and Grunt for npm Scripts 让我下定决心，打包工具们统统靠边，我要用自己的代码，直接写。像我们这种不被爱着的小众开发者，只能靠自己。

文章主要提了这类工具的三个主要问题：

• 依赖插件作者

• 难以调试

• 脱节的文档

个个都是切肤之痛啊。

依赖插件作者：确实，现在没有适合我的 Prettier 插件，就连已经用了两年多的 riot 插件 gulp-riot ，作者也表示不再维护，因为他自己都已经不再使用 gulp 了。

难以调试：除非插件一直工作的很好，否则一旦出现问题，你很难确定问题是出在配置、插件、版本还是工具本身。

脱节的文档：想要用好一个 Gulp 插件，比如 gulp-riot ，你要既懂 riot 又懂 gulp-riot，否则你不知道某个参数到底是干什么的，和底层的参数又是如何对应的，你需要不停对照两边的文档，才能弄明白。

归根到底，是因为 Gulp 这类工具，增加了一层抽象。本意是通过增加的这层抽象，来统一接口，并简化使用。而实际使用中，一旦遇到问题，这层抽象就成了阻碍。

看到这里的时候，我一下子想到了 Ubuntu 和 Arch，Ubuntu 刚开始用的时候很爽，开箱即用，各种方便，但是一旦遇到问题，就傻眼了，软件官方文档都帮不了你，因为在 Ubuntu 里遇到的很多问题，都是 Ubuntu 特有的，为了方便你而加的抽象层相关的，你需要既了解出问题的软件，又了解 Ubuntu 对它的封装，你才能定位和解决问题。Arch 虽然入门略微繁琐，新系统要进行好多配置才能开始使用，但是弄明白了，就什么都不怕了，因为在配置系统的过程中，你涉及的都是根本，它不阻拦你了解系统的本质，所有可用的参数一览无疑。

说服自己并不容易，要找很多利于自己想法的证据。而实际操作起来，有时反而很快。