angular1项目中bower的使用
1、bower的作用
bower是一个管理静态资源的包管理器。一般存放的是你需要引入代码中的一个资源。如：angular .js、zepto.js。
2、使用步骤
1、在使用bower前的准备工作。
必须要在电脑中安装了node、npm、git三个基本的工具。
2、全局安装bower
npm install --g bower3、使用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 " ],"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>
head>
<body>
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模板中。
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！