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 相关文章推荐
js 数值项目的格式化函数代码
May 14 Javascript
对xmlHttp对象方法和属性的理解
Jan 17 Javascript
jquery isType() 类型判断代码
Feb 14 Javascript
Ajax 数据请求的简单分析
Apr 05 Javascript
写自已的js类库需要的核心代码
Jul 16 Javascript
JS下拉缓冲菜单示例代码
Aug 30 Javascript
第一次接触神奇的前端框架vue.js
Dec 01 Javascript
JavaScript中数组Array.sort()排序方法详解
Mar 01 Javascript
Vuejs 单文件组件实例详解
Feb 09 Javascript
js自定义trim函数实现删除两端空格功能
Feb 09 Javascript
JS处理一些简单计算题
Feb 24 Javascript
vue项目中引入Sass实例方法
Aug 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
ThinkPHP查询中的魔术方法简述
2014/06/25 PHP
PHP符合PSR编程规范的实例分享
2016/12/21 PHP
thinkPHP框架实现类似java过滤器的简单方法示例
2018/09/05 PHP
javascript 读取xml,写入xml 实现代码
2009/07/10 Javascript
jQuery自动切换/点击切换选项卡效果的小例子
2013/08/12 Javascript
JS下拉缓冲菜单示例代码
2013/08/30 Javascript
jQuery使用prepend()方法在元素前添加内容用法实例
2015/03/26 Javascript
原生JavaScript编写俄罗斯方块
2015/03/30 Javascript
JS利用cookie记忆当前位置的防刷新导航效果
2015/10/15 Javascript
基于JavaScript短信验证码如何实现
2016/01/24 Javascript
jQuery操作属性和样式详解
2016/04/13 Javascript
Vue.js动态组件解析
2016/09/09 Javascript
基于jquery实现的银行卡号每隔4位自动插入空格的实现代码
2016/11/22 Javascript
jQuery实现发送验证码并60秒倒计时功能
2016/11/25 Javascript
echarts饼图扇区添加点击事件的实例
2017/10/16 Javascript
详解Vue项目中实现锚点定位
2019/04/24 Javascript
IDEA安装vue插件图文详解
2019/09/26 Javascript
Vue引入Stylus知识点总结
2020/01/16 Javascript
小程序Scroll-view上拉滚动刷新数据
2020/06/21 Javascript
[01:00:11]DOTA2-DPC中国联赛 正赛 CDEC vs DLG BO3 第一场 2月7日
2021/03/11 DOTA
初学python数组的处理代码
2011/01/04 Python
Python实现视频下载功能
2017/03/14 Python
python中使用正则表达式的连接符示例代码
2017/10/10 Python
python list转置和前后反转的例子
2019/08/26 Python
Python tensorflow实现mnist手写数字识别示例【非卷积与卷积实现】
2019/12/19 Python
Python post请求实现代码实例
2020/02/28 Python
浅谈在django中使用redirect重定向数据传输的问题
2020/03/13 Python
Python字符串格式化f-string多种功能实现
2020/05/07 Python
详解CSS中iconfont的使用
2015/08/04 HTML / CSS
阿拉伯书店:Jamalon
2019/07/24 全球购物
白俄罗斯大卖场:21vek.by
2019/07/25 全球购物
大学生创业项目方案
2014/03/08 职场文书
建议书标准格式
2014/03/12 职场文书
二手房购房意向书范本
2014/04/01 职场文书
关爱留守儿童标语
2014/06/18 职场文书
效能风暴心得体会
2014/09/04 职场文书