第一步:保证安装了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呢。
参考:http://blog.csdn.net/ss1106404013/article/details/49582741
第五步:文件压缩
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 发现删除的压缩文件又出现了,成功!!