Sử dụng GULP để auto refresh browser và minify (css, js, image)

[ozuit]

Giới thiệu về gulp

• Gulp là một bộ task runner giúp chúng ta tự động hoá một số thao tác thường gặp trong quá trình làm việc, ví dụ: refresh browser, compile và kiểm lỗi các file javascript, minify các file javascript, css, nén ảnh để đưa lên môi trường production,…
• Gulp khá giống với batch/bash script trên Windows và Unix/Linux/Mac. Có nghĩa là chúng ta chỉ cần tạo ra một file gulp với các task khai báo bên trong và sau đó chỉ cần chạy file này là mội việc lằng nhằng ở trên sẽ được giải quyết một cách tự động, nhờ vào nguồn plugin phong phú từ cộng đồng.

Hướng dẫn cài đặt và sử dụng gulp

Cài đặt Npm

• Để sử dụng Gulp, máy tính cần phải được cài đặt node.js và npm. Các bạn có thể download node.js theo địa chỉ sau: https://nodejs.org/en/download/
• Khi cài đặt node.js thì công cụ quản lý packages npm cũng được cài đặt theo, nên ta không cần phải cài đặt thêm.

Cài đặt Gulp

• Ta cần cài đặt Gulp thông qua npm ở cả global:
  npm install gulp -g
  và trong thư mục của dự án:
  npm install gulp --save-dev
• Bước cài đặt global chỉ cần làm 1 lần duy nhất trên 1 máy tính. Còn bước cài đặt trong thư mục dự án thì bắt buộc cài khi tạo một dự án mới.
• Để sử dụng Gulp trong một dự án, bạn chỉ cần tạo ra file gulpfile.js và lưu trong thư mục gốc. Một file gulpfile.js sẽ chứa nhiều task thực hiện các công việc khác nhau mà ta đã chỉ định trước. Nội dung một file gulpfile.js cơ bản như sau:

var gulp = require('gulp');
gulp.task('default', function(){
   // Default task code
});
gulp.task('tên-task', function() {
   // xử lý task 
});

• Mặc định khi chạy lệnh gulp trong command line không kèm theo tham số nào, gulp sẽ tự động chạy task mặc định là default. Khi muốn chạy một task cụ thể nào đó, ta gõ lệnh: gulp tên-task

Hướng dẫn sử dụng module browser-sync để tạo auto refresh browser

• Module này có chức năng tự động refresh lại trình duyệt ngay sau khi bạn sửa đổi các file javascript, css hay html trong dự án.
• Ta tiến hành cài đặt module browser-sync bằng công cụ npm. Từ giao diện comand line của npm, ta tiến hành gõ vào lệnh npm install browser-sync --save-dev như hình sau:
  
• Sau đó tạo file gulpfile.js ngay trong thư mục project của bạn, cấu trúc cây thư mục sẽ có dạng như sau
  
• Tiếp đến, ta khai báo sử dụng gói browser-sync cho chương trình:

var browserSync = require('browser-sync');

• Và tạo ra một task mới, đặt tên là serve với nội dung như sau:

gulp.task('serve', [], function () {
    browserSync({
        notify: false,
        server: {
            baseDir: '.'
        }
    });
    gulp.watch(['*.html'], reload);
    gulp.watch(['assets/js/*.js'], reload);
    gulp.watch(['assets/css/*.css'], reload);
    gulp.watch(['assets/images/*.css'], reload);
});

• Để chạy file gulp này, chúng ta gõ lệnh: gulp serve
• Trình duyệt sẽ tự bật lên với địa chỉ http://localhost:3000
• Bây giờ, bạn thử sửa một file html hoặc javscript, css bất kì, và lưu lại, các trình duyệt đang mở sẽ tự động refresh lại và cập nhật thay đổi đó ngay lập tức.

Cài đặt các module thực hiện việc minify

• Ta cũng sử dụng npm như trên, thực thi lần lượt các câu lệnh sau để tiến hành cài đặt các module

npm install gulp-minify-css --save-dev
npm install gulp-minify --save-dev
npm install gulp-imagemin --save-dev
npm install imagemin-pngquant --save-dev

• Tạo ra một task mới, đặt tên là compress với nội dung như sau:

