各位好啊,我又和大家见面了,也许你已经不记得大明湖畔的容嬷嬷,但是只要记得博客园中的我就好,希望我的博客能像一股清风,为你驱散炎热的酷暑,好了,废话不多说,开始上干货,我今天带给大家的是前端工程化开发yeoman,bower ,grunt .
关于这三个工具在这里就不过多介绍了,没有用过的散仙们可以自行访问各自的官网进行了解
- yeoman(脚手架工具):http://yeoman.io/
- bower(包管理工具):http://bower.io/
-
grunt(构建工具):http://www.gruntjs.net/
一:准备工作
由于这三个工具都是需要利用npm包下载的,所以需要安装node.js进入到node.js官网https://nodejs.org/en/你会看到两个绿色的大按钮,选择稳定版本的node.js安装就行,安装过程就不细说了,全程傻瓜式安装,下一步,下一步。。就行了,当你安装完node的时候,说明我们已经成功了三分之一,还有三分之二需要我们去完成。剩下的三分之二也是本次讲解的干货,希望对各位能够有所帮助。好了,干货走起,敌军还有三十秒到达战场,碾碎他们。
1.安装完node后打开终端输入node -v 出现下图则说明安装成功。
2.安装git
Git 是 Linus Torvalds 为了帮助管理 Linux 内核开发而开发的一个开放源码的版本控制软件。Yeoman自动构建项目时会用到该软件,所以我们先安装好。到Git官网http://git-scm.com/download/上下载并安装,安装过程和node一样遵循傻瓜式安装
3.安装yeoman,grunt,bower
在命令提示符中运行npm install -g yo grunt-cli bower
4.安装generator在命令行输入yo
5.使用yeoman构建项目,俗话说养兵xx,用兵xx,(ps:原谅我语文是体育老师教的,忘记那句话咋说的了)
创建一个工作目录,用于存放Yeoman项目。我在D盘下新建Angular的app工作目录,命令行进入,输入yo命令,用上下键选择webapp
这里我们不选择Sass,因为需要Sass的话运行环境是Ruby,在windows下配置会非常麻烦;选择bootstrap;不选择Modernizr;点击回车,经过几屏的信息滚动后,会提示项目构建完成,文件目录如下:
app 为项目主目录,是部署的根目录
node_modules 为 nodejs的包文件
test 为测试目录,专门用于单元测试,用的是 mocha 来测试
Gruntfile.js 是配置 grunt 自动化任务的配置文件,具体配置可以参考下 Grunt官网
就这样,一个项目就搭建好了,下一次我将会为大家详细说明grunt 的用法,这个是重点,难点,拿着笔点着字 这个考试要考的。。(哈哈本章节到此结束,欲知后事如何,敬请期待下集)顺便推广下一个前端开发群474471759
如果有错,请大神及时反馈给我,不要让我错下去,谢谢!敬礼
前端项目构建之yeoman的更多相关文章
-
前后端分离之前端项目构建(grunt+require+angular)
前言 前段时间做了一个项目,前端开发页面,然后把代码给到后端同学,后端同学通过vm再来渲染页面.后来才发现,这种方式简直是太low了,因为前端代码在服务端同学那里,每次前端需要更改的时候都需要去到服务 ...
-
前端项目构建工具---Grunt
什么是Grunt? grunt是javascript项目构建工具,在grunt流行之前,前端项目的构建打包大多数使用ant.(ant具体使用 可以google),但ant对于前端而言,存在不友好,执行 ...
-
windows本地搭建grunt前端项目构建环境
初学,目前对grunt的理解和需求仅在于简单的文件合并.压缩.语法检查,其强大功能还有待研究. 安装前环境准备 (1)grunt依赖nodejs运行环境,所以要玩grunt得先把nodejs安装好,n ...
-
前端工程构建工具——Yeoman
一.Yeoman 简介 通常在开发新项目时我们都需要配置工程环境,开发目录,需要下载一些库.框架文件(如 jQuery.Backbone 等),配置编译环境(Less.Sass.Coffeescrip ...
-
前端项目构建error
Refusing to install webpack as a dependency of itself 原因:package.json中,"name": "webpa ...
-
使用gulp来构建一个前端项目
什么是gulp? gulp是一个前端项目构建工具,是自动化项目的构建利器,它不仅能对网站资源进行优化,而且在开发过程中很多重复的任务能够使用正确的工具自动完成.你可以使用gulp及其插件对你的项目代码 ...
-
Github+yeoman+gulp-angular初始化搭建angularjs前端项目框架
在上篇文章里面我们说到了Github账号的申请与配置 那么当你有了Github账号并创建了一个自己的Github项目之后,首要的当然是搭建自己的项目框架啦! 本人对自己的定位是web前端狗,常用开发框 ...
-
用gulp构建你的前端项目
前言 前端技术发展日新月异,随着模块化.组件化的提出,前端变得越来越复杂,静态资源越来越多,那么对静态资源的处理,如压缩,合并,去掉调试信息.. 如果还是人工去处理,效率非常之低且还容易出错,于是自动 ...
-
gulp + webpack 构建多页面前端项目
修改增加了demo地址 gulp-webpack-demo 之前在使用gulp和webpack对项目进行构建的时候遇到了一些问题,最终算是搭建了一套比较完整的解决方案,接下来这篇文章以一个实际项目为例 ...
随机推荐
-
使用CruiseControl.Net全面实现持续集成
持续集成想必大家很多人都听说过,甚至都实践过,最近我又一次亲历了一次持续集成,现将我的经验分享给大家.关于持续集成的理论在本文概不涉及,本文的主要目的是实战CruiseControl.Net,用它来全 ...
-
[SharePoint 2007/2010]Query SharePoint Calendar Event
首先要搞清楚日历事件的各种类型,参考文章: http://sharepoint.microsoft.com/blog/Pages/BlogPost.aspx?PageType=4&ListId ...
-
Sql 中text类型字段判断是否为空
用 len关键字,字段=''会报错:数据类型 text 和 varchar 在 equal to 运算符中不兼容. 正确方法: 1. 字段 is null 2. datalength(字段)=0 注: ...
-
HDU 5335 Walk Out (BFS,技巧)
题意:有一个n*m的矩阵,每个格子中有一个数字,或为0,或为1.有个人要从(1,1)到达(n,m),要求所走过的格子中的数字按先后顺序串起来后,用二进制的判断大小方法,让这个数字最小.前缀0不需要输出 ...
-
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 ...
-
微信公众平台开发-OAuth2.0网页授权(含源码)
微信公众平台开发-OAuth2.0网页授权接口.网页授权接口详解(含源码)作者: 孟祥磊-<微信公众平台开发实例教程> 在微信开发的高级应用中,几乎都会使用到该接口,因为通过该接口,可以获 ...
-
瓦片切图工具gdal2tiles.py改写为纯c++版本(二)
python这么火,C++/C#的程序员都生存不下去了,为啥还要干把python转写成c++的这种反动的事? 项目需要呗... gdal2tiles.py文件中有两个类是计算全球墨卡托与WGS84两种 ...
-
linux的shadow文件
在<Python绝技>这本书的第一个小程序首先展示了针对与unix系统中shadow文件密码的暴力破解的能力,因为之前只是对shadow文件停留在保存了用户密码的阶段,但并没有详细研究,所 ...
-
17秋 软件工程 团队第五次作业 Alpha Scrum3
17秋 软件工程 团队第五次作业 Alpha Scrum3 今日完成的任务 杰麟:java后端学习: 世强:Android的部门基础信息模块的信息显示和对接后台: 港晨:后台管理登陆界面ui设计: 树 ...
-
MySQL优化Explain命令简介(二)
type列 MySQL手册上注明type列用于描述join type,不过我们认为把这一列视为对access type--即MySQL决定如何在表中寻找数据的方式的描述,更加合适一些,以下所示从最坏情 ...