So sánh Gulp và Grunt
Bài đăng này đã không được cập nhật trong 2 năm
Nếu các bạn chưa biết Gulp là cái gì và Grunt là cái chi, các bạn có thể tham khảo hai bài viết dưới đây:
- Mở đầu với Gulp (đang viết, xin hãy quay lại sau :p)
- Grunt - Javascript task runner (rất cám ơn young talent naa vì bài viết chất lượng này)
Cả hai công cụ trên đều dùng để tự động hoá các tasks, đều sử dụng Node, và đều yêu cầu phải tạo tasks cũng như cài đặt các plugins. Vậy chúng khác nhau ở đâu, hay không khác nhau, dùng cái gì thì tốt hơn?? - chắc hẳn trước khi bắt đầu dự án, nhiều bạn đã phải đau đầu để đưa ra lựa chọn của mình đúng không (haha).
Lưu ý: các thông số trong bài là ở thời điểm người viết, các bạn hãy tự tìm hiểu hiện tại ra sao nhé !
Tốc độ
Sự khác biệt chính giữa Gulp và Grunt nằm ở việc xử lý tự động các tasks ở bên trong như thế nảo. Gulp sử dụng Node streams, còn Grunt lại sử dụng temp files.
Chúng ta đi vào một ví dụ cơ bản, với một dự án có sử dụng SASS code đang cần công cụ để compile (và có thể cả minify luôn).
Lúc này, Grunt sẽ thực hiện tác vụ bằng việc sử dụng các file trung gian. Các SASS files sẽ được compile và ghi vào một temp file. Temp file sẽ được autoprefixer sử dụng và kết quả cuối cùng sẽ được ghi vào file đích.
Còn Gulp sẽ xử lý tất cả in-memory. Source code sẽ được compile, kết quả sẽ được chuyển qua autoprefixer mà không cần tạo ra file trung gian, kết quả thì vẫn được ghi vào file đích.
Ví dụ trên cho chúng ta thấy rõ được Gulp có lợi thế về tốc độ hơn, vì xử lý in-memory sẽ có tốc độ tốt hơn nhiều so với việc ghi/đọc vào ổ đĩa. Trên tech.tmw cũng có một bài so sánh tương tự và đưa ra kết quả Gulp nhanh hơn gần 2 lần.
Nhưng, sự khác biệt về tốc độ này sẽ có ảnh hưởng đến mức nào?
Sự khác biệt tính bằng giây
Vì hầu hết các projects đều nhỏ, nên sự khác biệt này là không đáng kể. Nếu công việc của bạn chỉ tương tự như việc tạo một WordPress theme, thì số files bạn phải xử lý cũng không quá nhiều, và khi đó chắc bạn cũng chả bận tâm đến việc thời gian tiêu tốn là 400ms hay 800ms đâu.
Ngoài ra, hầu hết các projects có thể được cấu trúc sao cho tránh xảy ra các vấn đề phiền toái. Nếu bạn có 50 SASS files, bạn có thể nhanh chóng ghép nối chúng trong khi phát triển, để không phải autoprefix hay minify. Bạn cũng không cần thiết optimize các images mỗi khi bạn save project v.vv..
Ngay cả khi bạn thực sự phải đối mặt với một công việc có khối lượng lớn như chuẩn bị push toàn bộ code lên một staging server, hay update repository, thì 5s với 9s liệu có khác biệt lắm không?
Bên cạnh đó, việc Grunt thêm hỗ trợ piping ở bản 0.5 release sẽ cải thiện tốc độ một cách đáng kể.
Cộng đồng
Grunt ra đời sớm hơn Gulp nên không ngạc nhiên khi Grunt có một user base lớn hơn. Hiện tại mỗi ngày trung bình có 37,000 lượt download Grunt, và 23,000 lượt download Gulp. Tuy nhiên lúc này Gulp mới ra đời, nên con số sẽ còn thay đổi nhiều.
Về plugins, Grunt hiện có hơn 4000 plugins, còn Gulp có hơn 1200 plugins. Theo Google trends, các vấn đề liên quan đến Grunt nhận được nhiều lượt search hơn, có nhiều forums hơn và nhận được nhiều support từ cộng đồng hơn.
Tuy nhiên Gulp đang phát triển rất nhanh, vì vậy trong cuộc đua đường dài chưa thể biết trước được kết quả. Điều tôi muốn chỉ ra ở đây là cả hai cộng đồng đều rất tuyệt vời. Mối quan hệ giữa các leaders ở mỗi cộng đồng là rất tốt, creator của Gulp thậm chí còn giúp các writers tăng hiệu quả sản phẩm của mình.
Code vs Configuration
Nhiều người nghĩ đây là mấu chốt của vấn đề, nhưng bản thân tôi thì thấy chả có issue gì ở đây cả.
Các cuộc tranh luận đưa ra kết luận: Gulp là một ví dụ tốt cho việc sử dụng code thay cho configuration, vì configuration có thể gây khó hiểu, tuy nhiên do đó mà Gulp dễ để đọc, nhưng khó để viết vì piping cũng có thể gây khó hiểu (haha)
Giờ chúng ta thử nhìn qua hai ví dụ về Grunt và Gulp.
grunt.initConfig({
sass: {
dist: {
files: [{
src: 'dev/*.scss',
dest: '.tmp/styles',
expand: true,
ext: '.css'
}]
}
},
autoprefixer: {
dist: {
files: [{
expand: true,
cwd: '.tmp/styles',
src: '{,*/}*.css',
dest: 'css/styles'
}]
}
},
watch: {
styles: {
files: ['dev/*.scss'],
tasks: ['sass:dist', 'autoprefixer:dist']
}
}
});
grunt.registerTask('default', ['styles', 'watch']);
gulp.task('sass', function () {
gulp.src('dev/*.scss')
.pipe(sass())
.pipe(autoprefixer())
.pipe(gulp.dest('css/styles'));
});
gulp.task('default', function() {
gulp.run('sass');
gulp.watch('dev/*.scss', function() {
gulp.run('sass');
});
});
Thực sự tôi thấy những cuộc tranh cãi về cái này cái kia khó hiểu thực sự không phải là vấn đề. Bất cứ một cái mới nào cũng sẽ khó hiểu ở giai đoạn đầu, nhưng sau khi bạn đã bỏ thời gian để làm quen, thì rồi cũng sẽ thành thạo như nhau thôi.
Nếu phải nhận xét theo ý kiến cá nhân, thì tôi thấy thích API của Gulp hơn, vì nó rất rõ ràng và phù hợp với những gì tôi mong muốn hơn là Grunt.
Lựa chọn cuối cùng
Grunt và Gulp là những công cụ rất tuyệt vời và đã giúp chúng ta tiết kiệm rất nhiều thời gian kể từ khi chúng ra đời. Grunt có thể chậm hơn, nhưng lại có cộng đồng lớn. Gulp nhanh hơn, có API rõ ràng hơn, nhưng user base lại không bằng.
Tôi nghĩ, lựa chọn cuối cùng phụ thuộc vào thói quen, nhu cầu và sở thích.
- Nếu bạn đang sử dụng Grunt/Gulp trong một thời gian dài và thấy ổn, bạn chả có lý do gì để phải chuyển sang cái khác cả.
- Nếu project của bạn đòi hỏi một plugins mà chỉ Grunt có (hoặc chỉ Gulp có), bạn lại chưa sẵn sàng để tự viết plugin đó, thì bạn hãy sử dụng Grunt (hoặc Gulp).
- Nếu không phải là hai ý trên, vậy bạn hãy thử cả hai và xem cái nào hợp với sở thích của bạn hơn (haha)
Như ở đoạn trên tôi có nói tôi chọn Gulp vì tôi thích API của Gulp, nhưng tôi cũng cảm thấy thoải mái nên dự án chỉ định phải dùng Grunt. Điều tôi muốn khuyên các bạn là đừng vì một thanh niên Biết-Tuốt nào đó nói cái này hơn cái kia, rồi chấp nhận điều đó. Mặc dù có tồn tại sự khác nhau, nhưng chả có người thắng cuộc, vì cả hai sẽ cộng tác với nhau để cùng tồn tại. Hãy thử cả hai, và mở rộng tâm trí của mình ra nhé (tanghoa).
All rights reserved
