yeoman可以快速的搭建一个项目的手脚架,初次接触yeoman,在搭建的过程中遇到了很多的问题。

yeoman需要node.js(http://nodejs.org)和git(http://git-scm.com/downloads)作为开发环境,所以需要先安装这两个东西。

yeoman主要由三个东西构成,需要分别安装yo(脚手架工具)、grunt(构建工具)、bower(包管理工具)。

cnmp install -g yo
cnpm install -g grunt-cli
cnmp install -g bower

在这里使用了cnmp,这是百度的一个东西,比npm安装要快很多。

因为要本人写一个AngularJs应用,所以还安装了

cnmp isntall -g generator-angular@0.9.8

然后创建一个项目目录例如StockDog,进该目录运行以下命令创建一个项目

yo angular StockDog

本人第一次没有安装yo,所以报了“yo不是内部或者外部命令”的错误。

查看我们的StockDog目录,如图

如果此时我们输入grunt serve命令启动配置的本地服务器,不会像预期一样运行,而是会报错,提示Unable to find local grunt,这是因为我们没有安装依赖包,查看文件package.json,我们可以看到本项目的依赖包。

所以我们要安装这些所有的包,执行以下命令

cnmp install

此时项目目录中会多出一个名为node_modules的文件夹,该目录包含了cnpm安装的包。

再次输入grunt server命令,还是报错,注意下面的红色报错字体,没有发现bower packages

我们打开bower.json文件,发现了很多项目要依赖的包和模块,有些是在创建项目的时候选择的。

所以我们要安装这些包和模块,执行下面命令

bower install

这时我还遇到了不识别bower命令的问题,于是运行下面命令安装bower

cnpm install bower --save-dev

这时还是有问题

因为bower是通过git下载包的,因为git没有在系统环境中配置路径,此时可以有两种方式解决

  1. 在Git Bash中运行bower install
  2. 配置git的环境变量路径,例如我的在环境变量path中添加G:\Git\bin。
这时项目又多出了一个目录bower_components,该目录包含了bower命令安装的包,最终的项目文件目录如下:


这时再运行grunt server,则会应用会启动,并在默认浏览器中打开一个标签

这时使用yeoman就算成功了。

搭建yeoman自动化构建工具的更多相关文章

  1. gulp自动化构建工具

    gulp    自动化构建工具,实时监控.代码合并.压缩... http://www.gulpjs.com.cn/     中文网 http://gulpjs.com/plugins/     英文网 ...

  2. 前端自动化构建工具-yoman浅谈

    如今随着前端技术的飞速发展,前端项目也变得越来越复杂. 快速的搭建一个集成多种工具和框架的复杂前端项目也越来越成为一种需求. 当然如果你要自己从0开始完全自己diy,绝对可以,只不过需要耗费一些不少的 ...

  3. 浅谈maven自动化构建工具

    转载https://blog.csdn.net/zxm1306192988/article/details/76209062 Maven是什么[what] 1.Maven 是 Apache 软件基金会 ...

  4. 前端自动化构建工具gulp的使用总结

    前端自动化构建工具gulp的使用总结 博主最近偶的空闲,在此对gulp的使用做一个总结,让小伙伴知道如何合理的使用gulp以及gulp的使用技巧. 谈到gulp,有人可能就会想到另外一个构建工具gru ...

  5. 前端开发自动化工作流工具,JavaScript自动化构建工具grunt、gulp、webpack介绍

    前端开发自动化工作流工具,JavaScript自动化构建工具grunt.gulp.webpack介绍 前端自动化,这样的一个名词听起来非常的有吸引力,向往力.当今时代,前端工程师需要维护的代码变得及为 ...

  6. 前端自动化构建工具——gulp

    gulp是基于流的前端自动化构建工具. 一.环境配置 gulp是基于nodejs的,所以没有 nodejs 环境的要先去安装好 然后给系统配上gulp环境 npm install -g gulp 再到 ...

  7. 前端自动化构建工具 Gulp 使用

    一个月没写博客了,今天有时间,就写个gulp的入门使用吧.. 简介:gulp是一个前端自动化构建工具,可以实现代码的检查.压缩.合并……等等,gulp是基于Node.js的自动任务运行器 一.安装No ...

  8. gulp前端自动化构建工具新手入门篇

    很久没有更新博文了. 经过了一次年前吐血的赶项目,终于在年后回血了.趁着有空,新学到了一个前端自动化构建工具-gulp. 现在我们通过这3个问题来学习一下: 1.什么是gulp? 2.为什么要用gul ...

  9. JavaScript自动化构建工具入门----grunt、gulp、webpack

    蛮荒时代的程序员: 做项目的时候,会有大量的js 大量的css   需要合并压缩,大量时间需要用到合并压缩 在前端开发中会出现很多重复性无意义的劳动  自动化时代的程序员: 希望一切都可以自动完成  ...

随机推荐

  1. 浅谈IT技术女转战微电商初体验

    今天闲来无事,突然想翻看下之前写的技术博客,很是意外,居然那么多阅读量,于是想想做微商也有一段时间了,决定写写初入微商的初体验. 先自我介绍一下,本人是一名理工女,做IT行业的,这个行业也许有人了解, ...

  2. Ansible系列(五):playbook应用和roles自动化批量安装示例

    html { font-family: sans-serif } body { margin: 0 } article,aside,details,figcaption,figure,footer,h ...

  3. Laravel的Nginx重写规则完整代码

    laravel基本重写规则 location / { index index.html index.htm index.php; try_files $uri $uri/ /index.php?$qu ...

  4. 字符、字符集、编码,以及它们python中会遇到的一些问题(下)

    在看了很多的博客文章之后,总结整理得到了以下文章,非常感谢这些无私奉献的博主! 文章末尾有本文引用的文章的链接,如果有漏掉的文章引用,可以发邮件联系我,随后再次附上链接! 侵删!!! 这一部分是下篇, ...

  5. 西邮linux兴趣小组2014纳新免试题(五)

    [第五关] 题目 http://final5.sinaapp.com/ 关注西邮Linux微信平台,得到一个名为a的文件 分析 分析文件a 需要反汇编,拿IDA上,打开后发现key_function及 ...

  6. AngularJS -- HTML 编译器

    点击查看AngularJS系列目录 转载请注明出处:http://www.cnblogs.com/leosx/ HTML Compiler Overview(HTML 编译器 概要) AngularJ ...

  7. IIS充当代理转发请求到Kestrel

    接着上篇博文为ASP.NetCore程序启用SSL的code,这篇将介绍如何用IIS充当反向代理的角色转发请求到Kestrel服务器 与ASP.NET不同,ASP.netCore使用的是自托管web服 ...

  8. 第5章 不要让线程成为脱缰的野马(Keeping your Threads on Leash) ---线程优先权(Thread priority)

    有没有过这样的经验?你坐在你的车子里,目的地还在好几公里之遥,而时间已经很晚了.你拼命想告诉那些挡住你去路的人们,今天这个约会对你是多么多么重要,能不能请他们统统--呃--滚到马路外?很不幸,道路系统 ...

  9. Java子线程中的异常处理(通用)

    在普通的单线程程序中,捕获异常只需要通过try ... catch ... finally ...代码块就可以了.那么,在并发情况下,比如在父线程中启动了子线程,如何正确捕获子线程中的异常,从而进行相 ...

  10. Knapsack I 竟然是贪心,证明啊。。。。

    Knapsack I Time Limit: 2000/1000MS (Java/Others) Memory Limit: 128000/64000KB (Java/Others) SubmitSt ...