前端项目构建之yeoman

时间:2022-09-12 17:14:37

各位好啊,我又和大家见面了,也许你已经不记得大明湖畔的容嬷嬷,但是只要记得博客园中的我就好,希望我的博客能像一股清风,为你驱散炎热的酷暑,好了,废话不多说,开始上干货,我今天带给大家的是前端工程化开发yeoman,bower ,grunt .

关于这三个工具在这里就不过多介绍了,没有用过的散仙们可以自行访问各自的官网进行了解

  1. yeoman(脚手架工具):http://yeoman.io/
  2. bower(包管理工具):http://bower.io/
  3. grunt(构建工具):http://www.gruntjs.net/

    一:准备工作

    由于这三个工具都是需要利用npm包下载的,所以需要安装node.js进入到node.js官网https://nodejs.org/en/你会看到两个绿色的大按钮,选择稳定版本的node.js安装就行,安装过程就不细说了,全程傻瓜式安装,下一步,下一步。。就行了,当你安装完node的时候,说明我们已经成功了三分之一,还有三分之二需要我们去完成。剩下的三分之二也是本次讲解的干货,希望对各位能够有所帮助。好了,干货走起,敌军还有三十秒到达战场,碾碎他们。

    1.安装完node后打开终端输入node -v 出现下图则说明安装成功。

前端项目构建之yeoman
2.安装git

Git 是 Linus Torvalds 为了帮助管理 Linux 内核开发而开发的一个开放源码的版本控制软件。Yeoman自动构建项目时会用到该软件,所以我们先安装好。到Git官网http://git-scm.com/download/上下载并安装,安装过程和node一样遵循傻瓜式安装

前端项目构建之yeoman

3.安装yeoman,grunt,bower
 在命令提示符中运行npm install -g yo grunt-cli bower
前端项目构建之yeoman
4.安装generator在命令行输入yo
前端项目构建之yeoman

5.使用yeoman构建项目,俗话说养兵xx,用兵xx,(ps:原谅我语文是体育老师教的,忘记那句话咋说的了)

  创建一个工作目录,用于存放Yeoman项目。我在D盘下新建Angular的app工作目录,命令行进入,输入yo命令,用上下键选择webapp
前端项目构建之yeoman

这里我们不选择Sass,因为需要Sass的话运行环境是Ruby,在windows下配置会非常麻烦;选择bootstrap;不选择Modernizr;点击回车,经过几屏的信息滚动后,会提示项目构建完成,文件目录如下:

前端项目构建之yeoman

前端项目构建之yeoman

app 为项目主目录,是部署的根目录

node_modules 为 nodejs的包文件

test 为测试目录,专门用于单元测试,用的是 mocha 来测试

Gruntfile.js 是配置 grunt 自动化任务的配置文件,具体配置可以参考下 Grunt官网

就这样,一个项目就搭建好了,下一次我将会为大家详细说明grunt 的用法,这个是重点,难点,拿着笔点着字 这个考试要考的。。(哈哈本章节到此结束,欲知后事如何,敬请期待下集)顺便推广下一个前端开发群474471759

如果有错,请大神及时反馈给我,不要让我错下去,谢谢!敬礼

