一、Yeoman

在nodejs环境下安装:

npm install -g yo

然后安装所需要的generator,generator是npm包,命名为generator-xyz,比如安装angular的generator时

npm install -g generator-angular

然后进入你想要创建项目的目录下,运行

yo angular learnangular

learnangular是项目名

选择是否使用sass,bootstrap,勾选(使用空格键选中和取消选中)需要的angular文件,回车即创建所需的项目文件。

最后运行下载所有所需依赖的模块

npm install

现在项目就构建好了,解释下每个文件的作用:

1)app是我们写正式代码的文件

2)node_modules 是自动下载的所需项目文件

3)test文件夹用于自动化测试

4).bowerrc 是bower自身的配置项,包括线上的项目拉下来后存放的路径

5).editorconfig 指定代码风格

6).gitattributes git的配置项

7).gitignore 当前项目要忽略哪些文件不上传到git

8).jscsrc

9).jshintrc jshint配置文件

10).yo-rc.json

11)bower.json bower的配置文件,指定通过bower去拉哪些前端框架或者配置文件

12)Gruntfile.js grunt的配置文件

13)package.json

二、Bower

bower是web的包管理器。

安装:

npm install -g bower

查看版本

bower -v

如果现在有个项目需要使用到bootstrap和jquery,按照平常的做法就是去网上把jquery和bootstrap下载下来,使用bower就可以不用自己去下载了,直接进入到项目目录,使用如下指令,bower会自动去github上下载最新版本的模块,运行在git bash下

bower install bootstrap
bower install jquery

下载下来的文件会存放在当前目录下的bower_components文件夹下。

问题:

1)如果我们需要的组件比较小众,没有在bower上注册,那么直接使用名字安装,bower可能查找不到, 因此bower提供了几种安装方式(进入到项目目录,shifrt+右键选择git bash,再运行相应的命令):

  • 通过github的短写安装

找到你需要下载的组件的github地址,比如jquery,打开github官网

假设现在要使用的是esprima,打开esprima,

其中的jquery/esprima就是github短写,使用如下命令安装

bower install jquery/esprima
  • 项目完整的github地址

进入github,点击wiki,复制clone this wiki locally的地址,即蓝色选中部分

复制下来的地址是:https://github.com/jquery/esprima.wiki.git,去掉.wiki

bower install https://github.com/jquery/esprima.git

2)使用的组件没有在github上,可以直接使用URL进行安装

生成bower.json文件

当项目提交到线上,其他成员需要将项目代码拉下来时,可以直接运行一下指令,就可以下载bower.json文件中所需要的依赖项,因此bower.json文件很重要

bower install

1)首先运行(不能在git bash中运行,可以在cmd中运行)

bower init

name: 输入项目名称

description:输入项目描述

main file:主要入口文件

keywords:关键字

设置当前安装的组件作为dependecies;一路下来基本上都是yes,然后就会显示给你看bower.json文件预览

现在就生成了bower.json

2)修改bower.json文件(在git bash中)

比如我现在想要在devdependencies里面引入angular

bower install angular --save-dev

上面的命令意思是安装angular,并且保存在devdependencies中

如果我想在dependencies中也引入angular的话,可以运行下面的命令

bower install angular --save

Note:

使用vim bower.json可以查看bower.json文件,输入:wq可以退出查看模式

bower.json文件中

"dependencies": {
"bootstrap": "^3.3.7",
"esprima": "https://github.com/jquery/esprima.git#^3.1.1",
"angular": "^1.5.8"
},

版本号前面可以使用^或者~

^:如果bootstrap版本从3.3.7升到3.3.8或者3.5.4,都会自动改变,但是如果从3.3.7升到了4.x.x的话就不会自动改变

~: 如果bootstrap版本从3.3.7升到3.3.9可以自动改变,但是如果从3.3.7升级到3.4.x则不会自动改变

配置.bowerrc文件

{
"directory": "bower_components", // 配置文件路径
"proxy":"http://proxy.tencent.com:8080", // 配置代理(腾讯)
"https-proxy":"https://proxy.tencent.com:8080", // 配置https代理
"timeout":60000 // 配置过期时间
}

因为很多公司为了内网的安全,都必须使用代理才能访问外网,因此bower也需要配置代理才能在外网下载所需的依赖项。timeout是过期时间,如果网络很好可以将过期时间调小一点,如果网络很差可以将过期时间调大一点,默认单位为ms。

yeoman&bower的更多相关文章

  1. Yeoman+Bower+gulp web前端自动化工作流程(初级教程)

    Yeoman包括了三个部分yo(脚手架工具).grunt/gulp(构建工具).bower(包管理器).听说gulp更容易上手,所以我就没用grunt而选的gulp 什么是开发流程? 在我看来一个完整 ...

  2. yeoman bower grunt等安装

    grunt-beginner前端自动化工具:http://www.imooc.com/learn/30 grunt的安装 官方站点:http://gruntjs.com/ 安装指令: sudo npm ...

  3. 前端自动化学习笔记(一)——Yeoman,bower,Grunt的安装

    最近看视频学习了前端自动化的一些知识,确实让我大开眼界.感觉前端越来越神器了.同时跟着视频自己也尝试运用了一些工具去构建前端项目,但是中间遇见了很多坑,磕磕绊绊的才实现了一点功能,所以打算记录一下学习 ...

  4. node,Yeoman,Bower,Grunt的简介及安装

    作为前端,基本的html,css,js已经不太够用了,所以要学习一些前端自动化工具,来提高我们的生产力 1.NodeJS 先安装NodeJS,直接去官网,下载最新的版本,一定要最新的版本,这样会避免很 ...

  5. windows下前端开发工具遇到的问题总结(yeoman bower grunt)

    我用的是windows环境 一毕要环境: 1:nodejs 官网:https://nodejs.org/en/ 2:由于很多国外网站国内都访问不了(如果没有设置会出现很多奇怪的错误),所有必需FQ 我 ...

  6. 前端工程化开发之yeoman、bower、grunt

    上两遍文章介绍了前端模块化开发(以seaJs为例)和前端自动化开发(以grunt为例)的流程,参见: http://www.cnblogs.com/luozhihao/p/4818782.html ( ...

  7. Yeoman

    安装Yeoman之前,确认安装好Node.js和npm. sudo npm install --global yo 然后查看软件版本 yo --version && bower --v ...

  8. 使用Yeoman搭建 AngularJS 应用 (3) —— 让我们搭建一个网页应用

    原文地址:http://yeoman.io/codelab/setup.html 与Yeoman的交互大多数是通过命令行.在苹果机器需要使用Terminal应用,在Linux使用shell.如果使用W ...

  9. 初识yeoman

    最近开始新项目,在项目构建上面寻找合适的东西,grunt,bower到发现yeoman;学习了下,把一些东西记录下来然留着以后用. 1.什么是Yeoman Yeoman是Google的团队和外部贡献者 ...

随机推荐

  1. NKOJ1472 警卫安排

    P1472警卫安排   时间限制 : 10000 MS   空间限制 : 65536 KB 问题描述 一个重要的基地被分为n个连通的区域.出于某种神秘的原因,这些区域以一个区域为核心,呈一颗树形分布. ...

  2. Laravel 某个字段更新失败的原因

    明明有这个title, 但是却始终更新不成功 原因是模型这里设置了可以更新的字段,所以直接用Db::table更新会成功

  3. Data Lake Analytics账号和权限体系详细介绍

    一.Data Lake Analytics介绍 数据湖(Data Lake)是时下大数据行业热门的概念:https://en.wikipedia.org/wiki/Data_lake.基于数据湖做分析 ...

  4. webpack学习之—— Manifest

    Runtime runtime,以及伴随的 manifest 数据,主要是指:在浏览器运行时,webpack 用来连接模块化的应用程序的所有代码.runtime 包含:在模块交互时,连接模块所需的加载 ...

  5. selenium(1):python3.6.4+selenium3.0+chrome环境配置

    本文为配置过程: python  1.python3.6.4下载安装见python安装说明.(本博客) 2.安装python的集成编译器PyCharm. PyCharm 是由 JetBrains 打造 ...

  6. hdu 4027 Can you answer these queries? (区间线段树,区间数开方与求和,经典题目)

    Can you answer these queries? Time Limit: 4000/2000 MS (Java/Others)    Memory Limit: 65768/65768 K ...

  7. Node.js的框架-express

    Node.js的框架 express 是第三方的 express const express=require('express'); const app=express(); const PORT=3 ...

  8. 数据库Mysql监控及优化

    在做 性能测试的时候数据最重要,数据来源于哪里呢,当然是数据库了,数据库中,我们可以知道,数据从磁盘中要比从缓存中读取数据的时间要慢的多的多,还可以知道,同样的一个sql语句,执行的效率也不一样,这是 ...

  9. jquery输入框自动提示

    1. 下载jar包:jquery.autocomplete.js 2. 页面内容:<script type="text/javascript" src="../jq ...

  10. HTTP请求响应头信息

    HTTP请求响应头信息 请求:(request) 组成部分: 请求行 请求头 请求体 请求行:请求信息的第一行 格式:请求方式 访问的资源 协议/版本 例如:GET /day0801/1.html H ...