KISSY整体架构流程
2015-11-02 13:40
267 查看
第一步:保证安装了nodejs环境,如何安装这个环境,网上百度一大把,就不多说了。
第二步:安装前端工作流程手脚架(generator-bee)和前端构建打包工具(gulp)。
准备工作:打开运行,进入cmd,进入你要放置项目的地方,创建目录
安装:
先安装yeoman和gulp (yeoman是前端工作流程手架);
再安装generator-bee:
如果安装失败,执行
再重新安装generator-bee
如果还失败下载这个:https://github.com/minghe/bee-demo
第三步:用bee生成目录和代码
显示如下提示表示成功了:
目录和文件初始化完成!
1.运行npm install安装工具依赖
2.运行gulp命令打包并开启调试服务器,比如bee-demo工程,http://localhost:5555/bee- demo/1.0.0/index.js,指向src/index.js
3.参考demo/dev_index.html(url加上?ks-debug)进行demo开发
第四步:打开bee-demo\demo\dev_index.html 模板文件
执行发现没成功,只有css加载成功了,那么js呢。
参考:/article/10785480.html
第五步:文件压缩
demo执行成功之后,就要考虑如何压缩js和css了。毕竟安装后带有的压缩文件都不是我们自己写的。
为了测试能压缩成功,我们先将 bee-demo\build 中的压缩文件删除。
cmd 进入项目目录,执行
此时会提醒你
没关系,直接
这样的情况后面会多次出现,是由于没有安装这个包的原因,直接安装就好了。
还有一种就是直接打开package.json,查看依赖项,将对于的依赖一次性安装。
例如:
直到出现这个
D:\bee-demo>gulp
[14:26:06] Using gulpfile D:\bee-demo\gulpfile.js
[14:26:06] Starting ‘kmc’…
[14:26:06] Starting ‘less’…
[14:26:06] Starting ‘mini-css’…
[14:26:06] Starting ‘watch’…
[14:26:06] Finished ‘watch’ after 11 ms
[14:26:07] dependency file deps.js is created.
[14:26:07] combined file index-combo.js is created.
kmc server running at 5555
[14:26:07] Finished ‘mini-css’ after 144 ms
[14:26:07] Finished ‘less’ after 152 ms
[14:26:07] Starting ‘css’…
[14:26:07] Finished ‘css’ after 5.77 μs
[14:26:07] Finished ‘kmc’ after 171 ms
[14:26:07] Starting ‘default’…
[14:26:07] Finished ‘default’ after 5.45 μs
然后进入bee-demo\build 发现删除的压缩文件又出现了,成功!!
第二步:安装前端工作流程手脚架(generator-bee)和前端构建打包工具(gulp)。
准备工作:打开运行,进入cmd,进入你要放置项目的地方,创建目录
mkdir bee-demo //先创建一个目录,名字自取 cd bee-demo //进入创建好的目录
安装:
先安装yeoman和gulp (yeoman是前端工作流程手架);
npm install yo gulp -g //此处的(-g)表示安装在全局我个人喜欢安装在当前,就不加 -g
再安装generator-bee:
npm install generator-bee -g //-g和前面的一样,按个人需要选择
如果安装失败,执行
npm clean
再重新安装generator-bee
如果还失败下载这个:https://github.com/minghe/bee-demo
第三步:用bee生成目录和代码
yo bee
显示如下提示表示成功了:
目录和文件初始化完成!
1.运行npm install安装工具依赖
2.运行gulp命令打包并开启调试服务器,比如bee-demo工程,http://localhost:5555/bee- demo/1.0.0/index.js,指向src/index.js
3.参考demo/dev_index.html(url加上?ks-debug)进行demo开发
第四步:打开bee-demo\demo\dev_index.html 模板文件
执行发现没成功,只有css加载成功了,那么js呢。
参考:/article/10785480.html
第五步:文件压缩
demo执行成功之后,就要考虑如何压缩js和css了。毕竟安装后带有的压缩文件都不是我们自己写的。
为了测试能压缩成功,我们先将 bee-demo\build 中的压缩文件删除。
cmd 进入项目目录,执行
gulp //自动压缩
此时会提醒你
Error: Cannot find module 'gulp-kmc'
没关系,直接
npm install gulp-kmc
这样的情况后面会多次出现,是由于没有安装这个包的原因,直接安装就好了。
还有一种就是直接打开package.json,查看依赖项,将对于的依赖一次性安装。
例如:
npm install gulp gulp-copy
直到出现这个
D:\bee-demo>gulp
[14:26:06] Using gulpfile D:\bee-demo\gulpfile.js
[14:26:06] Starting ‘kmc’…
[14:26:06] Starting ‘less’…
[14:26:06] Starting ‘mini-css’…
[14:26:06] Starting ‘watch’…
[14:26:06] Finished ‘watch’ after 11 ms
[14:26:07] dependency file deps.js is created.
[14:26:07] combined file index-combo.js is created.
kmc server running at 5555
[14:26:07] Finished ‘mini-css’ after 144 ms
[14:26:07] Finished ‘less’ after 152 ms
[14:26:07] Starting ‘css’…
[14:26:07] Finished ‘css’ after 5.77 μs
[14:26:07] Finished ‘kmc’ after 171 ms
[14:26:07] Starting ‘default’…
[14:26:07] Finished ‘default’ after 5.45 μs
然后进入bee-demo\build 发现删除的压缩文件又出现了,成功!!
相关文章推荐
- 大连理工大学文科实验教学中心网站和新闻学研究与方法网站
- 案例|服务化架构系统监控难题解决方案
- alipay支付宝 wap手机网站支付错误提示: 通用参数中少了如service、partner等必填参数
- 案例|服务化架构系统监控难题解决方案
- 电商搜索引擎的架构设计和性能优化
- 快给你的网站添加微信公众号吧!
- 求一个.net mvc 编写的网站和文档说明,谁有发一下嘛
- 理解RESTful架构
- [运营经验] 网站分析:网站为什么只收录首页,内页一直不收录呢!
- Chromium中跨进程文件句柄传递
- 从特性业务场景,到服务性或微服务架构设计,到代码的那条最短路径
- 一个定期翻译国外Android优质的技术、开源库、软件架构设计、测试等文章的开源项目
- 网站安全考虑:1、sql注入 2、跨站脚本攻击
- VS2015发布网站到IIS
- 大型网站技术架构,阅读笔记二. 附录
- 大型网站技术架构,阅读笔记一. 架构概述
- 大型网站核心的架构(6-2)高性能
- 模仿playnext网站hover后抖动的效果
- php实战之使用curl抓取网站数据
- 国外PHP学习网站书籍资料汇总