前端项目构建之yeoman的更多相关文章

  1. 前后端分离之前端项目构建(grunt+require+angular)

    前言 前段时间做了一个项目,前端开发页面,然后把代码给到后端同学,后端同学通过vm再来渲染页面.后来才发现,这种方式简直是太low了,因为前端代码在服务端同学那里,每次前端需要更改的时候都需要去到服务 ...

  2. 前端项目构建工具---Grunt

    什么是Grunt? grunt是javascript项目构建工具,在grunt流行之前,前端项目的构建打包大多数使用ant.(ant具体使用 可以google),但ant对于前端而言,存在不友好,执行 ...

  3. windows本地搭建grunt前端项目构建环境

    初学,目前对grunt的理解和需求仅在于简单的文件合并.压缩.语法检查,其强大功能还有待研究. 安装前环境准备 (1)grunt依赖nodejs运行环境,所以要玩grunt得先把nodejs安装好,n ...

  4. 前端工程构建工具——Yeoman

    一.Yeoman 简介 通常在开发新项目时我们都需要配置工程环境,开发目录,需要下载一些库.框架文件(如 jQuery.Backbone 等),配置编译环境(Less.Sass.Coffeescrip ...

  5. 前端项目构建error

    Refusing to install webpack as a dependency of itself 原因:package.json中,"name": "webpa ...

  6. 使用gulp来构建一个前端项目

    什么是gulp? gulp是一个前端项目构建工具,是自动化项目的构建利器,它不仅能对网站资源进行优化,而且在开发过程中很多重复的任务能够使用正确的工具自动完成.你可以使用gulp及其插件对你的项目代码 ...

  7. Github+yeoman+gulp-angular初始化搭建angularjs前端项目框架

    在上篇文章里面我们说到了Github账号的申请与配置 那么当你有了Github账号并创建了一个自己的Github项目之后,首要的当然是搭建自己的项目框架啦! 本人对自己的定位是web前端狗,常用开发框 ...

  8. 用gulp构建你的前端项目

    前言 前端技术发展日新月异,随着模块化.组件化的提出,前端变得越来越复杂,静态资源越来越多,那么对静态资源的处理,如压缩,合并,去掉调试信息.. 如果还是人工去处理,效率非常之低且还容易出错,于是自动 ...

  9. gulp + webpack 构建多页面前端项目

    修改增加了demo地址 gulp-webpack-demo 之前在使用gulp和webpack对项目进行构建的时候遇到了一些问题,最终算是搭建了一套比较完整的解决方案,接下来这篇文章以一个实际项目为例 ...

随机推荐

  1. 使用CruiseControl.Net全面实现持续集成

    持续集成想必大家很多人都听说过,甚至都实践过,最近我又一次亲历了一次持续集成,现将我的经验分享给大家.关于持续集成的理论在本文概不涉及,本文的主要目的是实战CruiseControl.Net,用它来全 ...

  2. [SharePoint 2007/2010]Query SharePoint Calendar Event

    首先要搞清楚日历事件的各种类型,参考文章: http://sharepoint.microsoft.com/blog/Pages/BlogPost.aspx?PageType=4&ListId ...

  3. Sql 中text类型字段判断是否为空

    用 len关键字,字段=''会报错:数据类型 text 和 varchar 在 equal to 运算符中不兼容. 正确方法: 1. 字段 is null 2. datalength(字段)=0 注: ...

  4. HDU 5335 Walk Out (BFS,技巧)

    题意:有一个n*m的矩阵,每个格子中有一个数字,或为0,或为1.有个人要从(1,1)到达(n,m),要求所走过的格子中的数字按先后顺序串起来后,用二进制的判断大小方法,让这个数字最小.前缀0不需要输出 ...

  5. Unique Paths ——LeetCode

    A robot is located at the top-left corner of a m x n grid (marked 'Start' in the diagram below). The ...

  6. 微信公众平台开发-OAuth2.0网页授权(含源码)

    微信公众平台开发-OAuth2.0网页授权接口.网页授权接口详解(含源码)作者: 孟祥磊-<微信公众平台开发实例教程> 在微信开发的高级应用中,几乎都会使用到该接口,因为通过该接口,可以获 ...

  7. 瓦片切图工具gdal2tiles&period;py改写为纯c&plus;&plus;版本&lpar;二&rpar;

    python这么火,C++/C#的程序员都生存不下去了,为啥还要干把python转写成c++的这种反动的事? 项目需要呗... gdal2tiles.py文件中有两个类是计算全球墨卡托与WGS84两种 ...

  8. linux的shadow文件

    在<Python绝技>这本书的第一个小程序首先展示了针对与unix系统中shadow文件密码的暴力破解的能力,因为之前只是对shadow文件停留在保存了用户密码的阶段,但并没有详细研究,所 ...

  9. 17秋 软件工程 团队第五次作业 Alpha Scrum3

    17秋 软件工程 团队第五次作业 Alpha Scrum3 今日完成的任务 杰麟:java后端学习: 世强:Android的部门基础信息模块的信息显示和对接后台: 港晨:后台管理登陆界面ui设计: 树 ...

  10. MySQL优化Explain命令简介&lpar;二&rpar;

    type列 MySQL手册上注明type列用于描述join type,不过我们认为把这一列视为对access type--即MySQL决定如何在表中寻找数据的方式的描述,更加合适一些,以下所示从最坏情 ...