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

川长思鸟来 2022-06-17 04:48 235阅读 0赞

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

[http://www.cnblogs.com/luozhihao/p/4818782.html][http_www.cnblogs.com_luozhihao_p_4818782.html] （前端模块化开发）

[http://www.cnblogs.com/luozhihao/p/4848709.html][http_www.cnblogs.com_luozhihao_p_4848709.html] （前端自动化开发）

![775838-20151021140409114-2032649614.png][]

一个项目的前端构建的流程，利用工具（yeoman、bower、grunt），

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

yeoman（脚手架工具）：[http://yeoman.io/][http_yeoman.io]

bower（包管理工具）: [http://bower.io/][http_bower.io]

grunt（构建工具）: [http://www.gruntjs.net/][http_www.gruntjs.net]

一、准备工作

（1）首先得安装nodejs，从NodeJs官网下载安装包 [http://nodejs.org/][http_nodejs.org] 直接进行安装，相信很快就能完成安装

（2）安装Yo、Grunt、Bower

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

![775838-20151021150951177-1456324180.png][]

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

二、项目构建

（1）在F盘下新建test文件夹，执行命令：md test

![775838-20151021151646677-92727016.png][]

（2）.安装generator

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

![241344298879607.jpg][]

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

![241556277931077.jpg][]

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

5.Yeoman使用

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

（6）生成项目目录及文件，执行命令：yo webapp

![775838-20151021152119505-1730557135.png][]

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

（3）安装局部bower和npm，执行命令：npm install && bower install

![775838-20151021160038286-558807888.png][]

（4）利用bower安装项目其他文件，如jquery等，执行命令：bower install jquery

![775838-20151021160147052-1968841713.png][]

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

![775838-20151021161122645-1330891357.png][]

（5）建立本地测试服务器，执行命令：grunt server

![775838-20151021160250114-1530821171.png][]

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

转载：[前端工程化开发之yeoman、bower、grunt][yeoman_bower_grunt]

[http_www.cnblogs.com_luozhihao_p_4818782.html]: http://www.cnblogs.com/luozhihao/p/4818782.html
[http_www.cnblogs.com_luozhihao_p_4848709.html]: http://www.cnblogs.com/luozhihao/p/4848709.html
[775838-20151021140409114-2032649614.png]: /images/20220617/324edbfc0f3c4da29d9da870b3c23ae2.png
[http_yeoman.io]: http://yeoman.io/
[http_bower.io]: http://bower.io/
[http_www.gruntjs.net]: http://www.gruntjs.net/
[http_nodejs.org]: http://nodejs.org/
[775838-20151021150951177-1456324180.png]: /images/20220617/de46018487f2457fa431767e24e69645.png
[775838-20151021151646677-92727016.png]: /images/20220617/98c3bd9671774f908abbe7e13410b0a6.png
[241344298879607.jpg]: /images/20220617/a9322891be694a2fb954d88d11c2492d.png
[241556277931077.jpg]: /images/20220617/59667e70b0354bbc984f6795a969be6a.png
[775838-20151021152119505-1730557135.png]: /images/20220617/41d0737e146c4063ab7ae3c616dad8d5.png
[775838-20151021160038286-558807888.png]: /images/20220617/6e8ead35237441f382d8f99bcc578b5b.png
[775838-20151021160147052-1968841713.png]: /images/20220617/ee414c2428104b5298c53b003baec051.png
[775838-20151021161122645-1330891357.png]: /images/20220617/9c569a6ad575495b94fe0f3eae54188e.png
[775838-20151021160250114-1530821171.png]: /images/20220617/81d2b07307b0485d983c5c89cea94df5.png
[yeoman_bower_grunt]: http://www.cnblogs.com/luozhihao/p/4898221.html