说到打包工具,大家都会想到webpack,我之前也接触过webpack,说实话个人觉得webpack上手容易,但是对于新手来说里面有太多坑,配置文件也不简单。于是乎,我转入了fis3阵营,发现fis3对于新手来说再合适不过了,fis3只用记住几条命令就可以解决日常需求。下面开始讲解:

1.fis3 release [-d 发布路径]

发布代码到fis3本地浏览器,括号中代表发布到哪个文件目录下,不带参数,默认发布到本地浏览器(可以使用第5条命令查看本地服务器路径,会自动打开文件夹)

2.fis3 server start [-p 端口号]

开启本地服务器,括号中代表设置端口号,如果发现端口号被占用。

3.fis3 server clean

清除fis3本地服务器代码

4.fis3 release -wL

热调试,可以实时预览代码改变后的效果,简单实用

5.fis3 server open

自动打开本地服务器目录

更多命令,详情参考(fis3官方文档) http://fis.baidu.com/fis3/docs/beginning/intro.html

下面是我常用的配置,他可以编译es6,7语法为es5,编译预处理语言sass,less为css文件,自动添加css后缀(再也不用手动添加后缀了)压缩合并js,css代码,压缩png,自动将小图片icon转换为base64字符,自动为文件加上hash或者MD5,自动生成csssprite(精灵图或者叫做雪碧图),自动将相对路径转化为绝对路径,实时预览,一键部署发布等功能。(仅仅只有40行,实现了这么多功能,是不是觉得比webpack简单多了?还不赶紧用起来

// 加 md5
fis.match('*.{png,jpg,gif,js,less,css}', {
useHash: true
}); // 启用 fis-spriter-csssprites 插件
fis.match('::package', {
spriter: fis.plugin('csssprites')
}); // 对 CSS 进行图片合并
fis.match('*.css', {
// 给匹配到的文件分配属性 `useSprite`
useSprite: true
}); //支持 es6、es7 或者 jsx 编译成 es5
fis.set('project.fileType.text', 'js');
fis.match('*.js', {
parser: fis.plugin('babel-6.x'),
rExt: '.js',
optimizer: fis.plugin('uglify-js')
}); fis.match('*.less', {
// fis-parser-less 插件进行解析
parser: fis.plugin('less'),
// .less 文件后缀构建后被改成 .css 文件
preprocessor : fis.plugin("autoprefixer",{
"browsers": ["last 10 versions"]
}),
rExt: '.css',
optimizer: fis.plugin('clean-css')
}); fis.match('*.png', {
// fis-optimizer-png-compressor 插件进行压缩,已内置
optimizer: fis.plugin('png-compressor')
});

前端打包工具之fis3的初级使用的更多相关文章

  1. 前端打包工具——build release介绍

    前言 对于前端开发者来说,资源打包是日常过程中一个必不可少的过程:目前我们大多数时候使用grunt.gulp.webpack这三个工具来完成这个工作:但是有一个特点就是我们没创建一个项目都要对应的去编 ...

  2. 项目前端打包工具从 NEJ 切换成 webpack

    此文已由作者张磊授权网易云社区发布. 欢迎访问网易云社区,了解更多网易技术产品运营经验. 这里不讨论 NEJ 和 webpack 的优劣,仅从技术角度来探寻一下能否实现,以及实现的代价. 前言 上一篇 ...

  3. grunt,gulp,webpack前端打包工具的特性

    1.http://www.cnblogs.com/lovesong/p/6413546.html (gulp与webpack的区别) 2.http://blog.csdn.net/qq_3231263 ...

  4. Webpack前端打包工具

    一.安装 安装Webpack之前需要安装nodejs,然后用npm安装: $ npm install webpack -g &nsbp;运行以上命令就将Webpack安装到了全局环境中.  但 ...

  5. js模块化方案以及前端打包工具

    图片来自知乎

  6. 前端构建工具-fis3使用入门

    FIS3 是面向前端的工程构建工具.解决前端工程中性能优化.资源加载(异步.同步.按需.预加载.依赖管理.合并.内嵌).模块化开发.自动化工具.开发规范.代码部署等问题. 官网地址是: https:/ ...

  7. 简单理解 Webpack,以及Web前端使用打包工具的原因

    Java 中的模块 传统的前端开发就是 JS.HTML.CSS 三件套.Web 没有像 Java 一样拥有优秀的模块机制,就是类与类之间可以分装在不同的包下,不同包下的类互相引用时通过import导入 ...

  8. 细说前端自动化打包工具--webpack

    背景 记得2004年的时候,互联网开发就是做网页,那时也没有前端和后端的区分,有时一个网站就是一些纯静态的html,通过链接组织在一起.用过Dreamweaver的都知道,做网页就像用word编辑文档 ...

  9. Webpack:前端资源模块化管理和打包工具

    一.介绍: Webpack 是当下最热门的前端资源模块化管理和打包工具.它可以将许多松散的模块按照依赖和规则打包成符合生 产环境部署的前端资源.还可以将按需加载的模块进行代码分隔,等到实际需要的时候再 ...

随机推荐

  1. 安装linux系统后调优及安全设置

    环境说明: [root@server1 ~]# cat /etc/redhat-release CentOS release 6.9 (Final) [root@server1 ~]# uname - ...

  2. MyBatis.4关联

    关联.多对一关联查询 package org.mybatis.example.dao; import java.util.Date; //雇员类 public class Emp { private ...

  3. 解题:USACO13NOV No Change

    题面 在朴素中透着一点新意的状压DP 一个很暴力的思路是枚举位置,状态和硬币,每次二分出向前最多能买到哪里,复杂度爆炸($O(2^knklog$ $n)$) 考虑优化,不妨先预处理一下$goal[i] ...

  4. Non-Local Image Dehazing 复现

    本文选自CVPR 2016, 文章链接Dana Berman, Tali Treibitz, Shai Avidan. Non-Local Image Dehazing 复现源码见我的Github 无 ...

  5. C++ 文本查询2.0(逻辑查询)

    代码实例实现了继承和友元之间的关系,以及为了隐藏实际继承实现,而实现的接口类,代码偏乱,楼主- -自看的(提醒作用) TextQuery.h // // Created by 徐爱东 on 17/7/ ...

  6. python基础1--列表

    列表 列表是最常用的数据类型之一,通过列表可以对数据实现最方便的存储.修改等操作 1.定义列表 fruits = ['apple','banana','orange'] 2.通过下标访问列表中的元素, ...

  7. WAV MP3 Converter-强大的音频转换软件-特别版

    From:http://www.cnblogs.com/killerlegend/p/3873909.html Author:KillerLegend Date:2014.7.28 WAV MP3 C ...

  8. Linux安装配置SVN服务器

    1. 安装SVN服务器: 检查是否已安装 # rpm -qa subversion 安装SVN服务器 # yum install httpd httpd-devel subversion mod_da ...

  9. Git Cannot rebase: You have unstaged changes.

    Cannot rebase: You have unstaged changes. 那说明你有修改过的文件git stashgit pull --rebase (每次push之前最好这样做一次)git ...

  10. SHA-1(安全哈希算法实现)

    如题,不知道sha-1的自己百度吧. #include <iostream> #include <vector> //定义vector数组 #include <strin ...