Gulp là 1 tool để auto và nâng cao quy trình làm việc của bạn. Nó đã từng là 1 skill cần thiết của thế giới front end. Bài này sẽ hướng dẫn tạo Gulp file để minify code js, css

tạo gulp file minify CSS và tự động compile js Preprocesing

2021-01-07 1814 lượt xem

gulp là công cụ dành cho giai đoạn Preprocesing (quá trình tiền xử lý code public). Nó cho phép chúng ta làm nhiều tác vụ ( task ) để đi đến kết quả là automate & enhance your workflow(tự động hóa và nâng cao quy trình làm việc của bạn).

Nó thường được sử dụng để làm các tác vụ front end như:

  • Reload trình duyệt ví dụ: livereload, browser load,... 
  • Xử lý các Preprocesing như LESS, SASS, ES6,...
  • Minify CSS, JavaScript và hình ảnh 

Để đọc bài viết này dễ hiểu hơn bạn cần có 1 chút kiến thức về nodejs và các khái niệm căn bản như SASS, Minify,... 

Nếu bạn chưa biết cài đặt nodejs trong macos 

Nếu bạn chưa biết cài đặt nodejs trong ubuntu 

còn nếu bạn sử dụng windows hãy download và cài qua link này cứ next next liên tục là xong

Gulp cực kỳ mạnh mẽ, nhưng bạn cần học cách sử dụng Gulp nếu muốn tạo ra một quá  trình (process) của riêng mình.

Bài viết này sẽ nói cơ bản về Gulp chứ không đi sâu vào mọi vấn đề. Khi bạn có kiến thức căn bản bạn có thể khám phá gulp nhiều hơn.

Cài đặt Gulp

Sau khi đã cài đặt Node và npm, bạn có thể cài đặt Gulp bằng cách sử dụng lệnh sau thông qua npm: 

 # install global
npm install gulp -g

Nếu bạn đang sử dụng macos, đừng quên câu lệnh sudo. 

Đấy mới là cài đặt gulp global xong, bây giờ bạn muốn sử dụng gulp thì phải tạo file dự án với gulp. 

Khởi tạo Gulp file

Tạo filepackage.json

package.json

sau khi cài đặt gulp xong bạn tạo file package.json thông qua npm như sau: 

npm init 

sau đó npm init sẽ yêu cầu bạn xác nhận:

Cài Gulp dependencies

Khi file package.json đã được tạo, bây giờ chúng ta mới có thể cài đặt Gulp để sử dụng( khác với cài đặt gulp ở trên, cài ở trên là cài vào global, tạm hiểu như cài phần mềm, còn cài dưới đây là mở phần mềm ra để sài) 

npm install gulp --save-dev

Tạo Cấu Trúc Thư Mục và gulpfile.js

Số lượng dev php quá khủng khiếp nên banif này mình chọn cấu trúc hơi giống 1 tí với php

 
|- LARAVEL/
|     |- app/
|     |- ...
|     |- public/
|     |- ...
|- BUILDER/
|     |- FONTS/
|     |- IMAGES/
|     |- JAVASCRIPT/
|     |-     |- client.js
|     |- SCSS/
|     |-     |- client.scss
|     |- gulpfile.js
|     |- node_modules/
|     |- package.json

Bạn cũng biết laravel có lượng fan khá đông, có cả mình Nên mình muốn chọn cấu trúc trên có laravel là để khi mình build javascript, scss thì trong laravel php đã có sẵn luôn => khi reload trình duyệt thì code của chúng ta được cập nhật ngay. 

Viết Gulp task

Require Gulp

Để sử dụng Gulp ta cần require trong gulpfile. 

var gulp = require('gulp');

gulp task

sau khi require, chúng ta đã có thể viết một gulp task. Gulp task là nhiệm vụ, khi gọi nhiệm vụ thì sẽ thực thi code trong nhiệm vụ đó, ví dụ như làm cho css chạy đc nhiều trình duyệt mà không cần -ms -webkit -moz, hay minify data 

Cú pháp cơ bản như sau:

gulp.task('task-name', function() {
  // Stuff here
});

 Trong đó: 

task-name là tên của task  sử dụng khi bạn chạy task trong Gulp.

ví dụ: 

