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

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