安装插件: 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',…

序言: 最近在收集前端的优化工具,随便一搜,厉害了word哥,有grunt.gulp.FIS3.webpack等等,简直就是眼花缭乱!前辈们对于他们的评价各有千秋,于是乎就想每个都来用一遍(之前已经倒腾了grunt,gulp),今天倒腾fis3,看看哪个更好玩~ FIS3 是什么?能做什么? FIS3 是面向前端的工程构建工具.解决前端工程中性能优化.资源加载(异步.同步.按需.预加载.依赖管理.合并.内嵌).模块化开发.自动化工具.开发规范.代码部署等问题. 1.安装: FIS3是基于node…

FIS3 是面向前端的工程构建工具.解决前端工程中性能优化.资源加载(异步.同步.按需.预加载.依赖管理.合并.内嵌).模块化开发.自动化工具.开发规范.代码部署等问题. 官网地址是: https://fex-team.github.io/fis3/index.html 我们要做前后端分离,将静态资源部署到CDN.调研了几个前端构建工具之后,选择了 fis3, 原因是能满足我们的需求.并且轻量级.配置简单.使用方便.安装也不容易报错. 下载安装 安装NodeJS 下载地址: http://nod…

fetch 事实标准,并不存在与ES6规范中,基于Promise实现. 目前项目中对Promise的兼容性尚存在问题,如果在项目中应用fetch,需要引入es6-promise和fetch. fis3中可以通过fis3 install es6-promise和fis3 install fetch进行安装. 以下提到为了浏览器兼容而引入的fech组件时统一使用'fech组件'代替. 该文档重点针对fetch组件进行详细说明. 相关概念 Request.Response.Header.Body:事实…

LESS是动态样式语言,赋予CSS动态语言的特性,如变量.继承.运算.函数,使得CSS更方便编写与维护.>>官网 less @color:#ff0000; body{color:@color;} 编译后 bosy{color:ff0000;} 一:命令行用法: 安装: npm install -g less 解析styles.less lessc styles.less 解析styles.less到styles.css lessc styles.less styles.css 注意: 如果文件…

info:更多Django信息url:https://www.oschina.net/p/djangodetail: Django 是 Python 编程语言驱动的一个开源模型-视图-控制器(MVC)风格的 Web 应用程序框架.使用 Django,我们在几分钟之内就可以创建高品质.易维护.数据库驱动的应用程序. Django 框架的核心组件有: 用于创建模型的对象关系映射 为最终用户设计的完美... info:更多OpenERP信息url:https://www.oschina.net/p/o…

1.在html文件中,如果在标签的style属性内添加路径,fis不会识别改路径并打包,如 2.fis主要针对静态文件进行打包.对其他文件打包会出现一些问题. 比如jsp页面.下面的例子script.jsp(这个jsp会在其他页面使用<%@include file="/WEB-INF/include/script.jsp"%>引用,里面有两个变量MOD_NOT_INCLUDED和JQUERY_NOT_INCLUDED,初始值都是true) 2.1 jsp中引用mod.js…

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版本: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…

fis3是一款强大的前端自动化构建工具,提供了很多非常实用的功能,具体参考http://fis.baidu.com/,使用该工具需要安装node环境. 最近在部署网站的时候尝试了一下使用该工具对前端资源进行处理,因为 FIS3 的构建不会修改源码,而是会通过用户设置,将构建结果输出到指定的目录,所以用起来很放心.在使用的过程中发现了一个问题,就是本来正常的网站,通过fis3处理后,出现了中文乱码情况,这个问题不解决就没法使用了.首先,查看了一下用fis3处理前后的文件编码,发现未处理前是带Bom…

注意:在安装fis3前必须安装node和npm,详情请见官网http://nodejs.org node版本要求 0.8.x,0.10.x, 0.12.x,4.x,6.x,不在此列表中的版本不予支持.最新版本 node 支持会第一时间跟进,支持后更新支持列表.Windows 用户安装完成后需要在 CMD 下确认是否能执行 node 和 npm. 查看nodejs的版本号 在命令行输入node -v:查看npm的版本号 在命令行输入npm -v: 安装fis3 1.在Windows系统中,开始菜单…

