Fis3项目 项目目录结构: E:. │ .gitignore │ fis-conf.js │ index.html │ package.json │ README.md │ ├─material │ └─resource ├─css ├─images └─js ├─lab │ │ │ └─until └─ui 项目要求: 1.雪碧图 2.代码模块化 3.预处理 4.md5戳 5.压缩资源 雪碧图 启用雪碧图插件,fis3已内置 fis.match('::package', { spriter:…

一.前言 fis3是百度推出的一款前端工程构建工具,类似的还有webpack,gulp等工具:无论大家有没有使用过,从事前端行业应该都略知一二了,所以对于此类工具用干嘛的我这里就不做重复了. 其实对于这类构建工具,大部分人是不感兴趣,或者说有些畏惧的,配置多贼麻烦,无法像js一样调试很恐怖,给人感觉很难:特别是fis3这种相对比较冷门的构建工具,出现问题百度一圈相关答案真的很少... 我也曾抱怨公司为啥不用webpack,但我毕竟不是抉择者,已经决定了使用这个还不如沉下心去学习了解:本文会抽出我…

安装插件: npm install -g fis-parser-less npm install -g fis3-postpackager-loader 配置:fis-conf.js 使用fis-parser-less 插件进行解析,.less 文件后缀构建后被改成 .css 文件 fis.match('*.less', { parser: fis.plugin('less'), rExt: '.css' }) less的打包: //less转换为css fis.match('*.less',…

设置规则的配置接口: fis.match(selector, props); 1.添加md5戳:对 js.css.png 图片引用 URL 添加 md5 戳: fis.match('*.{js,css,png}', { useHash: true }); 2.js压缩:使用fis-optimizer-uglify-js 插件,已内置 fis.match('*.js', { optimizer: fis.plugin('uglify-js') }); 3.CSS压缩:使用fis-optimizer…

Fis3版本:v3.4.22 Fis3的三大特性 资源定位:获取任何开发中所使用资源的线上路径 内容嵌入:把一个文件的内容(文本)或者base64编码(图片)嵌入到另一个文件中 依赖声明:在一个文本文件内标记对其他资源的依赖关系 声明依赖 FIS3 在执行编译的过程中,会扫描这些编译标记,从而建立一张 静态资源关系表,资源关系表详细记录了项目内的静态资源id.发布后的线上路径.资源类型以及 依赖关系 和 资源打包 等信息.使用 FIS3 作为编译工具的项目,可以将这张表提交给后端或者前端框架去运…

Fis3版本:v3.4.22 Fis3的三大特性 资源定位:获取任何开发中所使用资源的线上路径 内容嵌入:把一个文件的内容(文本)或者base64编码(图片)嵌入到另一个文件中 依赖声明:在一个文本文件内标记对其他资源的依赖关系 资源定位 资源定位的能力让我们不在关心资源部署到线上之后去了哪里,变成了什么名字,这些都可以通过配置来指定.而工程师只需要使用相对路径来定位自己的开发资源即可. html中资源定位 对html中的script.link.style.video.audio.embed等标…

Fis3版本:v3.4.22 Fis3的三大特性 资源定位:获取任何开发中所使用资源的线上路径 内容嵌入:把一个文件的内容(文本)或者base64编码(图片)嵌入到另一个文件中 依赖声明:在一个文本文件内标记对其他资源的依赖关系 内容嵌入 嵌入资源即内容嵌入,可以为工程师提供诸如图片base64嵌入到css.js里,前端模板编译到js文件中,将js.css.html拆分成几个文件最后合并到一起的能力.有了这项能力,可以有效的减少http请求数,提升工程的可维护性. fis不建议用户使用内容嵌入能…

Fis3版本:v3.4.22 fis3是一个构建工具 解决前端开发中自动化工具.性能优化.模块化框架.开发规范.代码部署.开发流程等问题. 安装 npm install -g fis3 运行 fis3 -v 输出 说明安装成功. 基本使用 查看有哪些命令 fis3 -h 构建命令 //构建 fis3 release //构建输出到指定目录 fis3 release -d <path> //构建输出到当前目录下 fis3 release -d ./output //构建输出到父级目录下 fis3…

首先说明一下,即使不熟悉fis3,阅读文本应该也会有所收获. 本文以fis-parser-imweb-tplv2插件为模板插件,目的不在于使用哪个模板,而是组件可视化的实现思路,不必担心. 先说说模板插件 首先说明一下,我们的项目使用的fis3自带的mod.js做模块化开发. fis-parser-imweb-tplv2插件是同事在imweb待着的时候写的.模板使用和jsp写法一致,文件类型为tpl类型 <div class="tips"> <em> <i…

上一节我们学习了webpack的安装和编译,这一节我们来一起学习webpack的加载器和配置文件. 要想让网页看起来绚丽多彩,那么css就是必不可少的一份子.如果想要在应用中增加一个css文件,那么webpack能不能处理呢?答案当然是可以.但是由于webpack只能本地处理JavaScript,因此我们需要css-loader来处理css文件,我们还需要style-loader在css文件中应用样式. ps:css-loader会遍历css文件,找到url()表达式然后进行处理.style-l…