利用fis3构建前端项目工程
FIS3是国内百度公司产出的一款前端工程构建工具,FIS3可以解决前端工程中性能优化、资源加载(异步、同步、按需、预加载、依赖管理、合并、内嵌)、模块化开发、自动化工具、开发规范、代码部署等问题,首先来简单的实现资源合并压缩提高性能等问题。
安装fix3
npm install -g fis3
创建项目目录
cd 进入此目录中初始化,执行
fis3 init
对需要的插件进行安装 ,比如安装scss编译插件:
npm install -g --save-dev fis-parser-node-sass
注意:如果 fis-parser-node-sass 安装失败,请卸载nodejs,安装低版本即可
让 fis3 产出能够支持相对路径。
npm install -g fis3-hook-relative
常用fis3插件 http://fis.baidu.com/fis3/docs/common-plugin.html
配置文件
打开fis-conf.js 做相应的配置
// 保持发布使用相对路径
fis.hook('relative');
fis.set('domain_test', '');
// 预发布环境
fis.set('domain_pre', 'http://test.zuobaiquan.com');
// 线上环境
fis.set('domain_build', 'http://zuobaiquan.com');
// 定义版本号
fis.set('version', '1.0.0'); fis.set('project.files', [
"tpl/**/*.html"
]); fis.set('project.files', [
'*.css',
'js/**',
'images/**',
'*.html'
]); fis.match("*", {
relative: true
}) //添加时间戳,解决缓存。
.match('*.{js,css,png}', {
useHash: true
})
.match('::package', {
spriter: fis.plugin('csssprites', {
htmlUseSprite: true,
styleReg: /(<style(?:(?=\s)[\s\S]*?["'\s\w\/\-]>|>))([\s\S]*?)(<\/style\s*>|$)/ig,
margin: 5
})
})
.match('/css/*.scss', {
rExt: '.css',
parser: fis.plugin('node-sass', {
// options...
})
})
.match('css/*.{css,scss}', {
preprocessor: fis.plugin('autoprefixer', {
"browsers": ["Android >= 2.1", "iOS >= 4", "ie >= 8", "firefox >= 15"],
"cascade": true
})
})
.match('/css/*.{scss,css}', {
useSprite: true,
optimizer: fis.plugin('clean-css')
})
.match('/js/*.js', {
parser: fis.plugin('babel-5.x'),
// fis-optimizer-uglify-js 插件进行压缩,已内置
optimizer: fis.plugin('uglify-js')
})
.match('images/*.png', {
optimizer: fis.plugin('png-compressor', {
type: 'pngquant'
})
})
.match('/css/(*.{png,gif})', {
release: '/images/sprite/$1$2'
}); // fis.media('production').match('/js/*.js', {
// parser: fis.plugin('jdists', {
// remove: "debug"
// })
// }) fis.media('test')
.match("*", {
domain: "${domain_test}",
}); fis.media('pre')
.match("*", {
domain: "${domain_pre}",
}); fis.media('build')
.match('*', {
domain: "${domain_build}"
})
如果打包build 不需要某些文件夹,可配置:
fis.match('/tpl/*', {
// 设置 release 为 false,不再产出此文件
release: false
})
开发阶段命令: fis3 server stop && fis3 server clean && fis3 server start -p && fis3 release test --verbose -wLc
预发布: fis3 release pre --verbose -cd ./pre
发布阶段:fis3 release build --verbose -cd ./dist
fis3 server stop //终止服务
fis3 server clean //清除服务目录下的文件
fis3 server start -p 1111 //启动服务,端口号是1111 (不加-p 1111的话默认端口号是8080)
fis3 release test –verbose -wLc //调试模式 不会关闭cmd
项目目录结构
建议安装 fis-parser-babel-5.x 插件,这样就支持 es6、es7 或者 jsx 编译成 es5 啦,是不是很溜!
npm install -g --save-dev fis-parser-babel-.x
fis-conf.js配置:
fis.match('*.js', {
parser: fis.plugin('babel-5.x')
})
源码地址:https://github.com/zuobaiquan/framework/tree/master/基于fis3前端工具构建的静态页面框架
利用fis3构建前端项目工程的更多相关文章
- 如何使用Docker构建前端项目
原文链接 Docker单独部署前端项目和Node项目是非常便捷的,在这里分享一下Docker的使用,主要聊聊它的部署实践.(我是window10专业版安装Docker) Docker Docker是一 ...
- vue 构建前端项目并关联github
这几天尝试用node开发一个网站,后端的接口已经初步开发完成,现在开始构建前端的项目,记录下过程,在学习下吧. 用vue-cli 构建项目,myproject.(构架过程略过) 每次在本地构建项目后和 ...
- Webpack构建前端项目
前言 公司据说要搞前后端分离,趁这两天项目完成的差不多,抓紧时间学习一下前端知识 现在流行前端项目工程化,那么第一个问题就是如何创建工程(项目),第一次玩webpack 通过 NPM 创建项目 # 创 ...
- jenkins自动构建前端项目(window,vue)
我们把一个多人协作的vue前端项目发布服务器,一般要经过以下步骤: git更新最新的代码 构建项目 把构建后的代码上传到服务器 如果用jenkins来构建的话,只需要点击一次构建按钮,就可以自动完成以 ...
- 如何利用gulp构建前端自动化
1,使用 gulp.watch 来监听文件自动打包 在上篇文章中,介绍了如何利用webpack来为项目做打包编译等工作,其中介绍到在我们开发的时候,经常改动js,因为我们文件是引用编译后的js文件,若 ...
- 简单的利用nginx部署前端项目
网上有很多教程写的一大堆东西,新手可能会有点看不懂,现在我写这篇文章是为了更好的帮助新手,如何将自己的前端项目部署到自己的服务器上. 首先我们必须要有一台自己的ubuntu服务器,如果没有可以去阿里云 ...
- 用gulp替代fekit构建前端项目
https://segmentfault.com/a/1190000003060016 离开qunar有一个多月了,在离开的时候就决定不再用fekit.做出这个决定并不是因为fekit不好,恰恰相反, ...
- 【gulp】gulp + browsersync 构建前端项目自动化工作流
什么是 gulp? gulp.js 是一个自动化构建工具,开发者可以使用它在项目开发过程中自动执行常见任务.gulp.js 是基于 node.js 构建的,利用 node.js 流的威力,你可以快速构 ...
- SpringMVC拓展——利用maven构建springMVC项目
一.构建项目结构 首先需要构建一个符合目录结构的maven项目 file->new->maven project,勾选 create a simple project->next / ...
随机推荐
- php怎么做网站?如何用PHP开发一个完整的网站?
1.PHPer应具备的知识 (1)PHP知识: 熟练掌握基础函数,PHP语句(条件.循环),数组(排序.读取),函数(内部 构造),运算(数学 逻辑),面向对象(继承 接口 封装 多态静态属性)等. ...
- <5>Python的uwsgi web服务器
一.是什么? uWSGI是web服务器,用来部署线上web应用到生产环境.uWSGI实现了WSGI协议.uwsgi协议.http协议.WSGI(Web Server Gateway Interface ...
- 安卓开发:UI组件-布局管理器和文本显示
接下来的随笔,记录了在学习b站up主:天哥在奔跑,录制的教学视频的同时,进行一个app开发. up主:天哥在奔跑 视频地址:https://www.bilibili.com/video/av38409 ...
- java线程介绍
文章讲解要点 1.线程创建几种方式2.线程常见设置方法,包括优先级.优先级休眠.停止等3.多线程间的数据交互与锁机制4.项目源码下载 线程介绍.png 一.线程创建方式 常见的线程创建方法以下三种 ...
- Python HTML解析器BeautifulSoup(爬虫解析器)
BeautifulSoup简介 我们知道,Python拥有出色的内置HTML解析器模块——HTMLParser,然而还有一个功能更为强大的HTML或XML解析工具——BeautifulSoup(美味的 ...
- SQL Server捕获发生The query processor ran out of internal resources and could not produce a query plan...错误的SQL语句
最近收到一SQL Server数据库服务器的告警邮件,告警内容具体如下所示: DATE/TIME: 10/23/2018 4:30:26 PM DESCRIPTION: The query proc ...
- Kafka相关内容总结(存储和性能)
Kafka消息的存储 Kafka的设计基于一种非常简单的指导思想:不是要在内存中保存尽可能多的数据,在需要时将这些数据刷新(flush)到文件系统,而是要做完全相反的事情.所有数据都要立即写入文件系统 ...
- Redis(十一):Redis的事务功能详解
相关命令 1. MULTI 用于标记事务块的开始.Redis会将后续的命令逐个放入队列中,然后才能使用EXEC命令原子化地执行这个命令序列. 这个命令的运行格式如下所示: MULTI 这个命令的返回值 ...
- User Agent 大全
一.基础知识篇: Http Header之User-Agent User Agent中文名为用户代理,是Http协议中的一部分,属于头域的组成部分,User Agent也简称UA.它是一个特殊字符串头 ...
- 局部敏感哈希(LSH)之simhash和minhash
minhash 1. 把文档A分词形成分词向量L 2. 使用K个hash函数,然后每个hash将L里面的分词分别进行hash,然后得到K个被hash过的集合 3. 分别得到K个集合中的最小hash,然 ...