怎麼在項目中使用前端包管理器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/ 看一下文檔。