Happy New Year!

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


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

 

posted @ 2018-10-02 16:26  义美-小义  阅读(771)  评论(0编辑  收藏  举报
返回顶部小火箭
世界很公平,想要最好,就一定得付出!
x
github主页