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 相关文章推荐
你的编程语言可以这样做吗?
Sep 07 Javascript
事件委托与阻止冒泡阻止其父元素事件触发
Sep 02 Javascript
JavaScript显示当前文档最后修改日期的方法
Mar 19 Javascript
JavaScript通过Date-Mask将日期转换成字符串的方法
Jun 04 Javascript
JavaScript前端开发之实现二进制读写操作
Nov 04 Javascript
javascript实现的网站访问量统计代码
Dec 20 Javascript
AngularJS框架的ng-app指令与自动加载实现方法分析
Jan 04 Javascript
JS批量替换内容中关键词为超链接
Feb 20 Javascript
超简单的Vue.js环境搭建教程
Mar 17 Javascript
Vue学习之组件用法实例详解
Jan 06 Javascript
Node.js API详解之 Error模块用法实例分析
May 14 Javascript
解决vue cli4升级sass-loader(v8)后报错问题
Jul 30 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
CPU步进是什么意思?i3-9100F B0步进和U0步进区别知识科普
2020/03/17 数码科技
PHP 数组实例说明
2008/08/18 PHP
创建配置文件 用PHP写出自己的BLOG系统 2
2010/04/12 PHP
php操作SVN版本服务器类代码
2011/11/27 PHP
PHP+MySQL插入操作实例
2015/01/21 PHP
PHP结合jQuery插件ajaxFileUpload实现异步上传文件实例
2020/08/17 PHP
PHP递归实现汉诺塔问题的方法示例
2017/11/25 PHP
jQuery Ajax 实例全解析
2011/04/20 Javascript
JavaScript的事件绑定(方便不支持js的时候)
2013/10/01 Javascript
JavaScript控制listbox列表框的项目上下移动的方法
2015/03/18 Javascript
js实现类似jquery里animate动画效果的方法
2015/04/10 Javascript
nodejs创建web服务器之hello world程序
2015/08/20 NodeJs
Bootstrap框架下下拉框select搜索功能
2020/03/26 Javascript
vue.js学习之递归组件
2016/12/13 Javascript
原生js实现旋转木马轮播图效果
2017/02/27 Javascript
详解AngularJs HTTP响应拦截器实现登陆、权限校验
2017/04/11 Javascript
在NPM发布自己造的轮子的方法步骤
2019/03/09 Javascript
JavaScript刷新页面的几种方法总结
2019/03/28 Javascript
实用的Vue开发技巧
2019/05/30 Javascript
jQuery/JS监听input输入框值变化实例
2019/10/17 jQuery
JS中准确判断变量类型的方法
2020/06/01 Javascript
[54:29]2018DOTA2亚洲邀请赛 4.7 淘汰赛 VP vs LGD 第二场
2018/04/09 DOTA
python 中的divmod数字处理函数浅析
2017/10/17 Python
python 字典 按key值大小 倒序取值的实例
2018/07/06 Python
Python内置类型性能分析过程实例
2020/01/29 Python
Python开发.exe小工具的详细步骤
2021/01/27 Python
CSS3 Flex 弹性布局实例代码详解
2018/11/01 HTML / CSS
Craghoppers德国官网:户外和旅行服装
2020/02/14 全球购物
Pamela Love官网:纽约设计师Pamela Love的精美、时尚和穿孔珠宝
2020/10/19 全球购物
活动总结怎么写
2014/04/28 职场文书
巾帼建功标兵事迹材料
2014/05/11 职场文书
年会主持人开场白台词
2015/05/29 职场文书
2016年少先队活动总结
2016/04/06 职场文书
Golang 字符串的常见操作
2022/04/19 Golang
Nginx安装配置详解
2022/06/25 Servers
JS实现九宫格拼图游戏
2022/06/28 Javascript