gulp 安装 bootstrap

 

启服务

然后讲 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

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