Chia teamplate html sử dụng gulp header footer layout

2021-08-20 1488 lượt xem

Trương thịnh

Mục lục [ hide ]

Nếu bạn không biết tại sao có bài này : Có cách nào phân chia layout trong html - include file header footer html

Để giải quyết vấn đề include hôm nay mình sẽ hướng dẫn các bạn một cách đơn giản đó là sử dụng gulp-file-include để build template cho project frontend.
https://www.npmjs.com/package/gulp-file-include

Install

npm install gulp -g

Sau khi cài đặt xong Gulp. Mình sẽ tạo một project mẫu tên là PROJECTS.
Như với các project khác, đầu tiên chúng ta sẽ khởi tạo file package.json, và các thư viện đi kèm với lệnh sau:

npm init
npm install gulp gulp-file-include --save

Cấu trúc project

PROJECTS
    |- dist
    |- src
    |   |- pages
    |   |   |- index.html
    |   |   |- about.html
    |   |- partial
    |   |   |- header.html
    |   |   |- footer.html
    |- package.json
    |- gulpfile.js

Đầu tiên là folder src là nơi làm việc. Sau này nếu có code Sass hoặc es6 thì cũng tạo folder trong src nhé.
Thứ hai là folder dist là nơi chứa các file html thành phẩm.

Cấu hình gulpfile.js

var gulp        = require('gulp')
var path        = require('path')
var fileinclude = require('gulp-file-include')

gulp.task('fileinclude', function() {
    return gulp.src([ "src/pages/*.html" ])
        .pipe(fileinclude({
            prefix: '@@',
            basepath: '@file'
        }))
       .pipe(gulp.dest(path.join(__dirname, '/dist/pages/')))
})
// Watch Files: nghĩa là khi những file thuộc folder pages hoặc partial và có đuôi .html thay đổi 
/// => code thì sẽ build lại code với task fileinclude
gulp.task('watch', function () {
    gulp.watch('src/pages/*.html', gulp.series('fileinclude'))
    gulp.watch('src/partial/*.html', gulp.series('fileinclude'))
});

file chính sẽ chạy index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Đây là trang chủ</title>
</head>
<body>
    @@include('../partial/header.html')
    <div>
        đây là phần nội dung file index
    </div>
    @@include('../partial/footer.html')
</body>
</html>

tiếp theo là file about.html cũng có nội dung giống giống file index

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Đây là trang thông tin chúng tôi</title>
</head>
<body>
    @@include('../partial/header.html')
    <div> about </div>
    @@include('../partial/footer.html')
</body>
</html>

và file bạn muốn include vào là partial/header.html

<header>
    đây là header
</header>

và file bạn muốn include vào là partial/footer.html

<footer>
    đây là footer
</footer>

Dĩ nhiên để chạy nó thì bạn có thể chạy dưới command line với lệnh sau:

gulp watch 
# hoặc nếu bạn chỉ muốn thực thi code thì chạy 
gulp fileinclude

hình ảnh code và kết quả:

chủ đề

kiến thức front-end

2021-01-03

Chủ đề này chuyên nói về kiến thức front end.

những tag

front-end developer

2020-09-13

excerpt front-end developer

bài viết trong chủ đề

Có cách nào phân chia layout trong html - include file header footer html

Ebudezain

Trong Bài trước mình có hướng dẫn các bạn nhiều cách để chia layout header footer trong html. Trong đó có gulp là mình thích nhất. bài này mình hướng dẫn bạn dùng gulp inlude file html

Chia teamplate html sử dụng gulp header footer layout

Install

Cấu trúc project

Cấu hình gulpfile.js

file chính sẽ chạy index.html

2021-01-03

2020-09-13

2021-08-20

2021-01-19

2022-02-09

2021-01-07

2021-01-25

2021-01-25

2021-08-23

2021-01-26

2021-11-12

2021-08-24

2021-01-26

2022-04-11

2021-01-26

2020-10-10

2020-12-30

2020-10-19

2020-10-10

2021-07-06

2020-11-06

2021-01-02

2021-08-23

2021-03-01

2020-09-30

2020-12-17

2021-07-20

Ebudezain blog - chia sẽ kiến thức lập trình

0674, Xã Bình Giã,Huyện Châu Đức Tỉnh Bà Rịa - Vũng Tàu,Việt Nam