Bootstrap4 gulp 配置详解


Posted in Javascript onJanuary 06, 2019

最近想写个项目,由于之前一直写后端,很少接触前端,所以这次来好好学一下前端。看了下Yii框架,它自带了Bootstrap框架,最开始想的是怎么快速写个页面,哪知道这个就像剥洋葱一样,就剥到了学习构建工具的阶段。

说个很沮丧的消息,等我把gulp这套工具调通了后,发现Github上居然有很多这样的模板了!废了我3天时间来搞这个东西。给个关键词:bootstrap 4 gulp boilerplate。额,以及还有一个网站,这是我读完bootstrap的文档后发现的:https://vanillajstoolkit.com/plugins/

在项目目录下的babelln/gulpfile.babel.js:

// 如果要编译babel可以启用
// const babel = require('gulp-babel');
// const concat = require('gulp-concat');
// const uglify = require('gulp-uglify');
const del = require("del");
const gulp = require("gulp");
const browserSync = require("browser-sync");
const sassCompile = require("gulp-sass");
const server = browserSync.create();

const paths = {
 scripts: {
  src: "src/scripts/*.js",
  dest: "dist/scripts"
 },
 css: {
  src: "src/scss/*.scss",
  dest: "dist/css"
 }
};

// 定义清理方法,会删除dist目录
const clean = () => del(["dist"]);

// 定义需要拷贝到dist目录的文件,一般APP最终使用的JS和CSS文件在这个目录中
const scriptFiles = [
 paths.scripts.src,
 "node_modules/bootstrap/dist/js/bootstrap.min.js",
 "node_modules/jquery/dist/jquery.min.js",
 "node_modules/popper.js/dist/umd/popper.min.js"
];

// 编译babel文件的时候使用
// function scripts() {
//  return gulp.src(paths.scripts.src, { sourcemaps: true })
//   .pipe(babel())
//   .pipe(uglify())
//   .pipe(concat('index.min.js'))
//   .pipe(gulp.dest(paths.scripts.dest));
// }

// 将源代码文件复制到目的地,中间可以加入其他处理程序
function scripts() {
 return gulp.src(scriptFiles).pipe(gulp.dest(paths.scripts.dest));
}

// 重启web服务
function reload(done) {
 server.reload();
 done();
}

// 编译sass文件,在dist/css目录产生结果文件
function sass() {
 return gulp
  .src(["node_modules/bootstrap/scss/bootstrap.scss", paths.css.src])
  .pipe(sassCompile())
  .pipe(gulp.dest(paths.css.dest));
}

// 服务初始化,以当前目录babelln/作为网站根目录
function serve(done) {
 server.init({
  server: {
   baseDir: "./"
  }
 });
 done();
}

// 定义需要监控的文件
const watches = [paths.scripts.src, "*.html", paths.css.src];

// 定义watch函数,它监控watches定义的文件,然后顺序执行这些方法
const watch = () => gulp.watch(watches, gulp.series(scripts, sass, reload));

// 再包装一层,整个流程就是清理,编译脚本,编译sass,初始化web服务,启动监控
const dev = gulp.series(clean, scripts, sass, serve, watch);

// 暴露默认方法给外部程序
exports.default = dev;

这个就是根据gulp官方的模板来捏的,最终还算是可以工作。

最后放个效果图^^

编译界面:

Bootstrap4 gulp 配置详解

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery事件机制扩展插件 jquery鼠标右键事件
Dec 21 Javascript
JavaScript常用脚本汇总(一)
Mar 04 Javascript
javascript 动态修改css样式方法汇总(四种方法)
Aug 27 Javascript
jQuery插件实现静态HTML验证码校验
Nov 06 Javascript
Bootstrap基本布局实现方法详解
Nov 25 Javascript
B/S(Web)实时通讯解决方案分享
Apr 06 Javascript
ionic3+Angular4实现接口请求及本地json文件读取示例
Oct 11 Javascript
基于vue.js中关于下拉框的值默认及绑定问题
Aug 22 Javascript
redux.js详解及基本使用
May 24 Javascript
JavaScript写个贪吃蛇小游戏(超详细)
Mar 17 Javascript
vue 使用 vue-pdf 实现pdf在线预览的示例代码
Apr 26 Javascript
js实现扫雷源代码
Nov 27 Javascript
jQuery实现获取当前鼠标位置并输出功能示例
Jan 05 #jQuery
node.js连接mysql与基本用法示例
Jan 05 #Javascript
Node.js Buffer模块功能及常用方法实例分析
Jan 05 #Javascript
Node.js net模块功能及事件监听用法分析
Jan 05 #Javascript
JS无限级导航菜单实现方法
Jan 05 #Javascript
JSON字符串操作移除空串更改key/value的介绍
Jan 05 #Javascript
JavaScript常见事件对象与操作实例总结
Jan 05 #Javascript
You might like
使用array mutisort 实现按某字段对数据排序
2013/06/18 PHP
解析smarty 截取字符串函数 truncate的用法介绍
2013/06/20 PHP
php基于单例模式封装mysql类完整实例
2016/10/18 PHP
PHP基于ORM方式操作MySQL数据库实例
2017/06/21 PHP
php中html_entity_decode实现HTML实体转义
2018/06/13 PHP
Array.slice()与Array.splice()的返回值类型
2006/10/09 Javascript
js 日期转换成中文格式的函数
2009/07/07 Javascript
7个Javascript地图脚本整理
2009/10/20 Javascript
javascript实现Table间隔色以及选择高亮(和动态切换数据)的方法
2015/05/14 Javascript
基于javascript实现泡泡大冒险网页版小游戏
2016/03/23 Javascript
Bootstrap源码学习笔记之bootstrap进度条
2016/12/24 Javascript
JS实现的五级联动菜单效果完整实例
2017/02/23 Javascript
react-native使用react-navigation进行页面跳转导航的示例
2017/09/07 Javascript
JavaScript创建对象的常用方式总结
2018/08/10 Javascript
解决使用bootstrap的dropdown部件时报错:error:Bootstrap dropdown require Popper.js问题
2018/08/30 Javascript
JavaScript多种页面刷新方法小结
2019/04/04 Javascript
Vue实现简单的留言板
2020/10/23 Javascript
[48:52]DOTA2上海特级锦标赛A组小组赛#2 Secret VS CDEC第一局
2016/02/25 DOTA
详解Pytorch 使用Pytorch拟合多项式(多项式回归)
2018/05/24 Python
Python实现App自动签到领取积分功能
2018/09/29 Python
python3 enum模块的应用实例详解
2019/08/12 Python
Python使用tkinter模块实现推箱子游戏
2019/10/08 Python
已安装tensorflow-gpu,但keras无法使用GPU加速的解决
2020/02/07 Python
使用python实现多维数据降维操作
2020/02/24 Python
python中的selenium安装的步骤(浏览器自动化测试框架)
2020/03/17 Python
H5仿微信界面教程(一)
2017/07/05 HTML / CSS
马来西亚领先的在线礼品店:Giftr
2018/08/23 全球购物
美国领先的低折扣旅行网站:Hotwire
2019/01/19 全球购物
C语言中break与continue的区别
2012/07/12 面试题
见习期自我鉴定
2013/11/07 职场文书
外语专业毕业生自荐信
2014/04/14 职场文书
学习党代会心得体会
2014/09/05 职场文书
2014物价局民主生活会对照检查材料思想汇报
2014/09/24 职场文书
2014年街道办事处工作总结
2014/12/11 职场文书
北京英语导游词
2015/02/12 职场文书
公司财务制度:成本管理控制制度模板
2019/11/19 职场文书