Bootstrap 4 gulp 配置

共计 1928 个字符，预计需要花费 5 分钟才能阅读完成。

最近想写个项目，由于之前一直写后端，很少接触前端，所以这次来好好学一下前端。看了下 Yii 框架，它自带了 Bootstrap 框架，最开始想的是怎么快速写个页面，哪知道这个就像剥洋葱一样，就剥到了学习构建工具的阶段。
说个很沮丧的消息，等我把 gulp 这套工具调通了后，发现 Github 上居然有很多这样的模板了！废了我 3 天时间来搞这个东西。给个关键词：bootstrap 4 gulp boilerplate。额，以及还有一个网站，这是我读完 bootstrap 的文档后发现的：https://vanillajstoolkit.com/…。
在项目目录下的 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 官方的模板来捏的，最终还算是可以工作。
最后放个效果图 ^^
编译界面：