1、安装

npm install -g fis3

//插件
npm install -g fis3-hook-relative
npm install -g fis3-preprocessor-autoprefixer

2、fis-conf.js配置文件(可根据需要配置)

常用插件地址:http://fis.baidu.com/fis3/docs/common-plugin.html

// 启用 fis-spriter-csssprites 插件
fis.match('::package', {
spriter: fis.plugin('csssprites')
})
//雪碧图和压缩
fis.match('*.css', {
useSprite: true
// optimizer: fis.plugin('clean-css')
});
// fis-optimizer-uglify-js 插件进行压缩,已内置
fis.match('*.js', {
// optimizer: fis.plugin('uglify-js')
});
// fis-optimizer-png-compressor 插件进行压缩,已内置
fis.match('*.png', {
optimizer: fis.plugin('png-compressor')
}); //补全前缀
fis.match('*.css', {
preprocessor: fis.plugin('autoprefixer', {
"browsers": ["Android >= 4.1", "iOS >= 7.0", "ie >= 8"],
"cascade": true
})
})
//启用插件
fis.hook('relative');
//让所有文件,都使用相对路径。
fis.match('**', {
relative: true
});

3、示例文件

<!DOCTYPE html>
<html> <head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title>移动端网站</title>
<script src="js/mui.min.js"></script>
<link href="css/mui.min.css" rel="stylesheet" />
<script type="text/javascript" charset="utf-8">
mui.init();
</script>
<style type="text/css"> </style>
</head> <body>
<link rel="import" href="common/header.html?__inline">
<div class="">
主页
</div> <!--jquery-->
<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<!--移动端适配-->
<script src="js/flexible.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
//业务逻辑
$(document).ready(function() { });
</script>
</body> </html>

注意:共用文件引入的方式:

<link rel="import" href="common/header.html?__inline">

4、构建
fis3 release -d ./dist

5、构建输出

 

FIS3 构建 工程化的更多相关文章

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

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

  2. Fis3构建迁移Webpack之路

    Webpack从2015年9月第一个版本横空初始至今已逾2载.它的出现,颠覆了一大批主流构建如Ant.Grunt和Gulp等等.腾讯NOW直播IVWEB团队之前一直采用Fis构建,本篇文章主要介绍从F ...

  3. 使用百度fis3构建前端多页应用

    吾日三省吾身. 从一个完全不相干的行业转到IT,多多少少都会感到迷茫,不知道学习什么.从何学起?在几乎没有任何经验的背景下,坚持投递简历,最后终于进入了一个创业公司,开始做起了前端工作.工资勉强维持生 ...

  4. Fis3前端工程化之项目实战

    Fis3项目 项目目录结构: E:. │ .gitignore │ fis-conf.js │ index.html │ package.json │ README.md │ ├─material │ ...

  5. yarn依赖管理工具,和fis3构建工具 gulp详细用法

    看视频所了解到的,正在进行摸索. 参考:https://www.cnblogs.com/2050/p/4198792.html这篇介绍gulp的文章非常棒,唯一有一点,页面随时刷新的目前还没实现,不知 ...

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

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

  7. FIS3的简单使用

    序言: 最近在收集前端的优化工具,随便一搜,厉害了word哥,有grunt.gulp.FIS3.webpack等等,简直就是眼花缭乱!前辈们对于他们的评价各有千秋,于是乎就想每个都来用一遍(之前已经倒 ...

  8. FIS3 大白话【一】

    1.fis3可以用fis.set进行一些全局的配置,包括忽略文件.文件后缀处理类型.源码过滤等等,用fis3.get可以得到配置信息,详见: http://fis.baidu.com/fis3/doc ...

  9. http缓存详解,http缓存推荐方案

    前言 通过本文,你将了解到http缓存机制是怎样的,no-cache到底有没有缓存,地址栏回车,F5,ctrl+F5的区别,以及当下较为推荐的缓存方案等. 自从和前端组的同事一起整了个前端扫盲计划,想 ...

随机推荐

  1. HTML5学习笔记1

    1.HTML5概述 继html4和xhtml1.0后的超文本标记语言最新版本.最重要的三项技术:html5核心规范(标签元素),CSS3,JavaScript2008年发布,主要为了补全功能.特点:1 ...

  2. 通过内存盘提高MSMQ的消息吞吐能力

    转载:http://www.ikende.com/blog/00f2634be4704b79a3e22439edeb1343 由于MSMQ的消息交互都需要对磁盘进行读写操作,所以提高MSMQ的消息吞吐 ...

  3. 分布式中使用redis进行session共享

    摘要 在asp.net web中,session经常用来存储当前用户信息,或者通过session进行登录权限的验证.如果是一台服务器,session的使用没问题,如果使用nginx等实现反向代理,将站 ...

  4. matlab快捷键大全

    原文地址,点此查看 一.常用对象操作 除了一般windows窗口的常用功能键外. 1.!dir 可以查看当前工作目录的文件. !dir& 可以在dos状态下查看. 2.who   可以查看当前 ...

  5. 转: LDAP有啥子用? 用户认证

    认证的烦恼 小明的公司有很多IT系统, 比如邮箱.SVN.Jenkins , JIRA,VPN, WIFI...... 等等 . 新人入职时需要在每个系统中申请一遍账号,每个系统对用户名和密码的要求还 ...

  6. coursera课程Text Retrieval and Search Engines之Week 2 Overview

    Week 2 OverviewHelp Center Week 2 On this page: Instructional Activities Time Goals and Objectives K ...

  7. 数学图形(1.2)Sin曲线

    相关软件参见:数学图形可视化工具,使用自己定义语法的脚本代码生成数学图形.该软件免费开源.QQ交流群: 367752815 Sin曲线 vertices = x = *PI) to (*PI) y = ...

  8. 【Gson】简介 文档 基本使用 示例

    简介 new TypeToken<List<Person>>() {}.getType() 1 1   1 new TypeToken<List<Person> ...

  9. SoundPool 音频播放 API 详解【示例】

    demo地址:https://github.com/baiqiantao/PermissionTest.git 一个大坑:SoundPool最多只能播放时长10s左右.大小70kb左右(这些值是我多次 ...

  10. Jquery中parent()和parents()

    一.parent()方法 此方法取得匹配元素集合中每个元素的紧邻父元素,也就是第一级父元素,而不是所有的祖先元素.所取得的父元素集合也可以使用表达式进行筛选. 二.parents()方法 此方法取得一 ...