FIS3 是面向前端的工程构建工具。解决前端工程中性能优化、资源加载(异步、同步、按需、预加载、依赖管理、合并、内嵌)、模块化开发、自动化工具、开发规范、代码部署等问题。

官网地址是: https://fex-team.github.io/fis3/index.html

我们要做前后端分离,将静态资源部署到CDN。调研了几个前端构建工具之后,选择了 fis3, 原因是能满足我们的需求、并且轻量级、配置简单、使用方便、安装也不容易报错。

下载安装

  1. 安装NodeJS

    下载地址: http://nodejs.cn/download/

    推荐下载最新版本的NodeJS,如 v8.1.3+ 等。

    安装到默认目录,完成后查看版本号: node -v
  2. npm安装fis3

    在 cmd 中执行: npm install -g fis3

    安装fis3后,在 cmd 中执行 fis3 -v 判断是否安装成功

相关的 shell 命令如下:

node -v
npm install -g fis3
fis3 -v

简单使用

说明: fis3等前端构建工具,依赖的是相对路径, 如./xxx/xxx.js 等; 识别: <img src=""><link href=""><script src=""> url('') 等资源配置。

如果你的项目不符合此要求, 需要进行一定的修改。

首先,在前端代码的根目录中,创建文件 fis-conf.js。 fis3 会查找此文件作为配置。

修改fis-conf.js文件的内容:

// 配置不同环境的CDN资源前缀
fis.media('prod').match('*.{js,css,png}', {
  domain: 'http://cdn.cncounter.com/cncounter-web'
});

fis.media('beta').match('*.{js,css,png}', {
  domain: 'http://beta.cdn.cncounter.com/cncounter-web'
});

fis.media('dev').match('*.{js,css,png}', {
  domain: 'http://dev.cdn.cncounter.com/cncounter-web'
});

// 所有js, css 加 hash
fis.match('*.{js,css,png}', {
  useHash: true
});

// 生产环境进行JS压缩
fis.media('prod').match('*.js', {
  optimizer: fis.plugin('uglify-js')
});

// dev 环境不加hash, 不进行压缩和优化
fis.media('dev').match('*.{js,css,png}', {
  useHash: false,
  optimizer: null
});

简单解释一下, fis.media('prod') 意思是生产环境的配置。

使用fis3时,可以指定打包版本, 例如:

fis3 release prod -d cdn_release

如果不指定, 则默认为 dev 环境(fis3中称为media)

指定输出目录是 -d 选项,可以指定绝对路径,相对路径;

另外, fis.match 是很简单的配置,后面会覆盖前面。

其中, useHash 指定是否根据内容生成 hash, 例如 common-utils.js 在生成目录下会变成: common-utils_331734d.js;

optimizer 指定优化配置,例如文件压缩、合并,内联等;

其他插件可能需要安装额外的 npm 组件/插件;

示例

Windows 使用示例(cmd 环境):

E:
cd E:\cncounter-web\src\main\webapp
dir fis-conf.js
fis3 release prod -d cdn_release

Linux 或者 Mac 大同小异, 请根据需要自己配置,或者参考官网。

然后,进入 cdn_release 目录, 看看对应的 html,css,js 等文件的变化吧。

如果项目未拆分, 与 MAVEN 一起组合使用时, 先执行 fis3 的构建(可以指定 html 等文件的输出目录), 然后通过 copy-resources 等插件进行组装。

如果需要更复杂的功能,请参考官方的配置文档: https://fex-team.github.io/fis3/docs/beginning/release.html

原文作者: 铁锚 http://blog.csdn.net/renfufei

原文日期: 2017年7月10日

