h5学习笔记:使用fis的前端构建工具记录
来源:互联网 发布:300036超图软件 股吧 编辑:程序博客网 时间:2024/06/03 14:55
这几天练习一下webpack ,glup的工具使用,发现webpack 配置起来并不是太顺利,总是有一种抗拒的,但从vuejs 和react 需要这种配套的方案去解决打包和发布版本问题。这也是需要挖一下坑,把这块骨头啃下来。
无意中找到了fis百度的前端构建工具。查看了一下文档,练习一下,发现可以满足当前开发一个公众号的小小功能。这样子发布版本就可以解决缓存的问题。
查看了一下这个工具,有一个地方做得比较好一点,资源定位。fis采取的方案是采取了绝地定位方案,但它还有一个比较强大一点功能。资源位置可以随意修改和调整,这一点比较有意思,配套还有一些发布版本的功能,压缩等等。但由于项目不大,采用这个功能也可以满足到一些开发。下面记录一下使用过程。
第一步:安装
使用之前 先到官方网站下载对应的版本fis3.虽然看似这个项目已经无维护迹象。但当前版本已经满足到开发使用了。
npm 进行全局安装。(前提是安装好nodejs的环境)
npm install -g fis3
第二步:使用官方的demo
由于官方demo目录结构有点松散,于是,修改了一下他的目录结构。
添加css、js、images等常规目录。
第三步:添加fis-conf.js
在开发目录,添加一个对应的文件fis-conf.js
,这个配置文件添加上目录。fis脚本会对这个配置文件进行解析工作。
由于满足自身的项目目录,所以在发布版本的时候,将所有的资源放置在static下。发布会的目录会根据脚本调整。
fis.match('*.{js,css,png,jpg,gif}', { useHash: true,});//所有的css文件fis.match('**.css', { release : '/static$0', url: '/fis3/static$0' });fis.match('/js/(*.js)',{ release : '/static$0', url: '/fis3/static$0' });//所有image目录下的.png,.gif,jpg文件fis.match('/images/(*.{png,gif,jpg})', { release : '/static$0', url: '/fis3/static$0' });//测试目录 fis.media('qa').match('*', { deploy: fis.plugin('http-push', { receiver: 'http://127.0.0.1/receiver.php', to: 'E:/weixin/php2/htdocs/fis3' // 注意这个是指的是测试机器的路径,而非本地机器 })});fis.match('*', { deploy: fis.plugin('local-deliver', { to: 'E:/weixin/php2/htdocs/fis3' })})
在使用过程遇到一个小坑,to的位置,当初的时候,遇到一个疑惑,文档是采用linux 的路径描述,没有添加window系统,尝试一下猜测。将发布的目录路径指定到本地的机器xampp的服务器的htdocs\fis3的目录下,fis3是自定义的目录。
'E:/weixin/php2/htdocs/fis3'
这里还遇到一个小问题,就是资源重定位。release 发布的是相对的目录,需要添加url路径后,资源访问才能正常。fis提供了这个配置机制。 添加url的目录。
release : '/static$0', url: '/fis3/static$0' //服务器资源的位置
例如,本地的window目录是E:/weixin/php2/htdocs/fis3,如果迁移了其他目录后,也可以重新调整脚本进行发布。
第四步:使用qa 和发布功能
fis 提供了一个php脚本代码可以将测试代码发布测试目录。这里有安全性问题,所以那个脚本猜测可以用于局域网使用和正式服务器。由于他的机制是采用http发送请求将资源迁移到对应的目录。(提供的版本有php 和nodejs版本)
需要将脚本放置在服务器根目录下。
<?php// !!!! 注意 !!!!// 此代码存在很大的安全隐患,请不要部署到线上服务。// 百度内部请使用:http://agroup.baidu.com/fis/md/article/196978@error_reporting(E_ALL & ~E_NOTICE & ~E_WARNING);function mkdirs($path, $mod = 0777) { if (is_dir($path)) { return chmod($path, $mod); } else { $old = umask(0); if(mkdir($path, $mod, true) && is_dir($path)){ umask($old); return true; } else { umask($old); } } return false;}if($_POST['to']){ $to = urldecode($_POST['to']); if(is_dir($to) || $_FILES["file"]["error"] > 0){ header("Status: 500 Internal Server Error"); } else { if(file_exists($to)){ unlink($to); } else { $dir = dirname($to); if(!file_exists($dir)){ mkdirs($dir); } } echo move_uploaded_file($_FILES["file"]["tmp_name"], $to) ? 0 : 1; }} else { echo 'I\'m ready for that, you know.';}
使用
fis3 release qa //发布到qa 测试目录
fis3 release // 发布到本地服务器目录
完成后,资源在发布后就能被访问到了。打开谷歌浏览器开发模式F12,可以看到资源的目录已经被修改名字了。
小结
由于代码和配置针对个人项目,所以这样发布,文件的缓存问题应该可以解决到。
fis 还有很多功能还没体验到,像压缩那些,目前来讲,可以满足到自身当前的项目开发,这一点足够了。
相对webpack 这种单页开发,webpack使用复杂度会较高一点。js的开发,确实是需要配套这些工作环境才能开发,这也是js开发难处。东西和框架有点多容易被动接受。
随着js发布各种版本和工具诞生,前端学习还是一个大坑,相比后端而言,稳定性前端变化让人跟得太累了。
- h5学习笔记:使用fis的前端构建工具记录
- 扒一扒前端构建工具FIS的内幕
- 前端自动构建工具 -- fis
- 前端开发入门:前端构建工具百度FIS
- 前端开发工具---FIS使用总结
- 前端开发工具---FIS使用总结
- 前端构建工具之Gulp使用记录
- webpack 全程学习记录! (前端自动化构建工具)
- 前端构建工具--Gulp的使用
- 前端构建工具gulp的使用基础
- 前端工具学习记录
- 使用来自百度的FIS 打包项目初探笔记
- 百度团队前端自动化工程工具fis-parser-node-sass插件安装失败的解决方案
- 前端构建工具gulp使用
- 前端构建工具gulp使用
- 前端构建工具Gulp使用
- 【前端工具】fis-plus【01】前端开发环境配置
- 前端构建工具的用处
- 计算机视觉这一年:这是最全的一份CV技术报告
- Spring自定义@Qualifier注解
- 大数据 架构师 springboot python 视频资源
- Andriod mvvm框架遇到的引用文件问题
- Java线程面试题(04) Java中进程与线程的真实区别
- h5学习笔记:使用fis的前端构建工具记录
- RAM开发常用开发工具及流程(借鉴)
- FIFOQueue '_4_batch_processing/batch_join/fifo_queue' is closed and has insu
- 【版本管理】Git使用
- idea破解办法
- 范数的直觉性理解
- 最长递增子序列
- Python常用内建模块(datetime)
- 【MySQL】char和varchar的不同