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 学习笔记(十三)Dom创建表格
Jan 21 Javascript
ASP.NET中基于JQUERY的高性能的TreeView补充
Feb 23 Javascript
Js中setTimeout()和setInterval() 何时被调用执行的用法
Apr 12 Javascript
node+express+ejs制作简单页面上手指南
Nov 26 Javascript
4种JavaScript实现简单tab选项卡切换的方法
Jan 06 Javascript
Bootstrap教程JS插件滚动监听学习笔记分享
May 18 Javascript
AngularJS  ng-table插件设置排序
Sep 21 Javascript
微信小程序 教程之注册页面
Oct 17 Javascript
详解使用angular-cli发布i18n多国语言Angular应用
May 20 Javascript
vue中vee validate表单校验的几种基本使用
Jun 25 Javascript
详解vue项目中实现图片裁剪功能
Jun 07 Javascript
深入解析微信小程序开发中遇到的几个小问题
Jul 11 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 SPL使用方法和他的威力
2013/11/12 PHP
destoon官方标签大全
2014/06/20 PHP
php几个预定义变量$_SERVER用法小结
2014/11/07 PHP
php制作动态随机验证码
2015/02/12 PHP
在WordPress中使用wp-cron插件来设置定时任务
2015/12/10 PHP
PHP的Laravel框架中使用AdminLTE模板来编写网站后台界面
2016/03/21 PHP
javascript 当前日期加(天、周、月、年)
2009/08/09 Javascript
JQuery.uploadify 上传文件插件的使用详解 for ASP.NET
2010/01/22 Javascript
Javascript执行效率全面总结
2013/11/04 Javascript
详解Javascript模板引擎mustache.js
2016/01/20 Javascript
vue.js表格组件开发的实例详解
2016/10/12 Javascript
js代码延迟一定时间后执行一个函数的实例
2017/02/15 Javascript
js异步编程小技巧详解
2017/08/14 Javascript
BootStrap中Table隐藏后显示问题的实现代码
2017/08/31 Javascript
详解ajax的data参数错误导致页面崩溃
2018/04/30 Javascript
vue axios 给生产环境和发布环境配置不同的接口地址(推荐)
2018/05/08 Javascript
Vue 让元素抖动/摆动起来的实现代码
2018/05/31 Javascript
详解Nodejs mongoose
2018/06/10 NodeJs
jQuery阻止事件冒泡实例分析
2018/07/03 jQuery
vue项目中添加单元测试的方法
2018/07/21 Javascript
新手如何快速理解js异步编程
2019/06/24 Javascript
Node.js中的异步生成器与异步迭代详解
2021/01/31 Javascript
[00:43]魔廷新尊——痛苦女王至宝捆绑包
2020/06/12 DOTA
对于Python中线程问题的简单讲解
2015/04/03 Python
python基础入门学习笔记(Python环境搭建)
2016/01/13 Python
更改Ubuntu默认python版本的两种方法python-> Anaconda
2016/12/18 Python
python中的数据结构比较
2019/05/13 Python
Python获取当前脚本文件夹(Script)的绝对路径方法代码
2019/08/27 Python
浅析pip安装第三方库及pycharm中导入第三方库的问题
2020/03/10 Python
python asyncio 协程库的使用
2021/01/21 Python
html5中svg canvas和图片之间相互转化思路代码
2014/01/24 HTML / CSS
Otticanet意大利:最顶尖的世界名牌眼镜, 能得到打折季的价格
2019/03/10 全球购物
竞选大学学委演讲稿
2014/09/13 职场文书
消防宣传语大全
2015/07/13 职场文书
写作技巧:怎样写好一份优秀工作总结?
2019/08/14 职场文书
Python pygame实现中国象棋单机版源码
2021/06/20 Python