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

说个很沮丧的消息，等我把gulp这套工具调通了后，发现Github上居然有很多这样的模板了！废了我3天时间来搞这个东西。给个关键词：bootstrap 4 gulp boilerplate。额，以及还有一个网站，这是我读完bootstrap的文档后发现的：。

在项目目录下的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官方的模板来捏的，最终还算是可以工作。

最后放个效果图^^

编译界面：