说到打包工具,大家都会想到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. C 语法中static 和inline联合使用

    最近在学习阶段,翻阅代码.发现有一个用法比较让我奇怪,就上网查了一下 ? 1 static inline void somefunction(void); 这里是举例说明,这行代码是放在.h文件中的. ...

  2. 解题:洛谷2257 YY的GCD

    题面 初见莫比乌斯反演 有一个套路是关于GCD的反演经常设$f(d)=\sum_{gcd(i,j)==d},g(d)=\sum_{d|gcd(i,j)}$,然后推推推 $\sum\limits_{i= ...

  3. 旧题新做:从idy的视角看数据结构

    “今天你不写总结……!!!” 额…… 还是讲我的吧.这些考试都是idy出的题. 20170121:DFS序. ST表.线段树练习 这是第一次考数据结构. Problem 1. setsum 1 sec ...

  4. c语言条件编译和预编译

    转自http://www.cnblogs.com/rusty/archive/2011/03/27/1996806.html 一.C语言由源代码生成的各阶段如下: C源程序->编译预处理-> ...

  5. Web前端之CSS详解20180329

    一.CSS概述 html显示效果有限,所以单独成立了一门语言就做css, css是层叠样式表,用来定义网页的显示想过,可以解决html代码对样式定义的重复, 简单来说就是,css将网页内容和显示样式进 ...

  6. java程序实现鼠标绘图

    import java.awt.*; import javax.swing.*; class Gstudy extends JFrame{ private int x1,y1,x2,y2; priva ...

  7. golang 中 sync包的 WaitGroup

    golang 中的 sync 包有一个很有用的功能,就是 WaitGroup 先说说 WaitGroup 的用途:它能够一直等到所有的 goroutine 执行完成,并且阻塞主线程的执行,直到所有的 ...

  8. [转]windows下安装python MySQLdb及问题解决

    转自 https://blog.csdn.net/ping523/article/details/54135228#commentBox 之前按照网络上搜罗的教程安装了python-mysql(1.2 ...

  9. 20155307 2016-2017-2 《Java程序设计》第5周学习总结

    20155307 2016-2017-2 <Java程序设计>第5周学习总结 教材学习内容总结 这两章主要讲的是如何处理程序中的异常情况,对于错误,java会将其打包成对象,可以用&quo ...

  10. Cloudera Manager Admin控制台启动不起来

    这几天都在搞大数据这一块,由于以前自己在弄hadoop等安装的时候特别的费劲,于是乎找到了广大程序员的福音——cloudera manager,但是第一步安装好了以后无法启动,再三思考+百度发现: 通 ...