Là web developers, ắt hẳn ai cũng lâm vào trường hợp phải làm đi làm lại những công việc nhàm chán cũ rích. Nếu chỉ trừ ra việc chạy một build acommand hay nhấn refresh trên trình duyệt, bạn sẽ nhận ra rằng mình đang tiếp kiệm rất nhiều thời gian đấy. Hơn nữa, khi đã tự động hóa được nhiều công việc, ta có thể tập trung vào nhiệm vụ quan trọng nhất mà không phải phân tâm.

Trong bài hướng dẫn tự động hóa JavaScript này, bạn sẽ học được cách tự động hóa quá trình design và develop với Gulp.

Gulp là một build system sử dụng streams của Node.js để thực hiện tự động hóa kiểu source-destination. Cả công cụ được viết bằng JavaScript, nên rất dễ cho bất cứ ai có kiến thức code bậc trung bắt tay vào tìm hiểu ngay. Một Gulp build process gồm nhiều tập hợp watchers và tasks. Hơn nữa, cộng đồng đứng sau Gulp luôn duy trì một số lượng plugin khổng lồ trong npm, giúp developer trong mọi công việc, từ JavaScript compilation, đến tạo icon fonts từ SVGs.

Nếu bạn không muốn dùng Gulp?

Trong nhiều năm gần đây, xuất hiện rất nhiều công cụ có thể thay cho Gulp, nổi bật trong đó có Grunt. Sự cạnh tranh giữa Gulp và Grunt có vẻ như sẽ không định rõ được kẻ thắng cuộc, vì cả hai đều có những lợi thế và bất lợi riêng. Nhìn chung, có lẽ nhiều người tìm đến môi trường JavaScript của Gulp vì lý do Grunt phụ thuộc quá nhiều vào config. Trong khi đó, các native GUI implementations như Koala cũng dần phát triển, đa phần được ủng hộ bởi những người “ngại” code. Tuy nhiên, với ứng dụng bị “gói” quá mức, công cụ không thể đạt được độ tùy chỉnh và mở rộng mà Gulp mạng lại cho người dùng.

Cần chuẩn bị gì?

Plugins

Plugins là công cụ giúp Gulp hoàn thành mỗi process. Plugins được cài đặt qua npm và khởi động bằng “require”.

Tasks

Với Gulp, tasks luôn có một source (nguồn) và một destination (điểm đến). Giữa source và destination có nhiều pipes (ống) để call mỗi plugin, và output kết quả đã biến đổi vào pipe kế tiếp.

Globs

Là các wildcard patterns chỉ về files. Globs hoặc arrays của globs được dùng làm input trong task source.

Watchers

Các Watchers sẽ theo dõi thay đổi và call task trong source files mỗi khi có thay đổi xảy ra.

gulpfile.js

Lệnh “gulp” sẽ hướng vào JavaScript file này. File chứa mọi thông tin từ tasks đến watchers hoặc các đoạn code do tasks sử dụng.

A Straightforward Task

Trước khi thực hiện, bạn cần Node.js và một shell dòng lệnh với quyền truy cập administrator. Bạn có thể tải Node.js tại đây. Khi đã cài đặt theo đúng yêu cầu, bạn có thể chạy dòng lệnh sau để đảm bảo npm được cập nhật mới nhất.

sudo npm install npm -g

Flag `-g` ám chỉ quá trình cài đặt sẽ là global.

Giờ đây bạn đã sẵn sàng cài đặt Gulp và bắt đầu call một số tasks đơn giản. Sử dụng lệnh sau để cài đặt Gulp global.

sudo npm install gulp -g

Chú ý, bạn cũng có thể sử dụng starter kit để thực hiện task đầu tiên từ toptal-gulp-tutorial/step1 được dễ dàng hơn. Trong đó có một task rất đơn giản, giúp compile SCSS files sang CSS. Nó sử dụng gulp-sass plugin (plugin lại dùng libsass). Tôi chọn libsass ở đây vì nó nhanh hơn Ruby, dù có thiếu một số functionality. Một khi đã vào root directory của project, bạn có thể sử dụng dòng lệnh sau để cài đặt tất cả plugin cần thiết.

npm install

Lệnh này đọc file package.json và cài đặt tất cả dependencies cần thiết. Chúng ta sẽ dùng “npm install” ở đây như sau:

npm install gulp --save-dev
npm install gulp-sass --save-dev

Flag “–save-dev” thêm plugin được lựa chọn vào packege.json devDependencies để lần tới, bạn chỉ việc dùng “npm install” nếu bạn muốn cài đặt mọi thứ.

Tại thời điểm này bạn có thể chạy task đầu tiên được rồi. Chạy lệnh sau để complie tất cả file SCSS trong /scss folder vào CSS trong thư mục tương ứng:

gulp scss

Lưu ý, trong ví dụ này, chúng ta đang chỉ định sẽ chạy task nào. Nếu ta bỏ qua task name, task “default” sẽ tự động chạy.

