Cách cấu hình Gulp và Browser-sync cho project

2021-08-23 1460 lượt xem

Mục lục [ hide ]

Trước tiên nếu bạn nào chưa biết gulp là gì : https://ebudezain.com/gulp-cho-nguoi-moi-bat-dau-gulp-for-beginner#gulp-l%C3%A0-g%C3%AC

Mình cũng có nói về : minify CSS và tự động compile js Preprocesing

Bài chia template này giúp bạn chia đc header foooter

Browser-sync là gì?

BrowserSync là một công cụ hỗ trợ giúp phát triển web nhanh hơn với khả năng đồng bộ hóa kiểm thử, thể hiện tương tác người dùng trên nhiều trình duyệt và thiết bị cùng lúc.

BrowserSync hoạt động như thế nào?

BrowserSync tạo một server nhỏ, nếu bạn đã có cài đặt server từ trước thì BrowserSync có thể hoạt động như một proxy với server đó. Tiếp đó nó inject javascript vào thẻ <body> của các trang nhờ đó những trang này có thể giao tiếp với server thông qua WebSockets. Sự liên lạc này dùng để theo dõi những thay đổi code từ server và thao tác người dùng ở phía client.

Cài đặt BrowserSync cùng với Gulp

Install gulp

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
npm install browser-sync --save-dev

Cấu trúc project


PROJECTS
    |- dist
    |- src
    |   |- javascript
    |   |   |- app.js
    |   |- pages
    |   |   |- index.html
    |   |   |- about.html
    |   |- scss
    |   |   |- index.scss
    |   |   |- about.scss
    |- package.json
    |- gulpfile.js

Đầu tiên là folder src là nơi làm việc. Mình có thêm cả thư mục scss vào để demo việc css khi được build lại cũng sẽ stream lên trình duyệt
Thứ hai là folder dist là nơi chứa các file html thành phẩm.

Cấu hình gulpfile.js

xem code doc của browsersync

Mình đưa ra code mẫu khởi tạo trong document của browsersync như sau:

var gulp        = require('gulp');
// đầu tiên hãy tạo 1 thể hiện của browserSync
var browserSync = require('browser-sync').create();
// Static server ( đây là đoạn code mẫu để setup ban đầu cho browserSync )
// đoạn setup ban đầu này mục đích là setup cho file html chạy không thông qua server ảo nào cả ( không thông qua xampp, nginx, ... )
gulp.task('browser-sync', function() {
    browserSync.init({
        server: {
            baseDir: "./"
        }
    });
});
// or...( đây cũng là đoạn code mẫu để setup ban đầu cho browserSync )
// đoạn setup ban đầu này mục đích là setup cho html đã thông qua server ảo được giả lập với domain ảo: domain.dev ( thông qua xampp, nginx, ... )
gulp.task('browser-sync', function() {
    browserSync.init({
        proxy: "domain.dev"
    });
});

Thiết lập code browsersync cho project của mình

var gulp        = require('gulp');
// đầu tiên hãy tạo 1 thể hiện của browserSync
var browserSync = require('browser-sync').create();

// Watch Files: nghĩa là khi những file thuộc folder pages và có đuôi .html thay đổi 
/// => code thì sẽ build lại code với task fileinclude
gulp.task('watch', function () {
    browserSync.init({
        server: {
            // như này là browserSync tự tạo cho chúng ta 1 con server (dạng như localhost:3000) 
            // đồng thời con server này cấp thư mục là project
            // code của chúng ta là PROJECTS/src/page/index.html => localhost:3000/src/page/index.html sẽ thấy
            baseDir: "./" 
        }
    });
    gulp.watch([
        /// cấu hình này là khi file có đuôi .html trong folder src/pages/ bị thay đổi thì code sẽ được cập nhật mới lên trình duyệt ngay
        // code sẽ dùng tính năng reload
        "src/pages/*.html",
    ]).on("change", browserSync.reload )
});

và khi đó chúng ta có kết quả như sau :

