您的位置:首页 > Web前端

WEB前端开发工具的初识

2015-12-24 23:15 423 查看
准备学习BootStrap,然后发现好多插件啊……

从一个开源项目开始学习吧。

required node.js & bower & grunt

$ git clone https://github.com/onokumus/Bootstrap-Admin-Template.git yourfoldername
$ cd yourfoldername
$ npm install
$ bower install
$ npm run buildrtl
$ grunt serve


一、node.js

大名鼎鼎的node.js,在这个项目里只被用做打包工具。

去官网下载适合自己开发环境的软件版本,很细致啊,对arm这种架构都做了专门的支持和优化。

个人下载了node-v4.2.4-linux-x64.xz版本,解压后,和tomcat的目录感觉使用是一样的,运行脚本在bin目录下。

做了一个全局命令软链接:

sudo ln -sf /home/yourname/softwarepath/node-v4.2.4/bin/npm /usr/local/bin/


二、bower

这是一个类似Java开发中的gradle一样的js插件安装工具,解决了版本间依赖和版本问题。

npm install bower

安装完以后,默认路径是{your true path}/node-v4.2.4/lib/node_modules/下。

按照官网上的说法npm install -g bower就能进行全局安装,命令可以自由调用。

然而我这样做却没有任何效果,应该是权限的原因,没关系,咱可以做全局软链接啊。

三、grunt

这是一个用来给项目中所有的js和css这些文件压缩的工具(功能肯定不限于此)。

npm install grunt

这个可花了我一些时间,因为在其安装包里找不到bin目录?!

去官网看了半天,npm install grunt-cli解决问题。

四、另一个花费不少精力解决的问题

执行bower install,在googlecode上的jquery-inputlimiter.1.3.1.zip无法下载,最直接的想法是FQ,结果徒劳……

绕路的解决方法:

1.先去国内网站或者能访问的国外网站上下载需要的软件包。

2.找到bower.json中devDependencies项目的下载安装路径。此项目路径是{project}/src/assets/lib/。

3.将下载的软件包手动的解压到步骤2的目录下。

4.删除bower.json中改软件的依赖(其实是有风险的,就是手动安装的软件包可能涉及其他的软件包,但是原理是一样的)。

5.再次执行bower install,通过。

最后,执行grunt serve,竟然能直接访问该项目(非本地文件访问),就是说grunt能够当web服务器用,应该是node.js的功劳吧,我猜。
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: