首页 > 如何部署一个js模块(或者叫widget)所依赖的非js资源

如何部署一个js模块(或者叫widget)所依赖的非js资源

我习惯把一个js模块和这个模块依赖的image和css都放到一个文件夹下,调用这个模块的时候再动态调用这个文件夹下的css文件,css文件用相对路径调用图片。

但是在项目合并打包的时候,我希望把所有模块所依赖的css文件都合并,导致css文件脱离了原来的文件结构,相对路径都不能用了。

如果给每一个css文件中的文件引用都改成绝对路径太麻烦了,移植性也不好,能不能有什么好的办法?


前段时间重构一个产品的时候,解决过这个问题,写了一个gulp的插件——gulp-css-rework-url。合并文件时候,做css路径替换,替换成绝对路径或url。也可以提取出css文件的中url()引用文件的路径,单独对文件处理。
github地址:https://github.com/itbeihe/gulp-css-rework-url
说到js模块,个人认为模块中除了js,css,静态资源外还包含html,处理方法写在github上了,感兴趣的可以看下。
https://github.com/itbeihe/component-html-engine-demo


我之前也遇到这个问题,解决办法就是写绝对路径,如果你为了保持模块独立可用性,可以考虑合并的时候写脚本做目录分析,然后替换css中的图片路径,我用的grunt做打包,用grunt做这些事情很方便,gulp也一样


那些css和图片没必要和js模块放在同一个目录下,可以单独拆出去。因为他们是根据DOM里的class提供样式,其他没有调用这个js模块的页面也可以使用相应class产生样式。

【热门文章】
【热门文章】