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. Using PWM Output as a Digital-to-Analog Converter

    http://www.ti.com/lit/an/spraa88a/spraa88a.pdf http://www.ti.com/litv/zip/spraa88a The high-resoluti ...

  2. Bootstrap 3之美04-自定义CSS、Theme、Package

    本篇主要包括: ■  自定义CSS■  自定义Theme■  自定义Package 自定义CSS 有时候,需要自定义或重写Bootstrap默认的CSS.→在css文件夹下创建一个site.css→假 ...

  3. Gradle在Windows环境与Linux上配置有哪些不同？

    我的开发环境:Windows + Android Studio + Gradle 2.8 all + Jenkins 公司CI 服务器环境: Linux + Gradle 2.10 bin + Jen ...

  4. linux内核数据包转发流程（一）：网络设备驱动

    [版权声明:转载请保留出处:blog.csdn.net/gentleliu.邮箱:shallnew*163.com] 网卡驱动为每一个新的接口在一个全局的网络设备列表里插入一个数据结构.每一个接口由一 ...

  5. 解决sqlite删除数据或者表后，文件大小不变的问题

    原因分析: sqlite采用的是变长纪录存储,当你从Sqlite删除数据后,未使用的磁盘空间被添加到一个内在的"空闲列表"中用于存储你下次插入的数据,用于提高效率,磁盘空间并没有丢 ...

  6. 《Windows核心编程》第2章——字符和字符处理

    ANSI和UNICODE 计算char和wchar_t的长度都一样,都是5,但是二者在内存中的布局实际上是不同的:

  7. Hadoop Hive sql 语法详解

    Hive 是基于Hadoop 构建的一套数据仓库分析系统,它提供了丰富的SQL查询方式来分析存储在Hadoop 分布式文件系统中的数据,可以将结构化的数据文件映射为一张数据库表,并提供完整的SQL查询 ...

  8. 实现Hadoop的Writable接口Implementing Writable interface of Hadoop

    As we saw in the previous posts, Hadoop makes an heavy use of network transmissions for executing it ...

  9. @JVM垃圾回收调优方法

    JVM调优工具 Jconsole,jProfile,VisualVM Jconsole:jdk自带,功能简单,但是可以在系统有一定负荷的情况下使用.对垃圾回收算法有很详细的跟踪. JProfiler: ...

  10. 3D屏保:魔方2.0版本

    一个三维魔方的屏保软件,可支持2级到72级的魔方.启动后魔方会自动旋转,并最终回到初始状态.有很多人问我这是怎么做到的,用的什么解魔方的算法,其实我自己根本就不会玩魔方,别人用技巧解魔方,我这程序中用 ...