使用百度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可以对背景图片自动进行雪碧图合并,写样式的时候,后面加上?__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戳,再也不需要担心缓存问题了

原文地址:https://www.cnblogs.com/luoshiliang/p/10322297.html

时间: 2024-10-03 21:15:07

使用百度fis3构建前端多页应用的相关文章

前端单页应用微服务化解决方案2 - Single-SPA

技术选型 经过各种技术调研我们最终选择的方案是基于 Single-SPA 来实现我们的前端微服务化. Single-SPA 一个用于前端微服务化的JavaScript前端解决方案 使用Single-SPA之后,你可以这样做: (兼容各种技术栈)在同一个页面中使用多种技术框架(React, Vue, AngularJS, Angular, Ember等任意技术框架),并且不需要刷新页面. (无需重构现有代码)使用新的技术框架编写代码,现有项目中的代码无需重构. (更优的性能)每个独立模块的代码可做

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

python使用get在百度搜索并保存第一页搜索结果 作者:vpoet 日期:大约在夏季 注:随意copy,不用在意我的感受 #coding:utf-8 import urllib import urllib2 import re """ 使用GET在百度搜索引擎上查询 此例演示如何生成GET串,并进行请求. """ if __name__=="__main__": url = "http://www.baidu.c

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

在对Gulp有了一个初步的了解之后,我们开始构建一个较为完整的Gulp开发环境. 本文主要分为6个段落: 1. 构建项目目录结构(Directory Structure Build) 2. 插件介绍及使用方法(Tasks and dependencies) 3. 扩展优化(Extend & Optimize Task) 4. 其他插件介绍(Other plug-ins) 5. 匹配规则(Match Files) 6. 注意事项(Attention) 关于Gulp的入门介绍及安装方法,可先去 <

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

Gulp安装及配合组件构建前端开发一体化 所有功能前提需要安装nodejs(本人安装版本v0.10.26)和ruby(本人安装版本1.9.3p484). Gulp 是一款基于任务的设计模式的自动化工具,通过插件的配合解决全套前端解决方案,如静态页面压缩.图片压缩.JS合并.SASS同步编译并压缩CSS.服务器控制客户端同步刷新. Gulp安装 全局安装Gulpjs npm install -g gulp  #全局安装 局部安装Gulpjs npm install gulp --save-dev

构建前端用户系统之登录退出

前端页面中难免会有一些静态HTML文件, 这时就会遇到用户状态的判断问题, 于是想到使用js的ajax请求来处理整个前端用户相关的东东...版本一 思路是在页面中指定位置预留一个js钩子, 然后在页面加载完成后向后端发送ajax请求, 判断用户是否登录, 并写到钩子里相应文本. 于是版本一产生了... (function($){ var user = window.user = {}; // 用户数据 user.data = {}; // 用户状态, 0未登录, 非0则视为已登录, 可扩展为用户

百度2016实习 前端试题中的编程题2:Excel地址的相互转换 [2015南桥杯试题]

百度2016实习 前端试题中的编程题2:Excel地址的相互转换  Excel是最常用的办公软件.每个单元格都有唯一的地址表示.比如:第12行第4列表示为:"D12",第5行第255列表示为"IU5". 事实上,Excel提供了两种地址表示方法,还有一种表示法叫做RC格式地址. 第12行第4列表示为:"R12C4",第5行第255列表示为"R5C255". 要求:编写程序,对换两种不同的表示方法表示行列,即 如果输入是常规地址

xshow-2. 使用HTML 5 Boilerplate构建前端

xshow-使用HTML 5 Boilerplate构建前端 方法一:使用Aptana Studio构建,如下 方法二:使用git下载 git clone https://github.com/h5bp/html5-boilerplate.git 方法三:直接从官网下载最新版本 https://html5boilerplate.com/ 安装Aptana Studio 3 下载最新版本的Aptana Studio,当然其他类似的IDE也可以,看个人喜好 创建项目xshow 选择HTML5 Boi

使用React重构百度新闻webapp前端

http://wangfupeng.coding.me/share/2016/08/06/restruct-bdnews-webapp-by-react.html 声明 本文仅仅是对前几个月使用React重构百度新闻webapp项目的一个总结和思考,不会泄露任何项目代码(文章中的代码都是fis3或其他开源产品的配置代码,fis3是百度开源产品),因此“伸手党”可绕行. 现在2016年8月,web前端技术这几年变化太快,因此一些信息的时效性非常重要,还是把时间写上比较好. 项目介绍 百度新闻的 w

使用 gulp-file-include 构建前端静态页面

前言 虽然现在单页面很流行,但是在 PC 端多页面还是常态,所以构建静态页面的工具还有用武之地.最近也看到了一些询问如何 include HTML 文件的问题. 很多时候我们在写静态页面的时候也希望能和后台模板一样,将导航.页头.页脚等公用的部分分离出去,然后引入页面中.单纯的静态页面不具备这种功能,而使用 gulp 插件可以很容易的完成,比如 gulp-file-include 插件. 官网对于插件的基本使用已经说得很详细,但是对于一些具体的场景并没有举例,所以初次接触还是还是会有疑惑,比如具