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 相关文章推荐
JavaScript 面向对象的 私有成员和公开成员
May 13 Javascript
jBox 2.3基于jquery的最新多功能对话框插件 常见使用问题解答
Nov 10 Javascript
检测input每次的输入是否合法遇到汉字输入就有问题
May 23 Javascript
Javascript delete 引用类型对象
Nov 01 Javascript
javascript实现的简单的表单验证
Jul 10 Javascript
异步JavaScript编程中的Promise使用方法
Jul 28 Javascript
快速使用node.js进行web开发详解
Apr 26 Javascript
vue服务端渲染页面缓存和组件缓存的实例详解
Sep 18 Javascript
使用JavaScript破解web
Sep 28 Javascript
Electron + vue 打包桌面操作流程详解
Jun 24 Javascript
vue中使用百度脑图kityminder-core二次开发的实现
Sep 26 Javascript
js实现3D照片墙效果
Oct 28 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
php单件模式结合命令链模式使用说明
2008/09/07 PHP
使用Linux五年积累的一些经验技巧
2013/06/20 PHP
IIS下PHP的三种配置方式对比
2014/11/20 PHP
PHP实现根据数组某个键值大小进行排序的方法
2018/03/13 PHP
火狐浏览器(firefox)下获得Event对象以及keyCode
2008/11/13 Javascript
javascript 在网页中的运用(asp.net)
2009/11/23 Javascript
js中巧用cssText属性批量操作样式
2011/03/13 Javascript
javascript函数中参数传递问题示例探讨
2014/07/31 Javascript
浅谈Sublime Text 3运行JavaScript控制台
2016/06/06 Javascript
JavaScript实现隐藏省略文字效果的方法
2017/04/27 Javascript
xmlplus组件设计系列之路由(ViewStack)(7)
2017/05/02 Javascript
Vue 中的compile操作方法
2018/02/26 Javascript
浅谈angular4.0中路由传递参数、获取参数最nice的写法
2018/03/12 Javascript
[33:28]完美世界DOTA2联赛PWL S3 PXG vs GXR 第三场 12.19
2020/12/24 DOTA
跟老齐学Python之有容乃大的list(2)
2014/09/15 Python
Linux系统上Nginx+Python的web.py与Django框架环境
2015/12/25 Python
python logging日志模块以及多进程日志详解
2018/04/18 Python
Python退火算法在高次方程的应用
2018/07/26 Python
python无限生成不重复(字母,数字,字符)组合的方法
2018/12/04 Python
python进行TCP端口扫描的实现
2018/12/21 Python
numpy.ndarray 实现对特定行或列取值
2019/12/05 Python
将python包发布到PyPI和制作whl文件方式
2019/12/25 Python
TensorFlow通过文件名/文件夹名获取标签,并加入队列的实现
2020/02/17 Python
详解如何在pyqt中通过OpenCV实现对窗口的透视变换
2020/09/20 Python
Biblibili视频投稿接口分析并以Python实现自动投稿功能
2021/02/05 Python
HTML5打开手机扫码功能及优缺点
2017/11/27 HTML / CSS
canvas实现按住鼠标移动绘制出轨迹的示例代码
2018/02/05 HTML / CSS
英国最全面的橄榄球联盟门票网站:Live Rugby Tickets
2018/10/06 全球购物
最经典的大学生职业生涯规划范文
2014/03/05 职场文书
人事行政专员岗位职责
2014/07/23 职场文书
鸟的天堂导游词
2015/01/31 职场文书
后勤个人工作总结
2015/02/28 职场文书
培训通知书模板
2015/04/17 职场文书
美丽的大脚观后感
2015/06/03 职场文书
一文搞清楚MySQL count(*)、count(1)、count(col)区别
2022/03/03 MySQL
十大最强飞行系宝可梦,BUG燕上榜,第二是飞行系王者
2022/03/18 日漫