skyADMIN

基于nodejs的基础前端开发环境搭建

该教程针对win,因为Linux下很简单,用Linux的人一般很牛逼。

首先,一个现代化的前端开发环境应该包括yeoman+grunt(或gulp)+bower。如果过时了请轻拍。

这三者都是在nodejs下的,所以要先安装nodejs。win下安装可以去官网,不过我推荐用chocolatey安装。关于chocolatey。输入cinst nodejs即可。

M%[{G]KE@[1X3TM8273$2ZH

然后再安装yeoman。它官网在这:http://yeoman.io/

yeoman是属于nodejs的,所以要用npm(nodejs的包管理器)来安装,用 管理员身份 运行一个cmd,输入 npm install -g yo,然后静静等待……

等待……等待……发现一直不好……嗯,壮哉我天朝大防火墙……所以我们需要……给npm换一个来源,简称,换源。换国内淘宝提供的一个npm源。

ctrl+c 结束掉当前的批处理任务,然后输入:npm config set registry https://registry.npm.taobao.org  。再来npm install -g yo

这回就很快就好了,是否卡住你可以看它输出的信息是否有变化,再大的任务也不可能一直一直是那一条信息吧……

安装完毕后再照样安装grunt-cli和bower,就是替换掉最后的yo。

然后就基本完成了。接着来试一试有什么效果。

EMWDLE6PZ9_E0NTA[~{_2[U

建一个文件夹,然后输入命令yo。先那个黄色的是问是否愿意允许程序自动提交反馈(大概吧,我英语也不好),然后可以看到问我想干嘛,我能想干嘛呀,想生成一个前端项目的工程骨架啊。但是现在好像一个生成器也没有。所以就安装一个呗:npm install -g generator-webapp

这是最基本的webapp生成器,还有更多的生成器可以在它官网上找,我记得我还写过两篇关于yeoman的。用yeoman开发angularjs

然后再yo的时候就有一个webapp的选项了,选那个,嗯……这部分还是看它官网的教程吧。不过现在还有一些问题,里面有些东西用到了python,这台电脑暂时没装,所以再装一个python,去官网下载或者chocolatey都可以。

好吧,果然没有那么简单,还有很多东西需要安装。比如ruby,还有bower可能被天朝大防火墙挡住。需要设定各种代理,可以参考这篇文章:设置 git/npm/bower/gem 镜像或代理的方法

反正剩下遇到的问题会比较杂,自己Google解决吧。实在懒也可以在下面留言问。

最后的效果是用yo提供的生成器生成了项目骨架后,在项目文件夹下输入grunt serve就可以自动完成构建打开网页,然后用文本编辑器或者IDE去编辑文件,保存一次页面自动刷新一次。附个配置成功的截图,Windows真麻烦。

ENGF6R3MPY9WY@I}$JO7M)D

码字很辛苦,转载请注明来自环宇博客《基于nodejs的基础前端开发环境搭建》

评论