/// tạo 1 task tên là "DEMO", mỗi lần gọi sẽ in ra dòng chữ "hùng là đấng vô cùng dễ thương"
gulp.task('DEMO', function() {
  console.log('hùng là đấng vô cùng dễ thương');
});

sau khi chạy xong chú ta có thể run gulp task bằng terminal hoặc command line ( nhớ cd đến thư mục BUILDER nha) 

gulp DEMO 
# kết quả sẽ hiện lên dòng chữ : hùng là đấng vô cùng dễ thương

Thông thường Gulp task sẽ phức tạp hơn. Để xử lý html css javascript trước khi cho ra chạy thực tế. ví dụ 1 đoạn ngắn mà mình từng sử dụng: 

Preprocessing với Gulp

thêm dependencies

vào command line hoặc terminal gõ các dependencies sau

npm install gulp-sass --save-dev
npm install gulp-livereload --save-dev
npm install gulp-minify --save-dev
npm install gulp-minify -css--save-dev

Biên dịch scss và js thành minify

var gulp       = require('gulp')
var sass       = require('gulp-sass')
var livereload = require('gulp-livereload')
var minify     = require('gulp-minify')
var minifyCss  = require('gulp-minify-css')
var path       = require('path')
 

gulp.task('sass', function () {
   /// điểm đầu là file client.css
   return gulp.src('SCSS/client.scss')
      /// chuyển scss thành css
      .pipe(sass())
      /// minify css
      .pipe(minifyCss({ compatibility: 'ie8' }))
      /// dữ liệu biên dịch xong thảy vào folder 
      .pipe(gulp.dest(path.join(__dirname, '/../LARAVEL/public/css/')))
      /// reload code browser sử dụng thư extention 
      /// chrome 
      /// chrome://extensions/?id=jnihajbhpnppcggbcgedagnkighmdlei
      .pipe(livereload())
});


gulp.task('js', function() {
   /// điểm đầu là file client.js
   return gulp.src([ "JAVASCRIPT/client.js" ])
      /// minify js
      .pipe(minify({
         ext: {
            min: '.min.js'
         },
         noSource: true
      }))
      /// dữ liệu biên dịch xong thảy vào folder 
      .pipe(gulp.dest(path.join(__dirname, '/../LARAVEL/public/js/')))
      /// reload code browser sử dụng thư extention 
      /// chrome 
      /// chrome://extensions/?id=jnihajbhpnppcggbcgedagnkighmdlei
      .pipe(livereload())
});

Bạn vào file client.scss viết mã scss như sau: 

// @import "variable.scss";
// @import "reboot.scss";
// @import "./mixin";

$red   : #dc3545 !default;
$orange: #fd7e14 !default;

.text-#{$red}{

  color: $red;
}
.bg-#{$orange}{
    
  background-color: $orange;
}

file client.js thêm đoạn code sau vào: 

var lazyloadScripts    = [],
    lazyloadStylesheet = []
function loadJS(src, cb){

    if(lazyloadScripts.indexOf(src) > -1){
        /// call function callback
        return cb()
    }

    lazyloadScripts.push(src)

    var ref    = document.getElementsByTagName( "script" )[ 0 ]
    var script = document.createElement( "script" )

    script.src   = src
    script.async = true

    ref.parentNode.insertBefore( script, ref )

    if (cb && typeof(cb) === "function") {

        script.onload = cb
    }
    return script
}

sau khi thêm code vào 2 file client.scss và client.js bạn vào terminal tại thư mục BUILDER gõ lệnh: 

/// chạy task js
gulp js 
/// chạy task scss
gulp scss 

Gulp watch

Gulp cung cấp cho chúng ta phương thức watch, cái theo dõi nếu một file được lưu. Bạn cứ tưởng tượng trong lúc lập trình code mà bạn cứ phải vào terminal để build lại các thay đổi thì quá phiền. 

Thay vào việc build liên tục thủ công thì gulp cũng cung cấp 1 cách thức tốt hơn để build liên tục, chỉ những file nào thay đổi (dĩ nhiên bạn có khai báo) thì nó sẽ build lại. 

Cú pháp của watch là:

// Gulp watch syntax
gulp.watch('files-to-watch', ['tasks', 'to', 'run']); 

