最近想寫個(gè)項(xiàng)目,由于之前一直寫后端,很少接觸前端,所以這次來好好學(xué)一下前端??戳讼耏ii框架,它自帶了Bootstrap框架,最開始想的是怎么快速寫個(gè)頁面,哪知道這個(gè)就像剝洋蔥一樣,就剝到了學(xué)習(xí)構(gòu)建工具的階段。
創(chuàng)新互聯(lián)專注于東鄉(xiāng)族企業(yè)網(wǎng)站建設(shè),響應(yīng)式網(wǎng)站開發(fā),購物商城網(wǎng)站建設(shè)。東鄉(xiāng)族網(wǎng)站建設(shè)公司,為東鄉(xiāng)族等地區(qū)提供建站服務(wù)。全流程定制制作,專業(yè)設(shè)計(jì),全程項(xiàng)目跟蹤,創(chuàng)新互聯(lián)專業(yè)和態(tài)度為您提供的服務(wù)
說個(gè)很沮喪的消息,等我把gulp這套工具調(diào)通了后,發(fā)現(xiàn)Github上居然有很多這樣的模板了!廢了我3天時(shí)間來搞這個(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" } }; // 定義清理方法,會刪除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ù),啟動監(jiān)控 const dev = gulp.series(clean, scripts, sass, serve, watch); // 暴露默認(rèn)方法給外部程序 exports.default = dev;
這個(gè)就是根據(jù)gulp官方的模板來捏的,最終還算是可以工作。
最后放個(gè)效果圖^^
編譯界面:
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持創(chuàng)新互聯(lián)。
文章標(biāo)題:Bootstrap4gulp配置詳解
轉(zhuǎn)載注明:http://muchs.cn/article8/pippop.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供外貿(mào)網(wǎng)站建設(shè)、企業(yè)網(wǎng)站制作、微信小程序、網(wǎng)頁設(shè)計(jì)公司、面包屑導(dǎo)航、響應(yīng)式網(wǎng)站
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來源: 創(chuàng)新互聯(lián)