吾日三省吾身。
从一个完全不相干的行业转到IT,多多少少都会感到迷茫,不知道学习什么、从何学起?在几乎没有任何经验的背景下,坚持投递简历,最后终于进入了一个创业公司,开始做起了前端工作。工资勉强维持生活。工作之余,也在不停的学习。
项目web页面多是用的jsp,项目组leader对html、css、js这块也不甚了解,所以大多数时候都是自己去研究怎么搞。
每次版本更新的时候都会遇到缓存的问题,然后自己就去找解决方案,然后就发现了fis3(http://fis.baidu.com/)这个前端构建工具,感觉还挺好用,又适合现在的项目。
基本用法也很简单:
- 安装
需要先安装node和npm(注意:node版本最好安装9.xx以下的,否则fis3的某些功能不支持)
直接命令行执行
npm install -g fis3
安装成功后,fis3 -v可以看到版本 - 开始
fis3的构建不会修改源码,只是会通过设置,将构建结果输出到指定的目录中。它可以实现将相对路径转绝对路径,给文件加md5戳,这也是解决缓存问题的关键。
建立项目文件夹,在项目根目录下建立fis-conf.js文件。这里的根目录也会作为设置绝对目录的依据,当然也可以自行通过设置,改变绝对路径的url。
普通web页面一般只会用到下面几个功能:
a. 文件md5戳fis.match(‘*.{css,js,png,jpg}‘, { useHash: true })
可以自行控制匹配项,有些文件不一定需要加文件指纹,可以
fis.match(‘{reset.css,jquery.js}‘, { useHash: false })
b. 资源压缩
通常需要压缩的资源有css样式文件,js文件,图片等// css样式文件 fis.match(‘*.css‘, { // fis-optimizer-clean-css插件已内置 optimizer: fis.plugin(‘clean-css‘) }) // js文件 fis.match(‘*.js‘, { // fis-optimizer-uglify-js插件已内置 optimizer: fis.plugin(‘uglify-js‘) }) // png格式图片文件 fis.match(‘*.js‘, { // fis-optimizer-png-compressor插件已内置,该插件不支持10.xx版本的node,所以需要用的的建议不要升级node optimizer: fis.plugin(‘png-compressor‘) })
c. 雪碧图
fis3可以对背景图片自动进行雪碧图合并,写样式的时候,后面加上?__spriteli.list1 { background-image: url(‘./img/list-1.png?__sprite‘); } li.list2 { background-image: url(‘./img/list-2.png?__sprite‘); }
// 首先启用fis-spriter-csssprites 插件 fis.match(‘::package‘, { spriter: fis.plugin(‘csssprites‘) }) // 对设置了?__sprite的背景图片合并 fis.match(‘*.css‘, { useSprite: true })
d. sass、less预编译器
sass:需要先安装fis-parser-node-sass插件
npm install -g fis-parser-node-sassfis.match(‘*.scss‘, { parser: fis.plugin(‘node-sass‘), rExt: ‘.css‘, useHash: true // 可以直接在这里添加md5戳 });
less:需要先安装fis-parser-less插件
npm install -g fis-parser-lessfis.match(‘*.less‘, { parser: fis.plugin(‘less‘), rExt: ‘.css‘ })
页面中的样式文件仍然引用原文件
<link rel="stylesheet" href="./css/XXX.less"> <link rel="stylesheet" href="./css/XXX.scss">
d. 预览与文件监听
fis3内置server,可以使用命令
fis3 server start 开启内置服务器,默认8080端口,fis3 server stop 关闭服务器。
使用命令
fis3 release -wL 将项目发布到内置服务器,并开启文件监听,在编辑器中修改代码,保存后会在浏览器(推荐使用Chrome)实时更新。
如果静态资源的访问路径与项目根路径不一致,可以使用url配置fis.match(‘*.{png,js,jpg,css,scss}‘, { url: ‘/src/pages$0‘ })
这样就基本满足一个多页面web项目的要求了。
添加了md5戳,再也不需要担心缓存问题了
原文地址:https://www.cnblogs.com/luoshiliang/p/10322297.html