gulp-htmlone 文件打包路径出错问题

问题

使用gulp进行打包处理时，需要将js和css均打包到html中来减少请求数。于是使用了gulp-htmlone插件，不得不吐槽一下这个插件实在是太老了，三年没更新了。在开发过程中遇到了问题，我的windows系统中，css中的background: url()引入的图片路径会被打包成 ..\images\xxx.png 而我老大的mac确实打包成了 ../images/xxx.png 。同一份代码，两种打包格式，怎么搞

处理

我当即觉得这个插件太老了，我要换插件，于是老大让我一个人去搞。我试了gulp-inline gulp-inline-resource，它们确实不会出现这种反斜杠的问题了，可是新的问题又出现了。这些插件不会根据要打包的位置进行图片的相对路径计算。也就是比如css中图片路径是 url(../../images/xxx.png) 实际dest与images文件夹是同一层的，我想要的是打包后为 url(../images/xxx.png)。搞了一下午还是没能解决问题。

最后我还是决定回归gulp-htmlone这个插件。

gulp-htmlone在打包处理时，会先计算background的图片地址的路径：

image.png

assetpath = path.relative(dirname, assetpath);
通过这个可以计算到图片地址相对于当前文件夹的位置，这就解决了我们在处理css图片路径时会出现的问题。通过这种相对定位算出的图片路径是绝对正确的。

可是，新的问题出来了，在mac或者unix中，其文件路径是通过正斜杠/来表示的。比如 C:/test/test
但是在windows中，却是用反斜杠\来表示的,比如 C:\test\test

那么，比如我们的图片相对于打包路径应该是 ../images/test.png
但是在windows下通过path.relative计算出来的却是 ..\images\test.png

所以，在windows中需要解决这一问题。我采用的方法是，首先获取当前系统属性，可以使用path.sep来获取，如果是/ 那么就是非windows系统 如果是\，那么就是windows系统。

此时，再对获取的相对资源路径进行变换即可

if (path.sep == '\\') {
  var assetpathArr = assetpath.split('\\')
  assetpath = assetpathArr.join('/')
}

最后测试，解决了windows打包出现的 反斜杠\ 问题。

感悟

最后没有办法了我去看htmlone的源码，发现htmlone具有处理文件路径的方法，那么我只要在这里改变处理过的相对路径即可。

所以，还是要多阅读人家的源码，才能更好地理解问题的所在