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. Scramble String -- LeetCode

    原题链接: http://oj.leetcode.com/problems/scramble-string/  这道题看起来是比較复杂的,假设用brute force,每次做分割,然后递归求解,是一个 ...

  2. ARM FPGA Extended Memory Interface

    Connect a ARM Microcontroller to a FPGA using its Extended Memory Interface (EMI) http://elinux.org/ ...

  3. Docker 1.3 公布

    Docker 1.3 公布 Docker 1.3 已经正式公布.新的特性包含镜像签名.进程注入.新的创建和执行容器命令.安全选项和 Mac OS 上进行文件夹共享.特别是针对安全方面的改进,成为本地公 ...

  4. perf 移植

    perf 移植 perf工具用于系统性能的调优,程序优化.源码在kenel/tools/perf目录. 我在imx6平台上进行移植.将自己的移植过程记录如下. 参考链接 http://blog.csd ...

  5. 25LINQ拾遗及实例

      投影 □ 遍历数组索引,Select获取 int[] indexes = {0, 2}; string[] strs = {"a", "b", " ...

  6. MySql 数据库导入"Unknown command '\n'."错误解决办法

    原文地址:http://www.cnblogs.com/bingxueme/archive/2012/05/15/2501999.html 在CMD 下 输入: Mysql -u root -p -- ...

  7. 无损转换Image为Icon z

    如题,市面上常见的方法是: var handle = bmp.GetHicon(); //得到图标句柄 return Icon.FromHandle(handle); //通过句柄得到图标 此法的问题 ...

  8. 配置使用ldap中碰到的各种问题 --- 吐血

    1.   LDAP Result Code 50 "Insufficient Access Rights" : 权限的问题: 解决: 使用docker部署吧, 看我其他的博客

  9. [Git] 谷歌的代码管理

    copy from : http://www.ruanyifeng.com/blog/2016/07/google-monolithic-source-repository.html https:// ...

  10. 【BZOJ】【2752】【HAOI2012】高速公路(Road)

    数学期望/线段树 然而又是一道road= =上一道是2750…… 下次不要一看期望题就弃疗么…… 期望题≠不可做题……!! 其实在这题中,期望就是(所有情况下 权值之和)/(总方案数) 因为是等概率抽 ...