gulp 安裝 bootstrap

標籤：config   輸出   icon   web   引入   UNC   iconfont   jquery   ports   

 

啟服務

然後講 bootstrap

gulp 不能全域安裝

--------------------------------------------------------------------

gulpfile.js

服務組態檔

 

--------------------------------------------------------------------

@charset "utf-8";
@import "../../lib/bootstrap/dist/css/bootstrap.min.css";
@import "../../font/iconfont.css";

按需載入

css 可以用scss匯入一個檔案 main.scss

 

引入例子：

------------------------------------

@charset "utf-8";
@import "../../lib/bootstrap/dist/css/bootstrap.min.css";
@import "../../font/iconfont.css";

匯入的一般是公用的

要用什麼匯入什麼

------------------------------------

js 用了 requier.js(外掛程式)

<script type="text/javascript" src="lib/requirejs/require.js" data-main="js/demo"></script>

 

data-main="js/demo"

相當於一個入口函數 裡面有個 demo.js 類似config 檔案（主模組）

裡面的內容

require.config({
shim: { //配置不相容的模組
‘bootstrap‘: {
deps: [‘jquery‘], //deps數組，表明該模組的依賴性
exports: ‘bootstrap‘ //輸出的變數名
}
},
paths: {//自訂 路徑相對於當前檔案
"jquery": "../lib/jquery/dist/jquery.min",
"bootstrap": "../lib/bootstrap/dist/js/bootstrap.min",
"demo1":"demo1"
}
});
require([‘jquery‘,‘bootstrap‘,‘demo1‘], function ($,bootstrap,demo1){
console.log(demo1.web.add(2));
//console.log(demo1.add(2,3));
//console.log(demo1.web.ride(2,3));
});

------------------------------------

AMD requirejs (先載入所有的依賴)

CMD seajs （消極式載入）

//AMD例子
require([‘jquery‘,‘bootstrap‘,‘demo1‘], function ($,bootstrap,demo1){
console.log(demo1.web.add(2));
//console.log(demo1.add(2,3));
//console.log(demo1.web.ride(2,3));
});

//CMD

defind(function(){
var a = require(‘a‘);
a.info();
var b = require(‘b‘);
b.info();

})

var demoA = require(‘demoA‘);//載入 demoA.js

------------------------------------

裡面的檔案 環環相扣 封裝中有封裝

 

scss

遍曆 $a = #fff;

編譯 scss

------------------------------------

 

gulp 安裝 bootstrap