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. JSON在PHP中的基本应用

    从5.2版本开始,PHP原生提供json_encode()和json_decode()函数,前者用于编码,后者用于解码. 一.json_encode() 该函数主要用来将数组和对象,转换为json格式 ...

  2. 关于Vue的一些小技巧

    前言 用Vue开发一个网页并不难,但是也经常会遇到一些问题,其实大部分的问题都在文档中有所提及,再不然我们通过谷歌也能成功搜索到问题的答案,为了帮助小伙伴们提前踩坑,在遇到问题的时候,心里大概有个谱知 ...

  3. Redis哨兵模式主从同步不可以绑定127.0.0.1或者0.0.0.0，不然无法进行主从同步

    Redis哨兵模式主从同步不可以绑定127.0.0.1或者0.0.0.0,不然无法进行主从同步,一定要绑定内网IP,而对于跨机房的问题,可以使用iptables进行nat转发来解决.

  4. 全栈project师体能备战--知识面（1--10）

    javascript 单例设计模式:         单例模式确保某个类仅仅有一个势力,并且自行实例化并向整个系统提供这个实例.如:cocos2dx中的导演类.[样例]我有6哥美丽的老婆,他们的老公都 ...

  5. How to read out WhatsApp messages with Tasker and react on their content in real time

    http://technologyworkroom.blogspot.sg/2013/05/tasker-how-to-read-out-whatsapp.html Tasker can read o ...

  6. 如何从Windows远程上传文件到Linux（例如CentOS 7）

    一.先看Linux系统是否安装有vsftp软件(vs是very secure的意思) [root@localhost /]# rpm -qa | grep vsftpdvsftpd-3.0.2-9.e ...

  7. debuginfo-install glibc-2.17-157.el7.x86_64

    Running transaction Installing : glibc-debuginfo-common-.el7.x86_64 / Installing : glibc-debuginfo-. ...

  8. java.lang.ClassNotFoundException: org.springframework.web.util.IntrospectorCleanupListener

    一:如果出现下面的错误信息,如果你的项目是Maven结构的,那么一般都是你的项目的Maven Dependencies没有添加到项目的编译路径下: 信息: The APR based Apache T ...

  9. redis.clients.jedis.exceptions.JedisDataException: WRONGTYPE Operation against a key holding the wrong kind of value

    错误原因: 因为redis中已经存在了相同的key, 而且key对应的值类型并不是Set,而是SortSet(改动前):再调用smembers时,抛出此错误. 解决方法: 将原来的的key给Del掉, ...

  10. Visual Studio Code 构建C/C++开发环境

    转自: https://blog.csdn.net/lidong_12664196/article/details/68928136#visual-sutdio-code%E4%BB%A5%E5%8F ...