gulp.task('compress', function() {
  //cấu hình minify js
  gulp.src('assets/js/*.js') //đường dẫn đến thư mục chứa các file js
    .pipe(minify({
        exclude: ['tasks'],
        ignoreFiles: ['-min.js'] //những file không muốn nén
    }))
    .pipe(gulp.dest('dist/js')); //thư mục dùng để chứa các file js sau khi nén
  //cấu hình minify css
  gulp.src('assets/css/*.css') //đường dẫn đến thư mục chứa các file css
    .pipe(minifyCss({compatibility: 'ie8'}))
    .pipe(gulp.dest('dist/css')); //thư mục dùng để chứa các file css sau khi nén
  //cấu hình minify image
  gulp.src('assets/images/*') //đường dẫn đến thư mục chứa các file images
    .pipe(imagemin({
        progressive: true,
        svgoPlugins: [{removeViewBox: false}],
        use: [pngquant()]
    }))
    .pipe(gulp.dest('dist/images')); //thư mục dùng để chứa các file images sau khi nén
});

• Để thực thi task này (chỉ nên thực thi sau khi đã hoàn tất project), chúng ta gõ lệnh: gulp compress
• Trong thư mục project của bạn sẽ xuất hiện thêm một thư mục dist (chứa các file đã được nén) như hình dưới
  

File gulpfile.js hoàn chỉnh như sau

var gulp = require('gulp');
var browserSync = require('browser-sync');
var reload = browserSync.reload;
var minify = require('gulp-minify');
var minifyCss = require('gulp-minify-css');
var imagemin = require('gulp-imagemin');
var pngquant = require('imagemin-pngquant');

gulp.task('serve', [], function () {
    browserSync({
        notify: false,
        server: {
            baseDir: '.'
        }
    });
    gulp.watch(['*.html'], reload);
    gulp.watch(['assets/js/*.js'], reload);
    gulp.watch(['assets/css/*.css'], reload);
    gulp.watch(['assets/images/*.css'], reload);
});

gulp.task('compress', function() {
  //cấu hình minify js
  gulp.src('assets/js/*.js') //đường dẫn đến thư mục chứa các file js
    .pipe(minify({
        exclude: ['tasks'],
        ignoreFiles: ['-min.js'] //những file không muốn nén
    }))
    .pipe(gulp.dest('dist/js')); //thư mục dùng để chứa các file js sau khi nén
  //cấu hình minify css
  gulp.src('assets/css/*.css') //đường dẫn đến thư mục chứa các file css
    .pipe(minifyCss({compatibility: 'ie8'}))
    .pipe(gulp.dest('dist/css')); //thư mục dùng để chứa các file css sau khi nén
  //cấu hình minify image
  gulp.src('assets/images/*') //đường dẫn đến thư mục chứa các file images
    .pipe(imagemin({
        progressive: true,
        svgoPlugins: [{removeViewBox: false}],
        use: [pngquant()]
    }))
    .pipe(gulp.dest('dist/images')); //thư mục dùng để chứa các file images sau khi nén
});

Sử dụng skeleton

https://github.com/tanUIT/generators-web-project

[khanhicetea]

👍

[thanhdb]

awesome.....

[thanhmabo]

Thanks, rất hay

[vuhaovn]

Thanks pro

[bachnhut]

Có cần cài nodejs trên server không khi publish website?

[khanhicetea]

Có 2 cách :

• Một là gulp để compile dưới local rồi upload lên server (không cần node ở server)
• Hai là upload source lên server đã cài node rồi chạy compile nhé

[tranbinhcse]

Mình thử nó báo vầy

[11:05:33] Starting 'serve'...
[11:05:33] Finished 'serve' after 24 ms
[11:05:33] Starting 'default'...
[11:05:33] Finished 'default' after 23 μs
[Browsersync] Access URLs:

   Local: http://localhost:3000
External: http://192.168.1.43:3000

---

      UI: http://localhost:3001

UI External: http://localhost:3001

[Browsersync] Serving files from: .
[Browsersync] Reloading Browsers...

mà Chrome ko load lại được.

[ozuit]

• Tham khảo thêm ở đây nhé: https://browsersync.io/docs/gulp
• Thử dùng trigger on change gulp.watch("*.html").on("change", reload);