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. Toast信息框

    Toast组件的功能和对话框有些相似,可是使用上更简单,使用Toast组件的目的仅仅有一个,就是在屏幕上弹出一个消息窗体告知用户某个信息,并且这个窗体没有不论什么button,经过几秒钟后就会消失.假 ...

  2. 开始Admob广告盈利模式详细教程

    例子工程源码下载地址:     下载源代码               当然,我也参考了一些网上的资料,主要有: AdMob:在android应用中嵌入广告的方案        如何在Android ...

  3. AutoMapper： Mapper.Initialize() 只能调用一次，Why？

    最开始的代码 using System; using System.Collections.Generic; using System.Linq; using System.Text; using S ...

  4. Selenium2+python自动化35-获取元素属性

    前言 通常在做断言之前,都要先获取界面上元素的属性,然后与期望结果对比.本篇介绍几种常见的获取元素属性方法. 一.获取页面title 1.有很多小伙伴都不知道title长在哪里,看下图左上角. 2.获 ...

  5. Appium+python自动化6-Remote远程控制

    前言 在第三篇启动app的时候有这样一行代码driver = webdriver.Remote('http://192.168.1.1:4723/wd/hub', desired_caps),很多小伙 ...

  6. docker get 到的命令 (持续更新)

    删除容器:  docker rm containerID (is running) 删除not running的容器:  docker ps -a   然后  docker rm -f contain ...

  7. struts2点滴记录

    1.s:textfield 赋值方法 <s:textfield name="Tname" value="%{#session.Teacher.name}" ...

  8. C#常使用的正则表达式

    /// <summary> /// 是否为手机号码 /// </summary> /// <param name="value"></pa ...

  9. 计算均值mean的MapReduce程序Computing mean with MapReduce

    In this post we'll see how to compute the mean of the max temperatures of every month for the city o ...

  10. 在 Sublime Text 2 下开启 Vim 模式

    緣由 由於在 Sublime Text 2 下操作時會想起 Vim 下的鍵盤操作.一時興起在網絡上找了下,發現 Sublime Text 2 是支持類似 Vim 的鍵盤操作的.在此分享下配置過程. 打 ...