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复选框CHECKBOX全选,取消全选
Aug 30 Javascript
显示js对象所有属性和方法的函数
Oct 16 Javascript
简单的前端js+ajax 购物车框架(入门篇)
Oct 29 Javascript
javascript一元操作符(递增、递减)使用示例
Aug 07 Javascript
用Js实现的动态增加表格示例自己写的
Oct 21 Javascript
jQuery滚动新闻实现代码
Jun 26 Javascript
全面了解javascript三元运算符
Jun 27 Javascript
AngularJS 中使用Swiper制作滚动图不能滑动的解决方法
Nov 15 Javascript
使用Angular自定义字段校验指令的方法示例
Feb 01 Javascript
解决layui中onchange失效以及form动态渲染失效的问题
Sep 27 Javascript
Vue 实现创建全局组件,并且使用Vue.use() 载入方式
Aug 11 Javascript
vue中控制mock在开发环境使用,在生产环境禁用方式
Apr 06 Vue.js
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
全国FM电台频率大全 - 2 天津市
2020/03/11 无线电
php 类自动载入的方法
2015/06/03 PHP
Laravel5.3+框架定义API路径取消CSRF保护方法详解
2020/04/06 PHP
windows系统php环境安装swoole具体步骤
2021/03/04 PHP
如何在Mozilla Gecko 用Javascript加载XSL
2007/01/09 Javascript
JavaScript基本对象
2007/01/11 Javascript
javascript检测浏览器flash版本的实现代码
2011/12/06 Javascript
js计算精度问题小结
2013/04/22 Javascript
js左侧三级菜单导航实例代码
2013/09/13 Javascript
js实现字符串的16进制编码不加密
2014/04/25 Javascript
jQuery下拉友情链接美化效果代码分享
2015/08/26 Javascript
jquery模拟实现鼠标指针停止运动事件
2016/01/12 Javascript
关于JavaScript限制字数的输入框的那些事
2016/08/14 Javascript
微信JS接口大全
2016/08/25 Javascript
理解Koa2中的async&await的用法
2018/02/05 Javascript
vuex actions传递多参数的处理方法
2018/09/18 Javascript
JS+CSS实现随机点名(实例代码)
2019/11/04 Javascript
ElementUI 修改默认样式的几种办法(小结)
2020/07/29 Javascript
[57:55]EG vs Fnatic 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
[01:39:04]DOTA2-DPC中国联赛 正赛 SAG vs CDEC BO3 第二场 2月1日
2021/03/11 DOTA
Python常用随机数与随机字符串方法实例
2015/04/09 Python
python读写ini配置文件方法实例分析
2015/06/30 Python
python 转换 Javascript %u 字符串为python unicode的代码
2016/09/06 Python
numpy.transpose对三维数组的转置方法
2018/04/17 Python
python 执行文件时额外参数获取的实例
2018/12/18 Python
Python callable内置函数原理解析
2020/03/05 Python
解决Jupyter NoteBook输出的图表太小看不清问题
2020/04/16 Python
Selenium webdriver添加cookie实现过程详解
2020/08/12 Python
自荐信怎么写好
2013/11/11 职场文书
鸿星尔克广告词
2014/03/21 职场文书
酒店仓管员岗位职责
2015/04/01 职场文书
电影圆明园观后感
2015/06/03 职场文书
永远是春天观后感
2015/06/12 职场文书
2019预备党员转正申请书模板2篇!
2019/08/07 职场文书
解决Vue+SpringBoot+Shiro跨域问题
2021/06/09 Vue.js
mysql 直接拷贝data 目录下文件还原数据的实现
2021/07/25 MySQL