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. Jacoco远程统计tomcat服务(Windows系统)的代码覆盖率

    Jacoco远程统计tomcat服务(Windows系统)的代码覆盖率 2017-09-21 目录 1 Jacoco的安装和设置  1.1 什么是Jacoco?  1.2 Jacoco安装  1.3 ...

  2. webpack2进阶之多文件,DLL,以及webpack-merge

    本需要对webpack已有一定的了解,如果你没接触过webpack或者刚刚接触webpack,可以考虑先看一下我的这篇教程. 入门教程 1.打包多文件 之前,当需要打包多个而文件时,我是这么写的: m ...

  3. 关于Android WebView上传文件的解决方案

    我们在开发需求的时候,难免会接入一下第三方的H5页面,有些H5页面是具有上传照片的功能,Android 中的 WebView是不能直接打开文件选择弹框的 接下来我讲简单提供一下解决方案,先说一下思路 ...

  4. Django查询数据库性能优化

    现在有一张记录用户信息的UserInfo数据表,表中记录了10个用户的姓名,呢称,年龄,工作等信息. models文件 from django.db import models class Job(m ...

  5. Android Framework 初探

    最近工作任务不忙,学习一下Android Framework方面的知识. 一.介绍,是什么 Android的Framework是直接应用之下的一层,叫做应用程序框架层.这一层是核心应用程序所使用的AP ...

  6. 我的Spring学习记录(三)

    学习了AOP之后就可以应用一下了,所以这次我们了解一下Spring的声明式事务. 事务在我们的很多方面都可以体现,就拿我们平时的买卖活动,或者是银行的转账来说,这些活动要么是成功,要么是失败,比如:张 ...

  7. Codeforces 845 A. Chess Tourney 思路:简单逻辑题

    题目: 题意:输入一个整数n,接着输入2*n个数字,代表2*n个选手的实力.    实力值大的选手可以赢实力值小的选手,实力值相同则都有可能赢.    叫你把这2*n个选手分成2个有n个选手的队伍. ...

  8. 再起航,我的学习笔记之JavaScript设计模式28(委托模式)

    ## 委托模式 ### 概念介绍 **委托模式(Entrust): **多个对象接收并处理同一请求,他们将请求委托给另一个对象统一处理请求. ### 利用委托优化循环 如果我们有一个需求需要让用户点击 ...

  9. CPU工作方式、多核心、超线程技术详解[转贴]

    CPU是一台电脑的灵魂,决定电脑整体性能.现在的主流CPU都是多核的,有的运用了多线程技术(Hyper-threading,简称HT).多核可能还容易理解些,相信不少玩家都能说出个所以然.但超线程是个 ...

  10. mysql中将时间转为秒

    项目中遇到的问题,需要将时间(时 分 秒)转为秒,业务上处理有些麻烦,尝试找了多种处理函数,然而并没有用 完美解决办法: TIME_TO_SEC   格式'HH:MM:SS'或HHMMSS SELEC ...