您的位置:首页 > 运维架构 > 网站架构

KISSY整体架构流程

2015-11-02 13:40 267 查看
第一步:保证安装了nodejs环境,如何安装这个环境,网上百度一大把,就不多说了。

第二步:安装前端工作流程手脚架(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 发现删除的压缩文件又出现了,成功!!
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: