angular1项目中bower的使用

来源：互联网发布：购物群软件编辑：程序博客网时间：2024/06/05 05:12

1、bower的作用

bower是一个管理静态资源的包管理器。一般存放的是你需要引入代码中的一个资源。如：angular .js、zepto.js。

2、使用步骤

1、在使用bower前的准备工作。

必须要在电脑中安装了node、npm、git三个基本的工具。

2、全局安装bower

npm install --g bower

3、使用bower安装相关的东西

比如安装zepto.js

bower install zepto

这时候就会生成一个文件夹bower_components。
在这个文件夹就有刚才下载的zepto.js。

4、使用bower.json文件生成相应的依赖

bower init

使用这个命令，就能生成bower.json文件。一个基本的bower.json文件的文件夹如下：

{  "name": "gulptest",  "description": "",  "main": "src/index.html",  "authors": [    "liwd <liwd@mapbar.com>"  ],  "license": "ISC",  "keywords": [    "bower"  ],  "homepage": "",  "private": true,  "ignore": [    "**/.*",    "node_modules",    "bower_components",    "test",    "tests"  ],  "dependencies": {    "zepto": "^1.2.0",    "bootstrap": "^3.3.7"  }}

在这个文件夹中的dependencies中，就是使用bower安装的静态文件。

3、和wiredep的配合使用（html注入bower）

1、wiredep的作用是什么？

可以使用这个插件把bower中的js文件以及css文件注入到相应的html文件中。

2、html的基本模板。

主要是在html相应的地方写入注释，如下：

<html><head>    <!-- bower:css -->    <!-- endbower --></head><body>    <!-- bower:js -->    <!-- endbower --></body></html>

3、在gulp中使用wiredep进行注入

gulp的配置文件 gulp.js

'use strict';var path = require('path');var gulp = require('gulp');var wiredep = require('wiredep').stream;gulp.task('html', function() {  // 创建task任务:可以在cmd命令中执行任务    gulp.src('src/index.html')        .pipe(wiredep({  // 调用插件wiredep执行方法            optional: 'configuration',            goes: 'here'        }))        .pipe(gulp.dest('dest'))});

4、gulp.js文件配置完毕之后

gulp html

在cmd命令行中执行命令gulp html，就把bower中的js和css注入到html模板中。

阅读全文

0 0