Gulp cho người mới bắt đầu
Gulp cho ng i m i b t đ uườ ớ ắ ầ
Gulp là gì?
Gulp là m t công c giúp b n t đ ng hóa nhi u task (nhi m v ) trong quáộ ụ ạ ự ộ ề ệ ụ
trình phát tri n web. Nó th ng đ c s d ng đ làm các tác v front end ể ườ ượ ử ụ ể ụ
nh :ư
T o ra m t web serverạ ộ
Reload trình duy t m t cách t đ ng b t c khi nào m t file đ c ệ ộ ự ộ ấ ứ ộ ượ
l uư
S d ng các preprocessor gi ng nh Sass ho c LESSử ụ ố ư ặ
T i u hóa các tài nguyên nh CSS, JavaScript và hình nhố ư ư ả
Đây không ph i là m t danh sách toàn di n v nh ng th mà Gulp có th ả ộ ệ ề ữ ứ ể
làm. N u mu n, b n có th t o m t generator web site tĩnh.ế ố ạ ể ạ ộ 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 giúp b n có nh ng ki n th c c b n v Gulp sau đó b n cóế ẽ ạ ữ ế ứ ơ ả ề ạ
th t mình khám phá m i th .ể ự ọ ứ
Tr c khi đi sâu vào Gulp, hãy nói v lý doướ ề t i saoạ b n s d ng Gulp mà ạ ử ụ
không ph i các công c khác.ả ụ
T i sao l i là Gulp?ạ ạ
Nh ng công c nh Gulp th ng đ c đ c p nh là "build tools" b i vì ữ ụ ư ườ ượ ề ậ ư ở
chúng là nh ng công c th c hi n các task trong quá trình xây d ng m t ữ ụ ự ệ ự ộ
website. Hai build tools ph bi n nh t hi n gi là Gulp và Grunt. T t nhiên,ổ ế ấ ệ ờ ấ
v n có nh ng công c khác ch ng h n nhẫ ữ ụ ẳ ạ ư Broccoli, Brunch.
Có nhi u bài vi t đ c p t i s khác nhau gi a Grunt và Gulp và lý do t i ề ế ề ậ ớ ự ữ ạ
sao b n l i s d ng công c này mà không ph i là các công c khác. ạ ạ ử ụ ụ ả ụ
Nh ng đi m khác bi t chính là cách b n c u hình m t workflow v i chúng.ư ể ệ ạ ấ ộ ớ
Gulp c u hình ng n h n và đ n gi n h n khi so sánh v i Grunt. Gulp cũng ấ ắ ơ ơ ả ơ ớ
ch y nhanh h n.ạ ơ
Cái chúng ta s làmẽ
Khi k t thúc bài vi t này, b n s có m t workflow th c hi n các task sau:ế ế ạ ẽ ộ ự ệ
T o ra m t web serverạ ộ
Biên d ch Sass thành CSSị
Refesh trình duy t t đ ng b t c khi nào b n l u m t fileệ ự ộ ấ ứ ạ ư ộ
T i u hóa các tài nguyên (CSS, JS, fonts, và hình nh) cho phiên ố ư ả
b nả production
B n cũng s h c cách n i m t chu i các task khác nhau vào m tạ ẽ ọ ố ộ ỗ ộ l nh đ n ệ ơ
gi n.ả
Hãy b t đ u b ng cách cài đ t Gulp trên máy tính c a b n.ắ ầ ằ ặ ủ ạ
Cài đ t Gulpặ
B n c n cài đ tạ ầ ặ Node.js tr c khi có th cài đ tướ ể ặ Gulp.
Sau khi đã cài đ t Node, b n có th cài đ t Gulp b ng cách s d ng l nh ặ ạ ể ặ ằ ử ụ ệ
sau:
$ sudo npm install gulp -g
Chú ý: ch nh ng ng i s d ng Mac m i c n s d ng t khóaỉ ữ ườ ử ụ ớ ầ ử ụ ừ sudo
npm install là l nh s d ng Node Package Manager ệ ử ụ (npm) đ cài đ t Gulp ể ặ
trên máy tính c a b n.ủ ạ
Cờ -g trong l nh này nói v i npm cài Gulp v i ph m vi toàn c c trên máy ệ ớ ớ ạ ụ
tính c a b n, nó cho phép s d ng l nhủ ạ ử ụ ệ gulp b t kỳ đâu trên h th ng ở ấ ệ ố
c a b n.ủ ạ
Bây gi Gulp đã đ c cài đ t, hãy t o ra m t d án s d ng Gulp.ờ ượ ặ ạ ộ ự ử ụ
T o m t Gulp projectạ ộ
Đ u tiên, chúng ta s t o ra m t th m cầ ẽ ạ ộ ư ụ project. Đây s là th m c g c ẽ ư ụ ố
c a d án. Di chuy n vào th m củ ự ể ư ụ project và ch y l nhạ ệ npm init:
# ... from within our project folder
$ npm init
L nhệ npm init s t o ra m t fileẽ ạ ộ package.json l u tr các thông tin v ư ữ ề
project, nh cácư dependencies đ c s d ng trong d án (Gulp là m t ượ ử ụ ự ộ
dependency).
npm init s yêu c u b n xác nh n:ẽ ầ ạ ậ
Khi file package.json đã đ c t o, chúng ta có th cài đ t Gulp vào d án ượ ạ ể ặ ự
b ng cách s d ng l nh:ằ ử ụ ệ
$ npm install gulp --save-dev
L nh này s cài đ t Gulp vào project c a b n thay vì cài đ t toàn c c.ệ ẽ ặ ủ ạ ặ ụ
Cờ --save-dev s thêmẽ gulp nh m t dev dependency trongư ộ package.json.
N u ki m tra th m cế ể ư ụ project khi l nh đã th c thi xong, b n s th y có ệ ự ạ ẽ ấ
thêm th m cư ụ node_modules. B n cũng nhìn th y th ạ ấ ư
m cụ gulptrong node_modules.
Chúng ta g n nh đã s n sàng đ b t đ u làm vi c v i Gulp. Nh ng tr c ầ ư ẵ ể ắ ầ ệ ớ ư ướ
khi làm đi u đó, chúng ta c n xác đ nh cách chúng ta s d ng Gulp cho ề ầ ị ử ụ
project, và m t ph n trong đó là ch n m t c u trúc th m c.ộ ầ ọ ộ ấ ư ụ
Ch n c u trúc th m cọ ấ ư ụ
Gulp đ linh ho t đ làm vi c v i m i c u trúc th m c. Trong bài vi t ủ ạ ể ệ ớ ọ ấ ư ụ ế
này, chúng ta s s d ng m t c u trúc th ng th y:ẽ ử ụ ộ ấ ườ ấ
|- app/
|- css/
|- fonts/
|- images/
|- index.html
|- js/
|- scss/
|- dist/
|- gulpfile.js
|- node_modules/
|- package.json
Trong c u trúc này, chúng ta s s d ng th m cấ ẽ ử ụ ư ụ app cho m c đích phát ụ
tri n, trong khi th m cể ư ụ dist (distribution) đ c s d ng đ ch a các file ượ ử ụ ể ứ
đã đ c t i u cho web site production.ượ ố ư
Bây gi , hãy b t đ u b ng cách t o ra Gulp task đ u tiên c a b n ờ ắ ầ ằ ạ ầ ủ ạ
trong gulpfile.js, cái l u tr t t c c u hình c a Gulp.ư ữ ấ ả ấ ủ
Vi t Gulp task đ u tiênế ầ
B c đ u tiên đ s d ng Gulp làướ ầ ể ử ụ require trong gulpfile.
var gulp = require('gulp');
Câu l nh require nói v i Node tìm ki m trong th ệ ớ ế ư
m cụ node_modules package có tên gulp. Khi package đ c tìm th y, chúng ượ ấ
ta gán n i dung t i bi nộ ớ ế gulp.
Bây gi chúng ta có th vi t m t gulp task. Cú pháp c b n nh sau:ờ ể ế ộ ơ ả ư
gulp.task('task-name', function() {
// Stuff here
});
task-name là tên c a task, cái sủ ử d ng khi b n mu n ch y m t task trong ụ ạ ố ạ ộ
Gulp. B n cũng có th ch y task đó trong command line b ng l nhạ ể ạ ằ ệ gulp
task-name.
Đ ki m tra, t o m t task ể ể ạ ộ hello, cái in ra "Hello Zell".
gulp.task('hello', function() {
console.log('Hello Zell');
});
Chúng ta có th ch y task v i l nhể ạ ớ ệ gulp hello.
$ gulp hello
L nh trên s in raệ ẽ "Hello Zell".
Th c t , các Gulp task s ph c t p h n m t chút. Nó th ng ch a h n 2 ự ế ẽ ứ ạ ơ ộ ườ ứ ơ
ph ng th c Gulp, c ng v i nhi u plugin c a Gulp.ươ ứ ộ ớ ề ủ
M t task th c s s gi ng nh th này:ộ ự ự ẽ ố ư ế
gulp.task('task-name', function () {
return gulp.src('source-files') // Get source files with gulp.src
.pipe(aGulpPlugin()) // Sends it through a gulp plugin
.pipe(gulp.dest('destination')) // Outputs the file in the destination folder
có thể bạn quan tâm
Văn 12 viết về tình người, sự vị tha giữa người với người
2
868
317
Tài liệu, đề thi môn Ngữ Văn
2
(New)
Hướng dẫn trả lời câu hỏi SGK Lịch sử lớp 10: Sự xuất hiện loài người...
4
704
288
Giải bài tập các môn
4
(New)
Cách giao tiếp hiệu quả giữa người với người
0
1.366
4
Kỹ năng giao tiếp
(New)
Nghiên cứu về khái niệm quyền con người, sự khác nhau trong việc tiếp...
20
871
4.380
Báo cáo, luận văn khác
20
(New)
Người nộp thuế có được tự cam kết về thu nhập của người phụ thuộc?
2
990
307
Kế toán, kiểm toán
2
(New)
Luận án tiến sĩ luật học: Một số kiến nghị tăng cường bảo đảm quyền co...
14
826
336
Thạc sĩ cao học
14
(New)
Đề tài: Tìm hiểu kỹ thuật phân tập đa người dùng trong việc chia sẻ tà...
62
684
382
Kinh tế quản lý
62
(New)
Luận văn: Cách nhìn tổng thể về thuyết con người, áp dụng thực tiễn qu...
15
729
299
Kinh tế quản lý
15
(New)
thông tin tài liệu
Gulp là một công cụ giúp bạn tự động hóa nhiều task (nhiệm vụ) trong quá trình phát triển web
Mở rộng để xem thêm
tài liệu mới trong mục này
tài liệu hot trong mục này
tài liệu giúp tôi
Nếu bạn không tìm thấy tài liệu mình cần có thể gửi yêu cầu ở đây để chúng tôi tìm giúp bạn!
×
