码迷,mamicode.com
首页 > 其他好文 > 详细

gulp 安装 bootstrap

时间:2018-10-02 20:18:51      阅读:195      评论:0      收藏:0      [点我收藏+]

标签: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

标签:config   输出   icon   web   引入   UNC   iconfont   jquery   ports   

原文地址:https://www.cnblogs.com/shaozhu520/p/9737391.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!