Tương tự thì chúng ta có thể làm cho khi js thay đổi thì reload lại trang Khi đó gulpfile.js sẽ tựa tựa vầy:

var gulp        = require('gulp');
// đầu tiên hãy tạo 1 thể hiện của browserSync
var browserSync = require('browser-sync').create();

// Watch Files: nghĩa là khi những file thuộc folder pages và có đuôi .html thay đổi 
/// => code thì sẽ build lại code với task fileinclude
gulp.task('watch', function () {
    browserSync.init({
        server: {
            // như này là browserSync tự tạo cho chúng ta 1 con server (dạng như localhost:3000) 
            // đồng thời con server này cấp thư mục là project
            // code của chúng ta là PROJECTS/src/page/index.html => localhost:3000/src/page/index.html sẽ thấy
            baseDir: "./" 
        }
    });
    gulp.watch([
        /// cấu hình này là khi file có đuôi .html trong folder src/pages/ bị thay đổi thì code sẽ được cập nhật mới lên trình duyệt ngay
        // code sẽ dùng tính năng reload
        "src/pages/*.html",
    ]).on("change", browserSync.reload )
    gulp.watch([
        /// cấu hình này là khi file có đuôi .js trong folder src/javasctipt/ bị thay đổi thì code sẽ được cập nhật mới lên trình duyệt ngay
        // code sẽ dùng tính năng reload
        "src/javascript/*.js",
    ]).on("change", browserSync.reload )
});

Khi scss thay đổi thì chúng ta cần thêm thư viện để build scss qua css

Để làm được như vậy chúng ta cần thêm thư viện cần thiết:

npm install sass gulp-sass

Thêm task sass để biên dịch file scss

var sass       = require('gulp-sass')(require('sass'));

gulp.task('sass', function () {
    return gulp.src('src/scss/*.scss')
       .pipe(sass())
       .pipe(gulp.dest(path.join(__dirname, 'src/css')))
       .pipe(browserSync.stream({match: '**/*.css'}))
 });

đây là code file gulpfile.js

var gulp        = require('gulp');
var path        = require('path');
var sass       = require('gulp-sass')(require('sass'));
// đầu tiên hãy tạo 1 thể hiện của browserSync
var browserSync = require('browser-sync').create();

gulp.task('sass', function () {
    return gulp.src('src/scss/*.scss')
       .pipe(sass())
       .pipe(gulp.dest(path.join(__dirname, 'src/css')))
       .pipe(browserSync.stream({match: '**/*.css'}))
 });

// Watch Files: nghĩa là khi những file thuộc folder pages và có đuôi .html thay đổi 
/// => code thì sẽ build lại code với task fileinclude
gulp.task('watch', function () {
    browserSync.init({
        server: {
            // như này là browserSync tự tạo cho chúng ta 1 con server (dạng như localhost:3000) 
            // đồng thời con server này cấp thư mục là project
            // code của chúng ta là PROJECTS/src/page/index.html => localhost:3000/src/page/index.html sẽ thấy
            baseDir: "./" 
        }
    });
    /// cấu hình html
    gulp.watch([
        /// cấu hình này là khi file có đuôi .html trong folder src/pages/ bị thay đổi thì code sẽ được cập nhật mới lên trình duyệt ngay
        // code sẽ dùng tính năng reload
        "src/pages/*.html",
    ]).on("change", browserSync.reload )
    /// cấu hình cho js
    gulp.watch([
        /// cấu hình này là khi file có đuôi .js trong folder src/javasctipt/ bị thay đổi thì code sẽ được cập nhật mới lên trình duyệt ngay
        // code sẽ dùng tính năng reload
        "src/javascript/*.js",
    ]).on("change", browserSync.reload )
    /// cấu hình cho scss
    gulp.watch([
        /// cấu hình này là khi file có đuôi .js trong folder src/javasctipt/ bị thay đổi thì code sẽ được cập nhật mới lên trình duyệt ngay
        // code sẽ dùng tính năng reload
        "src/scss/*.scss",
    ],  gulp.series('sass'))
});

Và đây là kết quả: