npm pngquant failed——新blog爬坑记录
由于angular在我的个人项目中的运用十分普遍，而之前的blog是基于GATSBY——react的，在不同的两套生态环境以及习惯下进行维护开发，极大的加重了我的心智负担，再加上基于GATSBY的blog在中文环境下有太多的坑要填，我并不打算投入过多精力在这种基础设施建设上面，于是我决定快速的构造基于Scully——angular的blog解决方案。
发现之旅
说来也巧，我偶然间发现notiz.dev团队的blog也是基于scully搭建并已经开源，这为我的搭建之路提供的很好的样例。notiz.dev团队致力于提供tailwind.css的angular module来方便angular开发者使用该css库。我发现在他们的notiz.dev bolg中就大量应用了该技术，如果我能使用的话，将大大提升我的开发效率。
于是我选择clone notiz.dev的前端部分，再基于此进行本地化改造。
lib问题
发现
由于近期的项目需要使用某仿真软件进行大量的工作，而该仿真软件需要关闭虚拟化才能使用，我迫不得已暂时关闭了我常用的wsl2环境来进行blog开发。因此，这次的blog开发，我选择在windows环境下进行。
由于我很少在Windows下进行nodejs开发，这一npm i，我就遇到了问题。在powershell core中我收到了如下提示：
!! getaddrinfo ENOENT raw.githubusercontent.com
!! pngquant pre-build test failed
i compiling from source
x Error: pngquant failed to build, make sure that libpng-dev is installed
然而在谷歌上，有人讲是pngquant不正常Windows？？
但是更根据ENOENT（即Error NO ENTry的缩写，因为早期的C编译器不支持超过8个字符的符号，因此用于表达没有（广义的）文件或目录等）1，我们应该是要从github中下载一个文件，但是失败了。通过相关资料，我们可以了解到，我们需要从github中下载imagemin/pugquant-bin/vendor/win/pngquant.exe，然而下载失败后，尝试进行本地编译，而又因为缺少libpng-dev依赖，从而失败。
解决
既然是下载失败问题，那么解决方法有二：
- 我们提取下载好放入目录，待检测通过；
- 我们让node.js能够成功下载需要的文件。
之前我们都是使用淘宝镜像源进行下载，但是这个是需要在github中下载的，且难以修改。于是我们将npm访问代理到合法的国际科研线路，就解决了该问题。
tag-slug问题
发现
在改造notiz.dev时，我们发现该项目错误的将tag的title作为link，按理需要将tag的slug作为link使用的。错误代码如下：
<a [routerLink]="'/tags/' + (tag | dash | lowercase)">
{{ tag }}
</a>
解决
在scully-content.service.ts中引入tagLink方法，目的是根据tag的title获取tag的slug。
tagLink(tagTitle:string): Observable<string>{
return this.tags().pipe(
map(tag=>tag.filter(
(tag:ScullyRoute) => {
return tag.title.includes(tagTitle);
}
)),
map(tag=>tag[0].slug)
);
}
接下来只需要这样使用
<a [routerLink]="'/tags/' + (this.content.tagLink(tag) | async | dash | lowercase)">
{{ tag }}
</a>
其中this.content来自：
constructor(public content: ScullyContentService){}
总结
不要轻易听信谷歌上面的答案，要用自己的双手去探索去解决。
我刚开始都听信google答案，尝试用rust手动编译pugquant。
后来终于发现了问题的所在，所以也还是要细心啊！