使用百度fis3构建前端多页应用
吾日三省吾身。
从一个完全不相干的行业转到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戳,再也不需要担心缓存问题了
使用百度fis3构建前端多页应用的更多相关文章
- 利用fis3构建前端项目工程
FIS3是国内百度公司产出的一款前端工程构建工具,FIS3可以解决前端工程中性能优化.资源加载(异步.同步.按需.预加载.依赖管理.合并.内嵌).模块化开发.自动化工具.开发规范.代码部署等问题,首先 ...
- Fis3的前端模块化之路[基础篇]
Fis3版本:v3.4.22 fis3是一个构建工具 解决前端开发中自动化工具.性能优化.模块化框架.开发规范.代码部署.开发流程等问题. 安装 npm install -g fis3 运行 fis3 ...
- 构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(2)-easyui构建前端页面框架[附源码]
原文:构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(2)-easyui构建前端页面框架[附源码] 开始,我们有了一系列的解决方案,我们将动手搭建新系统吧. 用 ...
- python使用get在百度搜索并保存第一页搜索结果
python使用get在百度搜索并保存第一页搜索结果 作者:vpoet mail:vpoet_sir@163.com 注:随意copy,不用在意我的感受 #coding:utf-8 import ur ...
- ASP.NET MVC下实现前端视图页的Session
在ASP.NET MVC的控制器中可以实现Session处理.如果要在前端视图页实现Session该如何做呢?可以使用window.sessionStorage来做. AlexChittock用jQu ...
- Gulp构建前端自动化工作流之:常用插件介绍及使用
在对Gulp有了一个初步的了解之后,我们开始构建一个较为完整的Gulp开发环境. 本文主要分为6个段落: 1. 构建项目目录结构(Directory Structure Build) 2. 插件介绍及 ...
- vue 构建前端项目并关联github
这几天尝试用node开发一个网站,后端的接口已经初步开发完成,现在开始构建前端的项目,记录下过程,在学习下吧. 用vue-cli 构建项目,myproject.(构架过程略过) 每次在本地构建项目后和 ...
- Gulp安装及配合组件构建前端开发一体化(转)
Gulp安装及配合组件构建前端开发一体化 所有功能前提需要安装nodejs(本人安装版本v0.10.26)和ruby(本人安装版本1.9.3p484). Gulp 是一款基于任务的设计模式的自动化工具 ...
- 使用webpack+vue.js构建前端工程化
参考文章:https://blog.csdn.net/qq_40208605/article/details/80661572 使用webpack+vue.js构建前端工程化本篇主要介绍三块知识点: ...
随机推荐
- Intellij Idea:创建带签名的APK
步骤如下: 1. 选择菜单Build -> Generate Signed APK… 2. 创建或选择已存在的Key Store(选择已存在的Key Store的话直接跳到第5步) 3. 输入K ...
- 切换div位置
通过数组来存放div的属性以及属性值,鼠标点击的时候,切换数组中的元素,然后赋值给div <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Tr ...
- 优秀软件project师必备的7大特性
不是每个程序猿都能成为优秀的软件project师. 在过去的6年时间里,我在Ooyala.Quora和now Quip这3个创业公司面试过许很多多挺有发展潜力的"种子选手".他们都 ...
- UVA 12683 Odd and Even Zeroes(数学—找规律)
Time Limit: 1000 MS In mathematics, the factorial of a positive integer number n is written as n! an ...
- 发现百度开源一个好东西,Echarts统计报表前段框架
1,如今数据越来越重要了 可是数据报表的可视化展示一直是个问题. 如今好了.有Echarts能够解决一部分数据展示的问题. http://echarts.baidu.com/index.html 类似 ...
- hive学习路线
hive学习路线图:
- C++源码实现:21种常用设计模式
C++源码实现:21种常用设计模式一直以来在设计模式的学习中,都是出现java的源码,这对学习C++的极度不友好.本工程是基于C++实现21种常用的设计模式,里面包含了实例代码和示例.编写的时候在学习 ...
- Android中关于内部存储的一些重要函数
一.简介 Android中,你也可以通过绝对路径以JAVA传统方式访问内部存储空间.但是以这种方式创建的文件是对私有,创建它的应用程序对该文件是可读可写,但是别的应用程序并不能直接访问它.不是所有的内 ...
- 【bzoj2038】[2009国家集训队]小Z的袜子(hose)(细致总结)
[bzoj2038][2009国家集训队]小Z的袜子(hose)(细致总结) Description 作为一个生活散漫的人,小Z每天早上都要耗费很久从一堆五颜六色的袜子中找出一双来穿.终于有一天,小Z ...
- bzoj 3029 守卫者的挑战 —— 概率DP
题目:https://www.lydsy.com/JudgeOnline/problem.php?id=3029 设 f[i][j][k] 表示第 i 次挑战,已经成功 j 次,剩余容量为 k 的概率 ...