谁不想让自己的网站速度更快?为此需要多方面的优化,但优化又会增加开发工作量.Fis3 是很不错的前端优化工具,能够让前端的优化变得自动方便,解决前述问题.Fis3是百度开发的,开源的,在国内比较六流行.Visual Studio和MSBuild就不用说了.但是,想把Fis3结合进Visual Studio 或者 MSBuild的开发流程中去,从而统一前端/后端的开发流程,还没见人做过.究其原因,是因为Fis3会改变html页面本身,包括模板文件,如aspx, cshtml, php文件等等,但是…

前几天搭建了fis3环境,但是不会运行项目.因为刚来公司前辈把项目打包给我,但是我之前没有做过这种项目. 今天前辈来了,教我几个命令行运行项目.但是没有成功..... 原因我的sass是单独安装的,没有跟fis3环境关联起来.系统提示我重新安装  npm rebuild node-sass;问题来了,我去执行命令,错误:node.js版本不对,重新来过全部卸载. 但是我之前将npm已改成cnpm了,所以不知道怎么的就把fis3安装到F盘下了,后面很悲剧. 我解决的办法就是将fis3的安装路径配置…

1.全局安装nodejs 2.安装http-server npm install http-server -g 3.安装fis3 npm install -g fis3 如要限制版本号写法是:npm install -g fis3@3.3.0 4.安装fis3插件 FIS3 的插件都是以 NPM 包形式存在的,所以安装 FIS3 的插件需要使用 npm 来安装. 如:npm install -g 插件名 npm install -g fis-parser-less //例子引入一个 less 文…

Node 版本要求 0.8.x,0.10.x, 0.12.x,4.x,6.x,不在此列表中的版本不予支持.最新版本 node 支持会第一时间跟进,支持后更新支持列表 1.安装fis3 npm install -g fis3 安装完成后执行 fis3 -v 判断是否安装成功,如果安装成功,则显示类似如下信息: $ fis3 -v [INFO] Currently running fis3 (/Users/Your/Dev/fis3/dev/fis3) v3.0.0 /\\\\\\\\\\\\\\\…

人生第一篇博客,的确有点紧张,但有些许兴奋,因为这对于我来说应该是一个好的开始,以此励志在技术的道路上越走越远. 看过了多多少少的技术博客,给自己带来了很多技术上的收获,也因此在想什么时候自己也可以赠人玫瑰,手留余香呢?终于时候到了...哈哈 首先容我吐槽一番,在大前端的背景下各种框架层出不穷,相对的各种打包工具也应用而生,要说最火的就是webpack了,用户多所以社区相对活跃,团队维护,网上也有各种各样的问题可以轻易搜到从而解决自己的遇到的各种奇葩问题,所以90%的项目都会采用webpack来…

FIS3 是面向前端的工程构建工具.解决前端工程中性能优化.资源加载(异步.同步.按需.预加载.依赖管理.合并.内嵌).模块化开发.自动化工具.开发规范.代码部署等问题. 一.安装 全局安装fis3 npm install -g fis3  查看是否安装成功 fis3 -v 二.构建 官网提供了一个简单例子,例子结构如下(非常简单的由html.css.js以及几张图片构成) fis-conf.js是FIS3 配置文件,它所在的目录为项目根目录 构建发布(目前fis-conf.js为空) 构建发布…

FIS3是国内百度公司产出的一款前端工程构建工具,FIS3可以解决前端工程中性能优化.资源加载(异步.同步.按需.预加载.依赖管理.合并.内嵌).模块化开发.自动化工具.开发规范.代码部署等问题,首先来简单的实现资源合并压缩提高性能等问题. 安装fix3 npm install -g fis3 创建项目目录 cd 进入此目录中初始化,执行 fis3 init 对需要的插件进行安装 ,比如安装scss编译插件: npm install -g --save-dev fis-parser-node-s…

