欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Bootstrap4 gulp 配置詳解

 更新時(shí)間:2019年01月06日 10:10:43   作者:冉五五  
這篇文章主要介紹了Bootstrap4 gulp 配置詳解,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧

最近想寫(xiě)個(gè)項(xiàng)目,由于之前一直寫(xiě)后端,很少接觸前端,所以這次來(lái)好好學(xué)一下前端。看了下Yii框架,它自帶了Bootstrap框架,最開(kāi)始想的是怎么快速寫(xiě)個(gè)頁(yè)面,哪知道這個(gè)就像剝洋蔥一樣,就剝到了學(xué)習(xí)構(gòu)建工具的階段。

說(shuō)個(gè)很沮喪的消息,等我把gulp這套工具調(diào)通了后,發(fā)現(xiàn)Github上居然有很多這樣的模板了!廢了我3天時(shí)間來(lái)搞這個(gè)東西。給個(gè)關(guān)鍵詞:bootstrap 4 gulp boilerplate。額,以及還有一個(gè)網(wǎng)站,這是我讀完bootstrap的文檔后發(fā)現(xiàn)的:https://vanillajstoolkit.com/plugins/

在項(xiàng)目目錄下的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"
 }
};

// 定義清理方法,會(huì)刪除dist目錄
const clean = () => del(["dist"]);

// 定義需要拷貝到dist目錄的文件,一般APP最終使用的JS和CSS文件在這個(gè)目錄中
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文件的時(shí)候使用
// 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));
// }

// 將源代碼文件復(fù)制到目的地,中間可以加入其他處理程序
function scripts() {
 return gulp.src(scriptFiles).pipe(gulp.dest(paths.scripts.dest));
}

// 重啟web服務(wù)
function reload(done) {
 server.reload();
 done();
}

// 編譯sass文件,在dist/css目錄產(chǎn)生結(jié)果文件
function sass() {
 return gulp
  .src(["node_modules/bootstrap/scss/bootstrap.scss", paths.css.src])
  .pipe(sassCompile())
  .pipe(gulp.dest(paths.css.dest));
}

// 服務(wù)初始化,以當(dāng)前目錄babelln/作為網(wǎng)站根目錄
function serve(done) {
 server.init({
  server: {
   baseDir: "./"
  }
 });
 done();
}

// 定義需要監(jiān)控的文件
const watches = [paths.scripts.src, "*.html", paths.css.src];

// 定義watch函數(shù),它監(jiān)控watches定義的文件,然后順序執(zhí)行這些方法
const watch = () => gulp.watch(watches, gulp.series(scripts, sass, reload));

// 再包裝一層,整個(gè)流程就是清理,編譯腳本,編譯sass,初始化web服務(wù),啟動(dòng)監(jiān)控
const dev = gulp.series(clean, scripts, sass, serve, watch);

// 暴露默認(rèn)方法給外部程序
exports.default = dev;

這個(gè)就是根據(jù)gulp官方的模板來(lái)捏的,最終還算是可以工作。

最后放個(gè)效果圖^^

編譯界面:

以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。

相關(guān)文章

最新評(píng)論