Tìm Hiểu Về Gulp.js

Gulp.js Là Gì

Gulp.js là một task runner được dùng để giúp các lập trình viền front-end có thể tự động hóa các nhiệm vụ tẻ nhạt mà họ phải làm lặp đi lặp lại nhiều lần trong quá trình phát triển và xây dựng dự án. Grunt.js là một task runner phổ biến nhất hiện nay và được nhiều lập trình viên sử dụng để giúp tự động hoá nhiều công việc trong trong dự án.

Gulp.js sử dụng nguyên tắc convention over configuration hay code over configuration trong quá trình setup dự án. Với nguyên tắc này thì những vấn đề cụ thể trong lập trình như tổ chức cấu trúc thư mục như thế nào, đặt các tập tin css hay javascript ở đâu... được chuẩn hoá trước khi bất cứ một tập tin, thư mục nào được tạo ra hay đoạn code nào được viết ra. Điều này giúp giảm số lượng các quyết định mà lập trình viên phải đưa ra và giúp cho việc maintain dự án trở nên dễ dàng. Dưới đây là một ví dụ về cách tổ chức một thư mục dự án đặc trưng để có thể sử dụng Gulp.js một cách dễ dàng:

|- app/
      |- css/
      |- fonts/
      |- images/ 
      |- index.html
      |- js/ 
      |- scss/
  |- dist/
  |- gulpfile.js
  |- node_modules/
  |- package.json

Trong phần tìm hiểu về cách cấu hình Gulp.js để chạy các nhiệm vụ một cách tự động, bạn sẽ hiểu tại sao Gulp.js sử dụng nguyên tắc trên. Bây giờ chúng ta cùng nhau tìm hiểu cách cài đặt Gulp.js

Cài Đặt Gulp.js

Để cài đặt được Gulp bạn cần phải cài đặt:

  • Chương trình Node.js (hay Node) và
  • Chương trình quản lý các gói package node package manager hay NPM.

Nếu máy tính bạn đã cài đặt 2 chương trình trên thì bạn có thể cài đặt Gulp sử dụg một câu lệnh duy nhất trên cửa sổ dòng lệnh:

$ sudo npm install gulp -g

Ở trên chúng ta sử dụng optoin -g (viết tắt của globally) để thực hiện việc cài đặt toàn cục Gulptrên máy tính. Sau khi cài đặt xong bạn có thể kiểm tra lại bằng việc chạy câu lệnh:

$ gulp --v

Cửa sổ dòng lệnh sẽ hiển thị thông tin về phiên bản hiện tại của Gulp cho bạn.

Cấu Hình Gulp.js

Gulp.js sử dụng tập tin gulpfile.js để cấu hình các tasks mà nó sẽ chạy trong dự án. Bạn cần tạo tập tin này trên thư mục gốc của dự án. Tiếp theo chúng ta sẽ sử dụng tập tin này để giúp tự động hoá việc chuyển đổi tập tin được viết theo cú pháp của SASS sang tập tin vietes theo cú pháp CSS thông thường. Sau khi tạo xong tập tin guilpfile.js như hướng dẫn ở trên, bạn chép vào tập tin này nội dung sau:

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

Ở trên chúng ta sử dụng package gulp-sass như một plugin (trình cắm) của Gulp để giúp thực hiện việc chuyển đổi từ sass sang css. Và như vậy chúng ta sẽ cần cài đặt gulp-sass plugin:

$ npm install gulp-sass --save-dev

Câu lệnh trên sẽ cài đặt gói package gulp-sass nội bộ (locally) đồng thời cập nhật tập tin package.json của npm bằng cách thêm gói package gulp-sass vào phần phụ thuộc (dependencies) sử dụng trong môi trường development. Bạn có thể tự kiểm tra lại điều này bằng cách mở tập tin package.json.

Sau khi cài đặt gulp-sass, bạn cập nhật nội dung gulpfile.js bằng cách thêm đoạn mã sau vào phía cuối tập tin này:

gulp.task('sass', function(){
  return gulp.src('app/scss/styles.scss') // cấu hình gulp địa chỉ của tập tin nguồn sass
    .pipe(sass()) // chuyển tập tin nguồn sass thành tập tin css
    .pipe(gulp.dest('app/css')) // địa chỉ tập tin css sẽ được lưu lại
});

Tuy nhiên, để có thể tiếp tục bạn cần tạo thêm 3 thư mục app, csssass như cấu trúc dưới đây:

 |- app/
      |- css/
      |- sass/

Bây giờ trong thư mục sass bạn hãy tạo một tập tin styles.scss với nội dung như sau:

// styles.scss
.testing {
  width: percentage(5/7);
}

Tiếp theo trên cửa sổ dòng lệnh bạn chạy:

$ gulp sass

Kết thúc câu lệnh này bạn sẽ thấy một tập tin styles.css được tạo ra trong thư mục css với nội dung như sau:

/* styles.css */
.testing {
  width: 71.42857%; 
}

Như vậy Gulp đã giúp chúng ta chuyển đổi nội dung có trong tập tin styles.scss (dùng cú pháp SASS) sang nội dung tập tin styles.css (dùng cú pháp CSS thông thường).

Tự Động Hoá với Watch

Ở trên chúng ta mới chỉ thực hiện công việc chuyển đổi từ sass sang css một cách khá thủ công. Để giúp việc chuyển đổi này được thực hiện một cách tự động chúng ta sử dụng một tính năng được Gulp cung cấp sẵn có tên là watch. Với tính năng này bạn sẽ có thể cài đặt để các tasks trong Gulp tự động được thực hiện khi nội dung của các tập tin mà bạn cần theo dõi thay đổi.

Với ví dụ của chúng ta bạn thêm câu lệnh sau vào phía cuối tập tin gulpfile.js:

gulp.task('watch', function(){
  gulp.watch('app/scss/*.scss', ['sass']); 
  // Other watchers
})

Câu lệnh này thông báo với Gulp rằng nó sẽ cần phải theo dõi tất cả các tập tin có đôi là .scss đặt trong thư mục app/scss và khi nào có thay đổi nội dung của 1 trong các tập tin trong thư mục thì task được đặt tên là sass sẽ được thực hiện.

Tiếp theo để bắt đầu tính năng watch này bạn cần chạy câu lệnh sau:

$ gulp watch

Bạn sẽ thấy cửa sổ dòng lệnh hiển thị kết quả như hình dưới đây:

Khởi động watch

Cuối cùng bạn hãy thay đổi nội dung tập tin scss để thấy các tasks tự động được chạy.

Tự động chạy các tasks

Kết luận: Tới đây chúng ta đã tìm hiểu các bước đầu tiên để có thể cài đặt và sử dụng Gulp trong dự án. Ngoài việc chuyển đổi tập tin từ SASS sang CSS như ví dụ trong bài viết, Gulp còn cung cấp nhiều tính năng hữu dùng khác thông qua các plugin của nó. Tuỳ thuộc vào nhu cầu phát sinh trong dự án mà chúng ta sẽ quyết định sử dụng plugin nào. Các plugin của Gulp đều được phát triển dưới dạng module của Node.js do đó bạn có thể tìm kiếm các plugin của Gulp thông qua kho package npm.

Content must not be empty

Related Blog