Code Walkthrough

Bước trên có thể được thực hiện chỉ trong 7 dòng code JavaScript. Chắc chắn rằng, bạn sẽ cảm thấy vô cùng quen thuộc khi đã nắm được độ đơn giản trong đó:

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

Mới đầu, ta khởi chạy tất cả plugin mà ta sẽ sử dụng. Gulp là là plugin duy nhất ta không thể thiếu:

gulp.task('scss', function() {

Chúng ta xác định task tên “scss”:

return gulp.src('scss/*.scss')

Đặt source file cho task. những file này được xác định là globs. Trong ví dụ này ta sẽ refer đến tất cả file trong “/scss” folder kết thúc bằng “.scss”.

.pipe(scss())

Đến lúc này, chúng ta sẽ call plugin gulp-sass đã xác định trước đó:

.pipe(gulp.dest('css'));

Cuối cùng, chúng ta sẽ dùng “gulp.dest” để xác định destination folder cho files. Đây cũng có thể là single file name nếu những files này được compilate.

Để cải thiện quá trình cài đặt tự động hóa, bạn có thể dùng thêm một số plugin khác như: gulp-minify-css, gulp-autoprefixer.

Sử dụng Watcher

Tôi có tạo thêm một watcher starter kit mà bạn có thể dùng ngay, download tại toptal-gulp-tutorial/step2. Starter kit này có chứa phiên bản nâng cao của SCSS task được tạo trước đó. và watcher theo dõi source files và call task. Để khởi động, sử dụng lệnh sau:

gulp

Lệnh này khởi động task “default”, task này lại khởi động watcher. Đến đây bạn có thể edit bất cứ files SCSS nào, cũng như recompile CSS files. Bạn cũng có thể kiểm tra notification của Gulp trong command line.

Code Walkthrough

Chỉ với thêm 3 dòng code, ta đã set up một watcher theo dõi task của mình. Từ đây trở đi, watcher starter kit sẽ không quá khác với ví dụ mở đầu. Trong phần này, chúng ta sẽ điểm qua tất cả additions và alterations.

return gulp.src(['scss/**/*.scss', '!scss/**/_*'])

Trong ví dụ này, Gulp source được cung cấp với một array globs. Cái đầu tiên chứa tất cả files kết thúc bằng “.scss” cũng trong subfolders, và cái thứ hai loại trừ những file bắt đầu với “_”. Như vậy, ta có thể sử dụng built-in function @import của SCSS để compilate file _page.scss.

gulp.task('default', ['scss'], function() {

Ở đây, chúng ta xác định “default” task. Task “scss” được chạy dưới dạng dependency trước “default”.

gulp.watch('scss/**/*.scss', ['scss']);

Cuối cùng, chúng ta call watch function của Gulp để chỉ đến các file kết thúc bằng “.scss”; và mỗi khi có event thay đổi, sẽ chạy task “scss”.

Đến đây bạn đã có thể tạo watcher mới cho các process tự động khác như JavaScript compilation, code hinting, CoffeeScript compilation,… Để tự động hóa JavaScript sâu hơn nữa, tôi đề nghị thêm gulp-notify để thông báo mỗi khi một task được chạy. Đồng thời, bạn có thể tạo một task riêng biệt để giảm thiểu kết quả CSS code và khiến task “scss” chạy dưới dạng dependency. Cuối cùng, bạn có thể sử dụng gulp-rename để thêm hậu tố “.min” vào file kết quả.

Gulp Plugins tự động hóa JavaScript nâng cao

Hiện đang có đến hàng nghìn plugin sẵn có trong kho plugin của Gulp, nhiều plugin trong số đó giúp tự động hóa JavaScript phức tạp hơn nữa. Dưới đây là một số ví dụ nổi bật:

BrowserSync

BrowserSync inject CSS, JavaScript và tự động refresh trình duyệt mỗi khi có thay đổi. Thêm vào đó, nó chứa tính năng ghostMode được dùng để dọa đồng nghiệp (vãi ra quần), hoặc tăng tốc browser testing mạnh mẽ.

Browserify

Browserify phân tích “require” call trong ứng dụng và convert nó sang bundled JavaScript file. Hơn nữa, có thể convert một list npm packages thành browser code.

Webpack

Tương tự với Browserify, Webpack dùng để convert modules với dependencies sang static files. Công cụ này cho phép người dùng tự do hơn khi thiết đặt dependencies, và không đi theo code style của Node.js.

Karma

Gulp-karma mang môi trường testing “đang chìm” lên Gulp. Karma đi theo hướng ít tùy chỉnh, tương tự như Gulp.

Kết luận

Trong hướng dẫn tự động hóa process này, tôi đã trình bày vẻ đẹp đơn giản của build tool Gulp. Khi đã thực hiện trơn tru các bước trong hướng dẫn, bạn đã sẵn sàng đưa lý thuyết vào thực tế trong các project của mình rồi đấy.

Techtalk via toptal

Advertisements