มาเตรียมโปรเจคเพื่อพัฒนา Front-end Design ด้วย Bootstrap 4 กันเถอะ

2 min readMar 19, 2018

บทความนี้จะกล่าวถึงการใช้งาน CSS Framework ยอดฮิทที่ชื่อ Bootstrap เวอร์ชั่น 4

Software Require

Node.js

เตรียม Project

เปิดเข้า Terminal เพื่อสร้าง Project และ import Bootstrap 4

$ mkdir bootstrap-4-template
$ cd bootstrap-4-template
$ npm init
....
$ npm install --save bootstrap jquery tether

แล้วสร้าง Folder ให้มีโครงสร้างตามนี้

bootstrap-4-template
--node_modules
--src
----assets
------images
----css
----js
----scss
------custom-bootstrap.scss
------style.scss
----index.html
--gulpfile.js
--package.json

Install Library ที่จะใช้ในการ Run และ Build ระบบ

$npm install -g gulp$npm install --save-dev gulp browser-sync gulp-sass gulp-build gulp-uglify gulp-uglifycss gulp-concat

สร้างหน้าเว็บหลัก

ไฟล์ src/index.html เพิ่มข้อความ

<!DOCTYPE html>
<html lang="en"><head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Bootstrap 4 Template</title>    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">
    <link rel="stylesheet" href="./css/custom-bootstrap.css">
    <link rel="stylesheet" href="./css/style.css">
</head><body>    <script src="./js/jquery.min.js"></script>
    <script src="./js/tether.min.js"></script>
    <script src="./js/bootstrap.min.js"></script>
</body></html>

ไฟล์ src/scss/custom-bootstrap.scss เพิ่มข้อความ

$green: #00FFCA;$primary: $green;$brand-primary: $green;$link-color: $green;$body-bg: #1A1B1D;$font-family-sans-serif: "Raleway", Roboto, "Helvetica Neue", Arial, sans-serif;$spacer: 1rem;@import "node_modules/bootstrap/scss/bootstrap";

ไฟล์ src/scss/styles.scss เป็นไฟล์เปล่า

body{
  background: $primary;
}

ตั้งค่าระบบเพื่อ Run โปรแกรม แบบ Live Preview

ไฟล์ gulpfile.js เพิ่มข้อความ

var gulp = require('gulp')
var browserSync = require('browser-sync').create()
var sass = require('gulp-sass')
var build = require('gulp-build')
var uglify = require('gulp-uglify')
var concat = require('gulp-concat')
var uglifycss = require('gulp-uglifycss')// Compile sass into CSS & auto-inject into browsers
gulp.task('sass', function () {
    return gulp.src(['src/scss/*.scss'])
        .pipe(sass())
        .pipe(gulp.dest('src/css'))
        .pipe(browserSync.stream())
})// Move the javascript files into our /src/js folder
gulp.task('js', function () {
    return gulp.src([
        'node_modules/bootstrap/dist/js/bootstrap.min.js',
        'node_modules/jquery/dist/jquery.min.js',
        'node_modules/tether/dist/js/tether.min.js'])
        .pipe(gulp.dest('src/js'))
        .pipe(browserSync.stream())
})// Build Website for Deploy
gulp.task('build', function () {
    gulp.src('src/*.html')
        .pipe(build({ GA_ID: 'choonewza' }))
        .pipe(gulp.dest('dist'))gulp.src(['src/scss/*.scss'])
        .pipe(sass())
        .pipe(uglifycss({
            "maxLineLen": 80,
            "uglyComments": true
        }))
        .pipe(build({ GA_ID: 'choonewza' }))
        .pipe(gulp.dest('dist/css'))gulp.src([
        'node_modules/bootstrap/dist/js/bootstrap.min.js',
        'node_modules/jquery/dist/jquery.min.js',
        'node_modules/tether/dist/js/tether.min.js',
        'src/js/*.js'])
        //.pipe(uglify())
        .pipe(build({ GA_ID: 'choonewza' }))
        .pipe(gulp.dest('dist/js'))gulp.src('src/assets/**/*.*')
        .pipe(gulp.dest('dist/assets'))});// Static Server + watching scss/html files
gulp.task('serve', ['sass'], function () {
    browserSync.init({
        server: "./src"
    });
    gulp.watch(['src/scss/*.scss'], ['sass'])
    gulp.watch(["src/*.html","src/js/*.js"]).on('change', browserSync.reload);
})gulp.task('default', ['js', 'serve'])

Run Server

$ gulp

Chrome Browser

http://localhost:3000

…เพียงเท่านี้ก็ จบการเตรียม Project เพื่อนำไปใช้ทำ Front-end Design แล้ว

Source Code (by Udemy that Learn Bootstrap 4 by Example Course)

https://github.com/choonewza/example-bootstrap-4