前端构建工具-fis3使用入门的更多相关文章

  1. (转)前端构建工具gulp入门教程

    前端构建工具gulp入门教程 老婆婆 1.8k 2013年12月30日 发布 推荐 10 推荐 收藏 83 收藏,20k 浏览 本文假设你之前没有用过任何任务脚本(task runner)和命令行工具 ...

  2. 前端构建工具 Grunt 入门

    之前也介绍过前端构建工具 Ant 和 Yeoman,其中 Yeoman 工具就包含了 Grunt 所以就不多说.那么与 Ant 相比 Grunt 有这么几个优点: Javascript 语法,相比 A ...

  3. gulp 前端构建工具入门

    gulp 前端构建工具入门 标签(空格分隔): gulp 1. 安装gulp npm i -g gulp 2. 创建gulp项目 2.1 Hello world 使用npm init初始化项目文件夹. ...

  4. 前端构建工具之gulp的安装和配置

    在选择构建工具时,看到更多人推荐gulp,从此入了gulp的坑- 一.安装node环境 百度谷歌一下就有了,在终端中分别输入 node -v 和 npm -v,若显示node和npm的版本号则说明no ...

  5. webpack前端构建工具学习总结(二)之loader的使用

    Webpack 本身只能处理 JavaScript 模块,如果要处理其他类型的文件,就需要使用 loader 进行转换. Loader 可以理解为是模块和资源的转换器,它本身是一个函数,接受源文件作为 ...

  6. 前端构建工具之gulp(一)「图片压缩」

    前端构建工具之gulp(一)「图片压缩」 已经很久没有写过博客了,现下终于事情少了,开始写博吧 今天网站要做一些优化:图片压缩,资源合并等 以前一直使用百度的FIS工具,但是FIS还没有提供图片压缩的 ...

  7. 前端构建工具之gulp_常用插件

    gulp常用插件的使用 今天来看看一下gulp的常用插件的使用 就像gruntjs需要一个Gruntfile.js文件一样,gulp也需要一个文件作为它的主文件,在gulp中这个文件叫做gulpfil ...

  8. 前端构建工具gulpjs的使用介绍及技巧

    gulpjs是一个前端构建工具,与gruntjs相比,gulpjs无需写一大堆繁杂的配置参数,API也非常简单,学习起来很容易,而且gulpjs使用的是nodejs中stream来读取和操作数据,其速 ...

  9. 前端构建工具gulp使用

    前端自动化流程工具,用来合并文件,压缩等. Gulp官网 http://gulpjs.com/ Gulp中文网 http://www.gulpjs.com.cn/ Gulp中文文档 https://g ...

随机推荐

  1. 20145331 实验一 "Java开发环境的熟悉"

    20145331 实验一 "Java开发环境的熟悉" 实验内容 使用JDK和IDE编译.运行简单的Java程序.题目: 实现四则运算,并进行测试. 编写代码 1.首先第一步就是要输 ...

  2. MySQL_解决ERROR 2006 (HY000) at line XX MySQL server has gone away问题

    参考:http://www.111cn.net/database/mysql/106911.htm 1.修改mysqld的配置文件my.cnf 调整max_allowed_packet的值,修改为5M ...

  3. cogs 896. 圈奶牛

    ★★☆   输入文件:fc.in   输出文件:fc.out   简单对比 时间限制:1 s   内存限制:128 MB 描述 农夫约翰想要建造一个围栏用来围住他的奶牛,可是他资金匮乏.他建造的围栏必 ...

  4. SpringBoot集成Mybatis-PageHelper分页工具类,实现3步完成分页

    在Mybatis中,如果想实现分页是比较麻烦的,首先需要先查询出总的条数,然后再修改mapper.xml,为sql添加limit指令. 幸运的是现在已经不需要这么麻烦了,刘大牛实现了一个超牛的分页工具 ...

  5. zip unzip tar 压缩解压

    yum install -y unzip zip    yum安装zip -r mydata.zip mydata    mydata目录压缩为mydata.zipunzip mydata.zip - ...

  6. [转]3个著名加密算法(MD5、RSA、DES)的解析

    MD5的全称是Message-Digest Algorithm 5,在90年代初由MIT的计算机科学实验室和RSA Data Security Inc发明,经MD2.MD3和MD4发展而来.     ...

  7. 利用Object.defineProperty实现Vue数据双向绑定

    body部分很简单,一个输入框和一个展示的div <div> <p>你好,<input id='nickName'></p> <div id=&q ...

  8. 数据可视化——matplotlib(2)

    导入相关模块 import matplotlib.pyplot as plt import numpy as np import pandas as pd 图表设置 添加X.Y轴标签以及图标标题 a ...

  9. springboot项目属性配置及注意事项

    在idea编辑器建的springboot项目中的resources包下的application.properties这个就是配置文件. 另外配置文件的文件名还可以是application.yml,在r ...

  10. flutter自定义View(CustomPainter) 之 canvas的方法总结

    画布canvas 画布是一个矩形区域,我们可以控制其每一像素来绘制我们想要的内容 canvas 拥有多种绘制点.线.路径.矩形.圆形.以及添加图像的方法,结合这些方法我们可以绘制出千变万化的画面. 虽 ...