Sau đó vào terminal gõ: 

gulp files-to-watch

Ví dụ gulp watch

 ở ví dụ khi nãy chúng ta có các task sẵn. bây giờ chũng ta thêm 1 code gulp watch vào cuối file như sau: 

// Watch Files For Changes
gulp.task('watch', function () {
   livereload.listen()
   //// lắng nghe tất cả thay đổi của file nằm trong folder SCSS
   gulp.watch('SCSS/*.scss', gulp.series('sass'))
   //// lắng nghe tất cả thay đổi của file nằm trong folder con 1 cấp của SCSS
   gulp.watch('SCSS/*/*.scss', gulp.series('sass'))

   /// Tương tự cho js
   gulp.watch([
      'JAVASCRIPT/client/*.js',
      'JAVASCRIPT/client/*/*.js'
   ], gulp.series('js'));

})

Full code sẽ như sau: 

var gulp       = require('gulp')
var sass       = require('gulp-sass')
var livereload = require('gulp-livereload')
var minify     = require('gulp-minify')
var minifyCss  = require('gulp-minify-css')
var path       = require('path')
 

gulp.task('sass', function () {
   /// điểm đầu là file client.css
   return gulp.src('SCSS/client.scss')
      /// chuyển scss thành css
      .pipe(sass())
      /// minify css
      .pipe(minifyCss({ compatibility: 'ie8' }))
      /// dữ liệu biên dịch xong thảy vào folder 
      .pipe(gulp.dest(path.join(__dirname, '/../LARAVEL/public/css/')))
      /// reload code browser sử dụng thư extention 
      /// chrome 
      /// chrome://extensions/?id=jnihajbhpnppcggbcgedagnkighmdlei
      .pipe(livereload())
});

gulp.task('js', function() {
   /// điểm đầu là file client.js
   return gulp.src([ "JAVASCRIPT/client.js" ])
      /// minify js
      .pipe(minify({
         ext: {
            min: '.min.js'
         },
         noSource: true
      }))
      /// dữ liệu biên dịch xong thảy vào folder 
      .pipe(gulp.dest(path.join(__dirname, '/../LARAVEL/public/js/')))
      /// reload code browser sử dụng thư extention 
      /// chrome 
      /// chrome://extensions/?id=jnihajbhpnppcggbcgedagnkighmdlei
      .pipe(livereload())
});

// Watch Files For Changes
gulp.task('watch', function () {
   livereload.listen()
   //// lắng nghe tất cả thay đổi của file nằm trong folder SCSS
   gulp.watch('SCSS/*.scss', gulp.series('sass'))
   //// lắng nghe tất cả thay đổi của file nằm trong folder con 1 cấp của SCSS
   gulp.watch('SCSS/*/*.scss', gulp.series('sass'))

   /// Tương tự cho js
   gulp.watch([
      'JAVASCRIPT/client/*.js',
      'JAVASCRIPT/client/*/*.js'
   ], gulp.series('js'));

})

Chạy Gulp Watch

sau khi hoàn thành file cài đặt gulp chúng ta vào terminal tại folder BUILDER chạy lệnh sau: 

gulp watch

Auto reload trình duyệt khi code với php laravel sử dụng gulp

Mỗi lần bạn có những thay đổi trong folder BUILDER/JAVASCRIPT/client.js thì bạn đã có thể build lại 1 cách tự động hơn bằng gulp watch, nhưng bạn hoàn toàn có thể tự động ngay cả với trình duyệt của bạn mà không cần F5 để php render lại code.

Việc hạn chế refresh trình duyệt sẽ khiến bạn code nhanh hơn cho hiệu suất làm việc tốt hơn. để làm được điều này chúng ta sẽ sử dụng extention của chrome như sau: 

truy cập vào trình duyệt gõ vào url này: 

chrome://extensions/?id=jnihajbhpnppcggbcgedagnkighmdlei

Lưu ý là sau khi cài xong bạn chạy Gulp watch trước rồi bấm vào cái icon này cho nó lắng nghe thay đổi nha. Nếu chưa chạy Gulp watch thì nó không có lắng nghe đc và ra lỗi này: 

Thành Công thì cái nút nó sẽ như này: 

bài viết trong chủ đề