Bootstrap4 gulp配置详解

最近想写一个项目。由于之前一直写后端，很少接触前端，所以这次来学习前端。看了Yii框架，它自带了Bootstrap框架。一开始我想着如何快速写出一个页面，却不知道这就像剥洋葱一样，到了学习构建工具的阶段。

我有一个非常令人沮丧的消息。我调整gulp工具集后，发现Github上有很多这样的模板！我花了3天时间才完成这件事。给我一个关键字：bootstrap 4 gulp 样板。好吧，还有一个网站，我在阅读引导文档后找到的：https://www.sychzs.cn/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("浏览器同步");
const sassCompile = require("gulp-sass");
const 服务器 = browserSync.create();

常量路径 = {
 脚本：{
  src: "src/scripts/*.js",
  目标：“分布/脚本”
 },
 CSS：{
  src: "src/scss/*.scss",
  目标：“dist/css”
 }
};

// 定义cleanup方法，该方法将删除dist目录
const clean = () => del(["dist"]);

// 定义需要复制到dist目录的文件。一般APP最终用到的JS、CSS文件都在这个目录下。
const 脚本文件 = [
 路径.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文件时使用
// 函数脚本() {
// 返回 gulp.src(paths.scripts.src, { sourcemaps: true })
// .pipe(巴别塔())
// .pipe(uglify())
// .pipe(concat('index.min.js'))
// .pipe(gulp.dest(paths.scripts.dest));
// }

//将源代码文件复制到目的地，中间可以添加其他处理程序
函数脚本() {
 返回 gulp.src(scriptFiles).pipe(gulp.dest(paths.scripts.dest));
}

//重启网络服务
函数重新加载（完成）{
 服务器.reload();
 完毕（）;
}

// 编译sass文件并在dist/css目录下生成结果文件
函数 sass() {
 返回吞咽
  .src(["node_modules/bootstrap/scss/bootstrap.scss", paths.css.src])
  .pipe(sassCompile())
  .pipe(gulp.dest(paths.css.dest));
}

//服务初始化，使用当前目录babelln/作为网站根目录
函数服务（完成）{
 服务器.init({
  服务器： {
   基目录：“./”
  }
 });
 完毕（）;
}

//定义需要监控的文件
const watch = [paths.scripts.src, "*.html", paths.css.src];//定义watch函数，监听watch定义的文件，然后依次执行这些方法
const watch = () => www.sychzs.cn(watches, gulp.series(scripts, sass, reload));

// 又一层包装，整个流程就是清理、编译脚本、编译sass、初始化web服务、启动监控
const dev = gulp.series(干净、脚本、sass、服务、观看);

// 向外部程序公开默认方法
出口.默认= dev;

这是基于官方的gulp模板，终于可以工作了。

最后放个效果图^^

编译界面：

以上就是本文的全部内容。希望对大家的学习有所帮助，也希望大家支持来客网。