前端工程化开发之yeoman、bower、grunt

前端框架来说有React、Vue、Angular等,再配以webpack、gulp、Browserify、fis等构建工具去满足日常的开发工作


http://www.cnblogs.com/luozhihao/p/4818782.html (前端模块化开发)

http://www.cnblogs.com/luozhihao/p/4848709.html (前端自动化开发)



一个项目的前端构建的流程,利用工具(yeoman、bower、grunt),

关于这三个工具这里就不做介绍了,

yeoman(脚手架工具):http://yeoman.io/

bower(包管理工具): http://bower.io/

grunt(构建工具): http://www.gruntjs.net/

一、准备工作

(1)首先得安装nodejs,从NodeJs官网下载安装包 http://nodejs.org/ 直接进行安装,相信很快就能完成安装

(2)安装Yo、Grunt、Bower

 

   打开终端输入全局安装命令并执行:npm install -g yo grunt-cli bower

  

 

   安装完成后便可以开始构建项目了。

 

二、项目构建

  (1)在F盘下新建test文件夹,执行命令:md test

  

(2).安装generator

  在命令提示符中输入yo命令

  

  用上下键选择install a generator,我们选择安装webapp generator,输入webapp,选择webapp

  

  接下来我们使用yeoman创建项目

  5.Yeoman使用

  创建一个工作目录,用于存放Yeoman项目。我在D盘下新建AngularJs的webapp工作目录,终端进入,输入yo命令,用上下键选择webapp  

  (6)生成项目目录及文件,执行命令:yo webapp

  

  在这一步的时候会出现自定义安装的选项(bootstrap、Sass、Modernizr),如果项目需要则选上,按“空格”键切换选择模式,按“回车”继续,继续安装后会等待一段时间。

  (3)安装局部bower和npm,执行命令:npm install && bower install

  

  (4)利用bower安装项目其他文件,如jquery等,执行命令:bower install jquery

  

  至此整个项目的目录如下所示:

  

  (5)建立本地测试服务器,执行命令:grunt server

  

  这时候浏览器会自动为我们打开项目首页的页面,记住不要关闭当前cmd窗口,grunt会自动检测本地文件是否被修改,这样我们一旦保存修改了的项目文件,浏览器便可以自动为我们刷新页面,无需我们手动刷新页面了。


转载:前端工程化开发之yeoman、bower、grunt

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值