http://fis.baidu.com/ FIS3官网 [配环境]: 1.先要安装node.js https://nodejs.org/en/ NODE.js官网(下载这个,下载后运行:  https://nodejs.org/dist/v4.2.4/node-v4.2.4-x64.msi v4.2.4 LTS ) http://nodejs.cn/ NODE.js 中文网 安装在:  C:\nodejs\, 进入此目录,输入: npm install -g fis3 安装完后,敲入命令:(检…

说到打包工具,大家都会想到webpack,我之前也接触过webpack,说实话个人觉得webpack上手容易,但是对于新手来说里面有太多坑,配置文件也不简单.于是乎,我转入了fis3阵营,发现fis3对于新手来说再合适不过了,fis3只用记住几条命令就可以解决日常需求.下面开始讲解: 1.fis3 release [-d 发布路径] 发布代码到fis3本地浏览器,括号中代表发布到哪个文件目录下,不带参数,默认发布到本地浏览器(可以使用第5条命令查看本地服务器路径,会自动打开文件夹) 2.fis3…

fis3 的常用例子:https://github.com/fex-team/fis3-demo git链接可在页面中获取替换下面的git链接: 例子准备: git clone https://github.com/hefangshi/fis-quickstart-demo.git 启动本地服务器预览: fis3 server start ----注意:如果8080端口被占用,可以通过 fis3 server start -p 数字 #指定新的端口 参考文档编辑..... 编译并发布: fis3…

1.序列流(SequenceInputStream)整合个多个文件 A SequenceInputStream表示其他输入流的逻辑级联. 它从一个有序的输入流集合开始,从第一个读取到文件的结尾,然后从第二个文件读取,依此类推,直到最后一个输入流达到文件的结尾. import java.io.*; import java.util.Enumeration; import java.util.Vector; public class Test8 { public static void main(S…

概述 FIS3采取了类似CSS语法一样的配置风格,易于理解与上手.FIS3 是面向前端的工程构建工具.解决前端工程中性能优化.资源加载(异步.同步.按需.预加载.依赖管理.合并.内嵌).模块化开发.自动化工具.开发规范.代码部署等问题. 详细 代码下载:http://www.demodashi.com/demo/12243.html 一.安装fis3(确保已经安装了node) 执行cmd命令: npm install -g fis3 安装完成后,测试是否安装成功,输入命令: fis3 -v 如图…

PMS上线及安装文档 目录 一:安装环境1 1.1安装Node和NPM 1 1.2安装FIS3 1 1.3安装fis3压缩包 1 二:上线更新2 1:发布网站 2 2:寻找fis3 文件 2 3:复制fis 配置文件到发布文件夹中 3 4:在发布文件中打开cmd 3 5:执行fis3 发布命令 4 三:注意事项4 一:安装环境 1.1安装Node和NPM 运行node-v6.11.4-x64安装文件安装Node和NPM 1.2安装FIS3 运行cmd命令,执行以下安装命令安装FIS3 npm i…

为什么使用FIS3 项目上线一段时间后如果更新JS或CSS文件,而客户端已经对该文件缓存过了,那就有可能会无法及时更新而继续采用旧的JS或CSS文件,无法达到想要的效果. 处理类似情况最有效的解决方案就是修改其所有的链接,这样,请求就会从服务器下载最新的内容.但是要怎么改呢? 一:通过query的方式添加随机数.这样虽然可以保证每次都能获取到最新的静态资源,但即使没有更新也会去重新下载,缓存也就失去了意义,增加了服务器的负担. 二:通过query的方式添加时间戳或者版本号 <script typ…

为什么使用FIS3 项目上线一段时间后如果更新JS或CSS文件,而客户端已经对该文件缓存过了,那就有可能会无法及时更新而继续采用旧的JS或CSS文件,无法达到想要的效果. 处理类似情况最有效的解决方案就是修改其所有的链接,这样,请求就会从服务器下载最新的内容.但是要怎么改呢? 一:通过query的方式添加随机数.这样虽然可以保证每次都能获取到最新的静态资源,但即使没有更新也会去重新下载,缓存也就失去了意义,增加了服务器的负担. 二:通过query的方式添加时间戳或者版本号 <script typ…