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. nested exception is java.lang.IllegalArgumentException: Pointcut is not well-formed

    在用AOP 的时候出现了如下的错误, 警告: Exception encountered during context initialization - cancelling refresh atte ...

  2. FastDFS安装全过程记录(V5.05)

    FastDFS安装全过程记录 1.安装准备 HA虚拟IP:192.168.1.208 HA软件:Keepalived 操作系统:CentOS 7 用户:root 数据目录:/data/fastdfs ...

  3. New Features and changes of Ninject 3.3

    Ninject 3.3 beta1 has gone live. This release mainly focus on bug fix and platform update. Support . ...

  4. 语音传输之RTP/RTCP/UDP及软件实现关键点

    语音通信是实时通信,一定要保证实时性,不然用户体验会很糟糕.IETF设计了RTP来承载语音等实时性要求很高的数据,同时设计了RTCP来保证服务质量(RTP不保证服务质量).在传输层,一般选用UDP而不 ...

  5. vue-ajax小封装

    1. js 文件: /** ajax封装:* 1. 引入文件* 2. new Vue().ajax.get(url,data,fn,ojson), 或 new Vue().ajax.post(url, ...

  6. 【充分利用你的Azure】将Azure用作云计算平台(1)

    本文将围绕几个步骤来讲. 因为本人是MSP,微软送了150刀的额度给我随便使用.这篇文章是要讲将Azure用作云计算平台,对于我来说,我是做机器学习的,那么Azure就要有机器学习的平台. 本文的目的 ...

  7. 统计学习方法——CART, Bagging, Random Forest, Boosting

    本文从统计学角度讲解了CART(Classification And Regression Tree), Bagging(bootstrap aggregation), Random Forest B ...

  8. 学习如何看懂SQL Server执行计划——基本知识篇

    一.基本概念 1.数据的读取 页(page)是SQL SERVER可以读写的最小I/O单位.即使只需访问一行,也要把整个页加载到缓存之中,再从缓存中读取数据.物理读取是从磁盘上读取,逻辑读取是从缓存中 ...

  9. Python自学笔记-面向对象相关(Mr seven)

    ---恢复内容开始--- http://www.cnblogs.com/wupeiqi/articles/5433893.html 类的成员可以分为三大类:字段.方法和属性. 一.字段 字段包括:普通 ...

  10. vue + ajax + php 接口的使用小接

    vue + ajax + php 接口的使用小接 前端代码: (获取用户信息,并渲染页面) userinfor.html <!DOCTYPE html> <html lang=&qu ...