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

下面以WeUI（微信官方网页开发样式库）介绍一下，怎么把WeUi引入到本身的项目中，个人开发环境Visual Studio 2012，固然了Visual Studio 2015对此已有了更好的支持（https://msdn.microsoft.com/magazine/mt573714），什么开发环境不重要，都同样的。

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

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

npm install -g bower

npm intall -g gulp

三、在项目的根目中建立 bower.json

bower.json 不是强制的，理想状况下，你的应用程序应该具备 bower.json 文件，这样 Bower 就能够跟踪程序包依赖项和版本。

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

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

bower install --save weui

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

五、使用构建工具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目录下。

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

解决方法以下：

执行 npm link gulp 便可

 

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