前端工程构建工具FIS3
FIS3 是面向前端的工程构建工具。解决前端工程中性能优化、资源加载(异步、同步、按需、预加载、依赖管理、合并、内嵌)、模块化开发、自动化工具、开发规范、代码部署等问题。
一、安装
- 全局安装fis3
npm install -g fis3
- 查看是否安装成功
fis3 -v
二、构建
官网提供了一个简单例子,例子结构如下(非常简单的由html、css、js以及几张图片构成)
fis-conf.js是FIS3 配置文件,它所在的目录为项目根目录
构建发布(目前fis-conf.js为空)
- 构建发布到指定路径
fis3 release -d <path>
如发布到根目录的output目录下
fis3 release -d ./output
对比 构建前 和 构建后 的html和css文件,会发现资源由原来的 相对定位 变成了 绝对定位,这就是FIS3的资源定位。
- 好处有:① 资源发布到任何静态资源服务器任何路径上,线上运行时都能找到它们; ② 代码可移植性强,移植不用担心线上部署不一致的问题
三、配置文件
1、fis.match(selector, props)
- selector:要匹配的文件路径
- props:编译规则属性
fis.match('*.{png,js,css}', {
release: '/static/$0'
});
2、fis.media() 配置状态
fis.media() 可以使配置文件变为多份(多个状态,一个状态一份配置)。例如:
fis.media('rd').match('*', {
deploy: fis.plugin('http-push', {
receiver: 'http://remote-rd-host/receiver.php'
})
}); fis.media('qa').match('*', {
deploy: fis.plugin('http-push', {
receiver: 'http://remote-qa-host/receiver.php'
})
});
fis3 release rd
push 到 RD 的远端机器上fis3 release qa
push 到 QA 的远端机器上
3、文件指纹
给文件添加 MD5 戳
fis.match('*.{js,css,png}', {
useHash: true
});
4、压缩资源
fis.match('*.js', {
// fis-optimizer-uglify-js 插件进行压缩,已内置
optimizer: fis.plugin('uglify-js')
}); fis.match('*.css', {
// fis-optimizer-clean-css 插件进行压缩,已内置
optimizer: fis.plugin('clean-css')
}); fis.match('*.png', {
// fis-optimizer-png-compressor 插件进行压缩,已内置
optimizer: fis.plugin('png-compressor')
});
5、CssSprite图片合并
// 启用 fis-spriter-csssprites 插件
fis.match('::package', {
spriter: fis.plugin('csssprites')
}) // 对 CSS 进行图片合并
fis.match('*.css', {
// 给匹配到的文件分配属性 `useSprite`
useSprite: true
});
这个不支持我的node版本(v6.11.0),但是官网写的可以支持6.x,所以不知道是什么问题。很久以前用过这个,没有问题,感觉现在缺少维护了。
四、启动
FIS3 内置一个简易 Web Server,可以方便调试构建结果。
1、发布到内置 Web Server的根目录下,当启动服务时访问此目录下的资源
fis3 release
注:加 -w 可以监听文件
2、启动本地 Web Server,当此 Server 启动后,会自动浏览器打开 http://127.0.0.1:8080
fis3 server start
FIS3官网 http://fis.baidu.com/fis3/index.html
END------------------------------------------------------------------
前端工程构建工具FIS3的更多相关文章
- 前端工程构建工具之Yeoman
一.Yeoman 简介 通常在开发新项目时我们都需要配置工程环境,开发目录,需要下载一些库.框架文件(如 jQuery.Backbone 等),配置编译环境(Less.Sass.Coffeescrip ...
- 前端工程构建工具——Yeoman
一.Yeoman 简介 通常在开发新项目时我们都需要配置工程环境,开发目录,需要下载一些库.框架文件(如 jQuery.Backbone 等),配置编译环境(Less.Sass.Coffeescrip ...
- fis3前端工程构建配置入门教程
一.前言 fis3是百度推出的一款前端工程构建工具,类似的还有webpack,gulp等工具:无论大家有没有使用过,从事前端行业应该都略知一二了,所以对于此类工具用干嘛的我这里就不做重复了. 其实对于 ...
- 前端构建工具-fis3使用入门
FIS3 是面向前端的工程构建工具.解决前端工程中性能优化.资源加载(异步.同步.按需.预加载.依赖管理.合并.内嵌).模块化开发.自动化工具.开发规范.代码部署等问题. 官网地址是: https:/ ...
- 前端自动化构建工具——gulp
gulp是基于流的前端自动化构建工具. 一.环境配置 gulp是基于nodejs的,所以没有 nodejs 环境的要先去安装好 然后给系统配上gulp环境 npm install -g gulp 再到 ...
- 前端自动化构建工具gulp的使用总结
前端自动化构建工具gulp的使用总结 博主最近偶的空闲,在此对gulp的使用做一个总结,让小伙伴知道如何合理的使用gulp以及gulp的使用技巧. 谈到gulp,有人可能就会想到另外一个构建工具gru ...
- 前端开发构建工具gulp的安装使用
曾几何时还在使用grunt作为前端的构建工具,直到有一天同事向我推荐了gulp,在这里博主将不讨论gulp与grunt各自优势的比较,只为大家介绍gulp如何安装和使用. Gulp 是用 nodejs ...
- 前端自动化构建工具 Gulp 使用
一个月没写博客了,今天有时间,就写个gulp的入门使用吧.. 简介:gulp是一个前端自动化构建工具,可以实现代码的检查.压缩.合并……等等,gulp是基于Node.js的自动任务运行器 一.安装No ...
- gulp前端自动化构建工具新手入门篇
很久没有更新博文了. 经过了一次年前吐血的赶项目,终于在年后回血了.趁着有空,新学到了一个前端自动化构建工具-gulp. 现在我们通过这3个问题来学习一下: 1.什么是gulp? 2.为什么要用gul ...
随机推荐
- Mac appium.dmg. Xcode Command Line Tools
You need to install the command line tools as marked in your message: ✖ Xcode Command Line Tools are ...
- socket之粘包发生问题
粘包 注意注意注意: res=subprocess.Popen(cmd.decode('utf-8'),shell=True,stderr=subprocess.PIPE,stdout=subproc ...
- dict-命令行下中英文翻译工具
命令行下中英文翻译工具(Chinese and English translation tools in the command line) 安装(Install) ubuntu 安装 pip sud ...
- IdentityServer(14)- 使用EntityFramework Core配置和操作数据
IdentityServer具有良好的扩展性,其中一个可扩展点是用于IdentityServer所需数据的存储机制. 本快速入门介绍了如何配置IdentityServer以使用EntityFramew ...
- 全景图(panorama)低成本解决方案
软硬件 米家全景相机,用于较低成本(学习成本+Money)的获得全景图像,而比较专业的获得全景图像的方法则是单反+云平台+PTGui的组合. PhotoShop,用于处理全景图像. PhotoShop ...
- 用Windbg来分析.Net程序的dump
介绍 1. 什么是Windbg WinDbg是微软发布的一款相当优秀的源码级(source-level)调试工具,可以用于Kernel模式调试和用户模式调试,还可以调试Dump文件. WinDbg是微 ...
- 使用elk转存储日志
ELK指的是由Elastic公司提供的三个开源组件Elasticsearch.Logstash和Kibana. Logstash:开源的服务器端数据处理管道,能够同时 从多个来源采集数据.转换数据,然 ...
- 学习web前端技术的笔记,仅供自己查阅备忘,移动对font-size的控制(并非原创)
假设根字体font-size的值是40px, 640/40=16,16就是px换算rem的值 function initHtmlFontSize(){ //获取可可视屏幕的宽度 var _width= ...
- 树和二叉树的存储结构的实现(C/C++实现)
存档: #include <iostream.h> #include <stdio.h> #include <stdlib.h> #define max 20 ty ...
- hdu_1036(取整和格式控制)
题意很简单,求平均时间 复习一下如何取整 (int) fl 是直接向下取整 == floor(fl) 向上取整 (int)(fl+1) == ceil(fl) 四舍五入 (int)(fl+0.5 ...