下面以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_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目錄下。
這是可能會出現這么一個問題
解決方法如下:
執行 npm link gulp 即可
gulb的功能很強大,了解更多可以去官方網站 http://www.gulpjs.com.cn/ 看一下文檔。