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

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

Software Require

  1. 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