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()方法 此方法取得一 ...