怎么在项目中使用前端包管理器bower和构建工具gulp

时间:2021-06-30 16:22:20

下面以WeUI(微信官方网页开发样式库)介绍一下,怎么把WeUi引入到自己的项目中,我的开发环境Visual Studio 2012,当然了Visual Studio 2015对此已有了更好的支持(https://msdn.microsoft.com/magazine/mt573714),什么开发环境不重要,都一样的。

1、bower、gulp都是基于nodejs,前提是你必须已经安装好nodejs环境。

2、使用nodejs自带的包管理器npm,安装bower、gulp

npm install -g bower

npm intall -g gulp

3、在项目的根目中创建 bower.json

bower.json 不是强制的,理想情况下,你的应用程序应该具有 bower.json 文件,这样 Bower 就可以跟踪程序包依赖项和版本。

怎么创建bower.json 呢?很简单,cmd命令行工具进入到项目的根目录中,运行 Bower init 命令,按照提示一步一步创建即可。

4、安装微信官方网页开发样式库WeUi

bower install --save weui

怎么在项目中使用前端包管理器bower和构建工具gulp

这时候会自动在更目录创建 bower_components 文件夹,里面就是WeUi的整个项目文件,此时你可以在你的项目中直接以<link rel="stylesheet" type="text/css" href="/bower_components/weui/dist/style/weui.min.css">的形式引用,但这样显得很low,很不整洁,对于以后也会出现很多麻烦。

5、使用构建工具gulp,把相关的库文件对应到项目指定位置

在根目下创建一个"gulpfile.js"文件,gulpfile.js文件内容:

/**
* Created by onestraw on 2016/5/9.
*/
var gulp = require('gulp'); gulp.task('buildlib', function() {
gulp.src('./bower_components/weui/dist/style/*.css')
.pipe(gulp.dest('./lib/weui/css/'));
gulp.src('./bower_components/weui/dist/example/example.*')
.pipe(gulp.dest('./lib/weui/example/'));
gulp.src('./bower_components/weui/dist/example/images/*')
.pipe(gulp.dest('./lib/weui/example/images/'));
gulp.src('./bower_components/weui/dist/example/snapshot/*')
.pipe(gulp.dest('./lib/weui/example/snapshot/'));
});

然后cmd中运行gulp buildlib,相关的库文件就被copy到lib目录下。

这是可能会出现这么一个问题

怎么在项目中使用前端包管理器bower和构建工具gulp

解决方法如下:

执行 npm link gulp 即可

gulb的功能很强大,了解更多可以去官方网站 http://www.gulpjs.com.cn/ 看一下文档。