Bootstrap 4 gulp 配置

冉五五

最近想写个项目,由于之前一直写后端,很少接触前端,所以这次来好好学一下前端。看了下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官方的模板来捏的,最终还算是可以工作。

最后放个效果图^^

编译界面:

clipboard.png

阅读 2.1k

冉五五的开发日志
主要是后端开发相关,只谈技术。
60 声望
2 粉丝
0 条评论
60 声望
2 粉丝
文章目录
宣传栏