吾日三省吾身。

从一个完全不相干的行业转到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可以对背景图片自动进行雪碧图合并,写样式的时候,后面加上?__sprite

    li.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-sass

    fis.match('*.scss', {
    parser: fis.plugin('node-sass'),
    rExt: '.css',
    useHash: true // 可以直接在这里添加md5戳
    });

    less:需要先安装fis-parser-less插件
        npm install -g fis-parser-less

    fis.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构建前端多页应用的更多相关文章

  1. 利用fis3构建前端项目工程

    FIS3是国内百度公司产出的一款前端工程构建工具,FIS3可以解决前端工程中性能优化.资源加载(异步.同步.按需.预加载.依赖管理.合并.内嵌).模块化开发.自动化工具.开发规范.代码部署等问题,首先 ...

  2. Fis3的前端模块化之路[基础篇]

    Fis3版本:v3.4.22 fis3是一个构建工具 解决前端开发中自动化工具.性能优化.模块化框架.开发规范.代码部署.开发流程等问题. 安装 npm install -g fis3 运行 fis3 ...

  3. 构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(2)-easyui构建前端页面框架[附源码]

    原文:构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(2)-easyui构建前端页面框架[附源码] 开始,我们有了一系列的解决方案,我们将动手搭建新系统吧. 用 ...

  4. python使用get在百度搜索并保存第一页搜索结果

    python使用get在百度搜索并保存第一页搜索结果 作者:vpoet mail:vpoet_sir@163.com 注:随意copy,不用在意我的感受 #coding:utf-8 import ur ...

  5. ASP.NET MVC下实现前端视图页的Session

    在ASP.NET MVC的控制器中可以实现Session处理.如果要在前端视图页实现Session该如何做呢?可以使用window.sessionStorage来做. AlexChittock用jQu ...

  6. Gulp构建前端自动化工作流之:常用插件介绍及使用

    在对Gulp有了一个初步的了解之后,我们开始构建一个较为完整的Gulp开发环境. 本文主要分为6个段落: 1. 构建项目目录结构(Directory Structure Build) 2. 插件介绍及 ...

  7. vue 构建前端项目并关联github

    这几天尝试用node开发一个网站,后端的接口已经初步开发完成,现在开始构建前端的项目,记录下过程,在学习下吧. 用vue-cli 构建项目,myproject.(构架过程略过) 每次在本地构建项目后和 ...

  8. Gulp安装及配合组件构建前端开发一体化(转)

    Gulp安装及配合组件构建前端开发一体化 所有功能前提需要安装nodejs(本人安装版本v0.10.26)和ruby(本人安装版本1.9.3p484). Gulp 是一款基于任务的设计模式的自动化工具 ...

  9. 使用webpack+vue.js构建前端工程化

    参考文章:https://blog.csdn.net/qq_40208605/article/details/80661572 使用webpack+vue.js构建前端工程化本篇主要介绍三块知识点: ...

随机推荐

  1. Intellij Idea:创建带签名的APK

    步骤如下: 1. 选择菜单Build -> Generate Signed APK… 2. 创建或选择已存在的Key Store(选择已存在的Key Store的话直接跳到第5步) 3. 输入K ...

  2. 切换div位置

    通过数组来存放div的属性以及属性值,鼠标点击的时候,切换数组中的元素,然后赋值给div <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Tr ...

  3. 优秀软件project师必备的7大特性

    不是每个程序猿都能成为优秀的软件project师. 在过去的6年时间里,我在Ooyala.Quora和now Quip这3个创业公司面试过许很多多挺有发展潜力的"种子选手".他们都 ...

  4. 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 ...

  5. 发现百度开源一个好东西,Echarts统计报表前段框架

    1,如今数据越来越重要了 可是数据报表的可视化展示一直是个问题. 如今好了.有Echarts能够解决一部分数据展示的问题. http://echarts.baidu.com/index.html 类似 ...

  6. hive学习路线

    hive学习路线图:

  7. C++源码实现:21种常用设计模式

    C++源码实现:21种常用设计模式一直以来在设计模式的学习中,都是出现java的源码,这对学习C++的极度不友好.本工程是基于C++实现21种常用的设计模式,里面包含了实例代码和示例.编写的时候在学习 ...

  8. Android中关于内部存储的一些重要函数

    一.简介 Android中,你也可以通过绝对路径以JAVA传统方式访问内部存储空间.但是以这种方式创建的文件是对私有,创建它的应用程序对该文件是可读可写,但是别的应用程序并不能直接访问它.不是所有的内 ...

  9. 【bzoj2038】[2009国家集训队]小Z的袜子(hose)(细致总结)

    [bzoj2038][2009国家集训队]小Z的袜子(hose)(细致总结) Description 作为一个生活散漫的人,小Z每天早上都要耗费很久从一堆五颜六色的袜子中找出一双来穿.终于有一天,小Z ...

  10. bzoj 3029 守卫者的挑战 —— 概率DP

    题目:https://www.lydsy.com/JudgeOnline/problem.php?id=3029 设 f[i][j][k] 表示第 i 次挑战,已经成功 j 次,剩余容量为 k 的概率 ...