Đã bao giờ bạn chán với việc liên tục F5 lại trang web trong lúc dev, hay làm thế nào để minify script, đơn giản hơn là chép resource vào cùng một nơi,... Với môi trường làm việc năng động, developer cần một công cụ giúp thực hiện các thao tác một cách tự động, nhanh chóng,...

Gulp là task runner giúp ta tối ưu các thao tác trong quá trình làm việc, ví dụ như live reload, complile, minify, check lỗi,...

Gulp hoạt động trên môi trường nodejs vì vậy tận dụng được nguồn plugin vô tận và mạnh mẻ. Các thao tác thông qua command-line nên gần gũi với dân IT và web developer.

Cài đặt môi trường - NodeJS

Để có thể làm việc với gulp, máy tính cần phải có nodenpm, chọn os của bạn và cài như một ứng dụng bình thường.

 

Kiểm tra đã khả dụng hay chưa:

$ node -v
$ npm -v

Tiếp theo ta cài đặt gulp-cli ở chế độ global:

$ npm install -g gulp gulp-cli

Kiểm tra gulp đã sẵn sàng chưa:

$ gulp -v

Vậy là ta chuẩn bị xong mọi thứ để làm việc với gulp.

Tạo thư mục dự án

Bây giờ chúng ta sẽ tập thao tác với command-line và hiểu cách làm việc với chúng, di chuyển đên thư mục dự án ta thực hiện như sau:

$ cd /Applications/XAMPP/xamppfiles/htdocs/my-project

Tại đây, ta khởi tạo dự án node bằng cách tạo file package.json hoặc dùng lệnh:

$ npm init

Nhập các thông tin theo yêu cầu và xác nhận. Hoàn thành bước này ta sẽ được file package.json, được dùng để lưu trữ thông tin và các dependency của dự án.

Cài đặt gulp cho dự án:

$ npm install gulp --save-dev
  • Khi sử dụng command npm ta thường thấy 3 flag là  -g ,  --save  --save-dev .   -g   dùng để cài đặt node module trong toàn hệ thống, thường được dùng để cài các command. --save  --save-dev  được dùng chỉ để lưu dependency vào dự án

Chúng ta đã hoàn thành việc khởi tạo dự án và cài đặt gulp

Khởi tạo GulpFile và chạy gulp

Để làm việc với gulp, chúng ta phải đặt ra một số yêu cầu, cái mà chúng ta muốn gulp thực hiện thay. Ở đây ta sẽ giả sử một số yêu cầu như sau:

  • Lint javascript (kiểm tra lỗi trong code)

  • Compile sass file

  • Nối các file javascript lại (nhằm giảm tải cho server)

  • Minify và rename các file đã nối

Gulp có thể làm tất cả các việc trên giúp ta.

Cài đặt các gulp plugin

$ npm install gulp-jshint gulp-sass gulp-concat gulp-uglify gulp-rename --save-dev

Các plugin đã sẵn sàng cho ta sử dụng

Tạo Gulpfile

Vào thư mục gốc của dự án, tạo file mới và rename thành gulpfile.js

// Include gulp
var gulp = require('gulp');

// Include Our Plugins
var jshint = require('gulp-jshint');
var sass = require('gulp-sass');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var rename = require('gulp-rename');

// Lint Task
gulp.task('lint', function() {
   return gulp.src('js/*.js')
       .pipe(jshint())
       .pipe(jshint.reporter('default'));
});

// Compile Our Sass
gulp.task('sass', function() {
   return gulp.src('scss/*.scss')
       .pipe(sass())
       .pipe(gulp.dest('dist/css'));
});

// Concatenate & Minify JS
gulp.task('scripts', function() {
   return gulp.src('js/*.js')
       .pipe(concat('all.js'))
       .pipe(gulp.dest('dist'))
       .pipe(rename('all.min.js'))
       .pipe(uglify())
       .pipe(gulp.dest('dist/js'));
});

// Watch Files For Changes
gulp.task('watch', function() {
   gulp.watch('js/*.js', ['lint', 'scripts']);
   gulp.watch('scss/*.scss', ['sass']);
});

// Default Task
gulp.task('default', ['lint', 'sass', 'scripts', 'watch']);

Bây giờ chúng ta sẽ tìm hiểu từng phần:

 

Gulp và các plugin

// Include gulp
var gulp = require('gulp');

// Include Our Plugins
var jshint = require('gulp-jshint');
var sass = require('gulp-sass');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var rename = require('gulp-rename');

Import gulp và các plugin được sử dụng để thức hiện các task. Tiếp theo ta sẽ tạo các task: lint, sass, minify default

 

Lint task

// Lint Task
gulp.task('lint', function() {
   return gulp.src('js/*.js')
       .pipe(jshint())
       .pipe(jshint.reporter('default'));
});

Lint task tìm các file javascript trong thư mục js và kiểm tra lỗi cú pháp.

Hãy xem dòng đầu gulp.src('js/*.js'), src được sử dụng để tìm kiếm các file theo một pattern và trả về một stream.

pipe là method rất quan trọng trong gulp, sử dụng cơ chế pipe cho phép gulp có thể truyền kết quả xử lý của method trước tiếp tục về method sau.

Sass task

// Compile Our Sass
gulp.task('sass', function() {
   return gulp.src('scss/*.scss')
       .pipe(sass())
       .pipe(gulp.dest('dist/css'));
});

Sass task compile tất cả các file trong thư mục scss thành css và lưu vào thư mục dict/css

 

Nối file và minify task

// Concatenate & Minify JS
gulp.task('scripts', function() {
   return gulp.src('js/*.js')
       .pipe(concat('all.js'))
       .pipe(gulp.dest('dist'))
       .pipe(rename('all.min.js'))
       .pipe(uglify())
       .pipe(gulp.dest('dist/js'));
});

Nối file và minify task tìm các file javascript trong thư mục js, uglify sử dụng để minify javacript code.

 

Watch task

// Watch Files For Changes
gulp.task('watch', function() {
   gulp.watch('js/*.js', ['lint', 'scripts']);
   gulp.watch('scss/*.scss', ['sass']);
});

Watch task dùng để phát hiện ra các thay đổi trong file đã chỉ định sẵn để thực hiện một task vụ nào đó, watch sử dụng để tối ưu việc gọi các task của gulp tự động không thông qua việc phải thao tác bằng command-line.

 

Task mặc định

// Default Task
gulp.task('default', ['lint', 'sass', 'scripts', 'watch']);

Task mặc định được dùng để định nghĩa việc chạy một loạt task đã được định nghĩa trước thông qua command-line đơn giản, để thực thi task này ta chỉ cần vào terminal và gõ lệnh:

$ gulp

Nếu bạn muốn chỉ rõ một task nào được thực thi thì gõ lệnh gulp + [task name], ví dụ:

$ gulp sass

Thật quá đơn giản phải không. Những tính năng của Gulp không chỉ dừng lại ở đó, cùng với sự phát triển của cộng đồng nodejs, Gulp còn có thể giúp các developer nhiều hơn nữa.

 

Tham khảo thêm

Source code


Leave a Comment

Fields with * are required.