Bắt đầu với Gulp.js

Gulp là một công cụ dựa trên Javascript cho phép bạn tự động hóa các bit của quy trình làm việc của mình. Tự động hóa có thể giúp bạn tiết kiệm hàng giờ mỗi ngày. Cho dù bây giờ bạn là nhà phát triển hay nhà thiết kế tạo ra khung lưới HTML, tôi khuyến khích bạn đào sâu vào.

Trong bài viết này, chúng ta sẽ xem xét những điều cơ bản khi sử dụng Gulp - từ cài đặt đến cú pháp cơ bản và một vài ví dụ. Đến cuối bài viết, bạn sẽ có thể tìm, cài đặt và sử dụng các gói mà người khác đã tạo cho Gulp để biên dịch SASS, tối ưu hóa hình ảnh, tạo các họa tiết, ghép các tệp và hơn thế nữa!

Cài đặt Gulp

Đừng lo lắng, cài đặt rất dễ dàng. Chúng ta sẽ cần sử dụng thiết bị đầu cuối trong OSX và Linux hoặc dấu nhắc lệnh cho Windows. Tôi sẽ gọi nó là Terminal từ bây giờ.

Mở nó lên và gõ npm -v và nhấn enter. Nếu bạn thấy số phiên bản được hiển thị, bạn đã cài đặt Node - đây là phần phụ thuộc cho Gulp.

Nếu bạn nhận được một “lệnh không tìm thấy” (hoặc một lỗi tương tự), đi xuống trang tải xuống Node.js và chọn gói phù hợp cho hệ thống của bạn. Sau khi cài đặt, lệnh npm sẽ có sẵn trong thiết bị đầu cuối.

Cài đặt Gulp thật dễ dàng. Dán lệnh sau vào thiết bị đầu cuối, đó là:

cài đặt npm - glop gulp

Điều này sẽ cài đặt lệnh Gulp sẽ có sẵn trên toàn cầu trên hệ thống của bạn.

Thêm Gulp vào dự án

Gulp hiện đã được cài đặt, nhưng chúng tôi sẽ cần thêm nó vào từng dự án mà chúng tôi cần, riêng biệt. Tạo một thư mục trống bây giờ và điều hướng đến nó trong thiết bị đầu cuối của bạn. Trong khi trong thư mục cho dự án, sử dụng lệnh sau:

cài đặt npm --save-dev gulp

Điều này sẽ tạo một thư mục node_modules và tệp npm-debug.log trong thư mục dự án của bạn. Chúng được Gulp sử dụng để thực hiện dự án của bạn, bạn không cần phải nghĩ về chúng trong giai đoạn này.

Lý do chúng ta cần thêm Gulp vào từng dự án cụ thể là mỗi dự án có những yêu cầu khác nhau. Một người có thể gọi cho SASS, một người khác cho Ít hơn. Một người có thể sử dụng Coffeescript, người kia có thể không, v.v..

Gulpfile

Gulpfile là nơi phép màu xảy ra, đó là nơi bạn xác định tự động hóa bạn yêu cầu và khi bạn muốn chúng xảy ra. Hãy tạo một tác vụ mặc định trống bằng cách tạo một tệp có tên gulpfile.js và dán đoạn mã sau vào nó.

var gulp = Yêu cầu ('gulp'); gulp.task ('default', function () // Hiện tại không có gì, chúng tôi sẽ sớm thêm chức năng);

Khi tệp này được lưu, bạn có thể quay lại thiết bị đầu cuối của mình và tự chạy lệnh gulp. Gulp phát hiện dự án nào đang thực hiện và chạy tác vụ mặc định - dự án chúng ta vừa tạo. Bạn sẽ thấy một cái gì đó như thế này:

Không có gì thực sự xảy ra ở đây, vì nhiệm vụ trống rỗng, nhưng nó đang hoạt động tốt. Bây giờ, hãy bắt đầu với một số ví dụ thích hợp!

Sao chép tập tin

Đây là một điều nhàm chán, tôi sẽ thừa nhận nhiều, nhưng nó sẽ giúp bạn hiểu những gì đang diễn ra dễ dàng.

Trong thư mục dự án của bạn tạo một tệp có tên to_copy.txt , và một thư mục có tên nhà phát triển. Hãy đi vào Gulpfile của chúng tôi và tạo một nhiệm vụ mới có tên bản sao.

gulp.task ('copy', function () return gulp.src ('to_copy.txt') .pipe (gulp.dest ('dev')););

Dòng đầu tiên xác định một nhiệm vụ được đặt tên là bản sao. Trong phạm vi này, chúng tôi sử dụng gulp.src để chỉ định tệp nào chúng tôi đang nhắm mục tiêu với tác vụ này - trong trường hợp này là tệp duy nhất có tên to_copy.txt.

Sau đó, chúng tôi chuyển các tệp này sang hàm gulp.dest chỉ định nơi chúng tôi muốn đặt các tệp này - Tôi đã sử dụng thư mục dev.

Quay trở lại thiết bị đầu cuối của bạn và gõ bản sao Để chạy tác vụ này, cần sao chép tệp đã chỉ định vào thư mục đã chỉ định, đại loại như thế này:

Lệnh ống là trung tâm của Gulp. Đó là một cách hiệu quả để di chuyển dữ liệu giữa các lệnh. Lệnh src chỉ định các tệp được dẫn đến lệnh Dest. Trong các kịch bản phức tạp hơn, chúng tôi sẽ chuyển các tệp của mình sang các lệnh khác trước khi chỉ định đích.

Bạn cũng nên lưu ý rằng nguồn có thể được cung cấp dưới dạng một tệp hoặc nhiều tệp. Nếu chúng ta có một thư mục có tên sản xuất và chúng tôi muốn di chuyển tất cả các tệp từ phát triển thư mục vào nó, chúng ta có thể sử dụng lệnh sau:

gulp.task ('copy', function () return gulp.src ('Development / *') .pipe (gulp.dest ('sản xuất')););

Nhân vật ngôi sao sẽ phù hợp với bất cứ điều gì trong thư mục. Bạn cũng có thể khớp tất cả các tệp trong tất cả các thư mục con và thực hiện tất cả các loại kết hợp ưa thích khác. Hãy xem tài liệu toàn cầu về nút để biết thêm thông tin.

Biên dịch SASS

Biên dịch một bản định kiểu từ các tệp SASS là một nhiệm vụ phổ biến cho các nhà phát triển. Nó có thể được thực hiện với Gulp khá dễ dàng, mặc dù vậy chúng tôi sẽ cần phải chuẩn bị. Ngoài các lệnh cơ bản như src, mệnh và một số lệnh khác, tất cả chức năng được thêm thông qua các addons của bên thứ ba. Đây là cách tôi sử dụng chúng.

Tôi gõ SASS Gulp vào Google, kết quả đầu tiên thường là những gì tôi cần, bạn nên tìm trang cho gói SASS. Nó chỉ cho bạn cách cài đặt nó (npm cài đặt gulp-sass). Có thể bạn sẽ cần sử dụng sudo để cài đặt nó với tư cách quản trị viên, vì vậy có thể nó sẽ là (sudo npm install gulp-sass) .

Sau khi hoàn thành, bạn có thể sử dụng cú pháp mà gói ra lệnh để biên dịch mã của bạn. Để thực hiện việc này, hãy tạo một tệp có tên là style.scss với nội dung sau:

$ chính: # ff9900; cơ thể nền: $ chính; 

Bây giờ hãy tạo tác vụ Gulp sau trong Gulpfile.

gulp.task ('sass', function () gulp.src ('*. scss') .pipe (sass ()) .pipe (gulp.dest ('./ css')););

Trước khi chạy lệnh, đừng quên 'yêu cầu' gói ở đầu Gulpfile như thế này:

var sass = Yêu cầu ('gulp-sass');

Khi bạn chạy nuốt chửng, tất cả các tệp có phần mở rộng scss sẽ được chuyển sang hàm sass, tệp này sẽ chuyển đổi chúng thành css. Sau đó chúng được dẫn đến hàm đích đặt chúng trong thư mục css.

Xem tập tin và thư mục

Cho đến nay điều này là tất cả tiện dụng, nhưng chúng ta vẫn cần phải gõ một lệnh mỗi lần chúng tôi muốn chạy một tác vụ, điều này không hiệu quả lắm, đặc biệt là khi nói đến thay đổi biểu định kiểu. Gulp cho phép bạn xem các tập tin để thay đổi và chạy các lệnh tự động.

Trong Gulpfile, tạo một lệnh có tên tự động hóa sẽ sử dụng lệnh watch để xem một tập hợp các thay đổi và chạy một lệnh cụ thể khi một tập tin thay đổi.

gulp.task ('tự động hóa', hàm () gulp.watch ('*. scss', ['sass']););

Nếu bạn gõ tự động vào thiết bị đầu cuối, nó sẽ bắt đầu và hoàn thành nhiệm vụ, nhưng nó sẽ không trở lại dấu nhắc vì nó đang theo dõi các thay đổi. Chúng tôi đã chỉ định rằng chúng tôi muốn xem tất cả các tệp scss trong thư mục gốc và nếu chúng thay đổi, chúng tôi muốn chạy lệnh sass mà chúng tôi đã thiết lập trước đó.

Nếu bây giờ bạn thay đổi tệp style.scss, nó sẽ được biên dịch thành tệp css trong thư mục css.

Chạy nhiều tác vụ

Có nhiều tình huống mà bạn có thể muốn chạy nhiều tác vụ. Khi xem thư mục javascript của bạn, bạn có thể muốn biên dịch nối hai tệp và sau đó tiến hành thu nhỏ chúng. Có hai cách bạn có thể hoàn thành việc này.

Nếu nhiệm vụ có liên quan, tôi thích xâu chuỗi chúng. Một ví dụ điển hình là việc ghép và thu nhỏ các tệp javascript. Trước tiên, chúng tôi chuyển các tệp của mình sang hành động concat, sau đó chuyển chúng thành gulp-uglify, sau đó sử dụng hàm đích để xuất chúng.

Nếu các nhiệm vụ không liên quan, bạn có thể gọi nhiều nhiệm vụ. Một ví dụ sẽ là một nhiệm vụ trong đó chúng tôi muốn nối và thu nhỏ các tập lệnh của chúng tôi và cũng biên dịch SASS của chúng tôi. Đây là Gulpfile đầy đủ về việc nó sẽ trông như thế nào.

var gulp = Yêu cầu ('gulp'); var uglify = Yêu cầu ('gulp-uglify'); var concat = Yêu cầu ('gulp-concat'); var sass = Yêu cầu ('gulp-sass'); gulp.task ('scripts', function () gulp.src ('js / ** / *. js') .pipe (concat ('scripts.js')) .pipe (gulp.dest ('.') ) .pipe (uglify ()) .pipe (gulp.dest ('.'))); gulp.task ('style', function () gulp.src ('/ *. scss') .pipe (sass ()) .pipe (gulp.dest ('./ css'));); gulp.task ('automate', function () gulp.watch (['*. scss', 'js / ** / *. js'], ['scripts', 'style']);); gulp.task ('mặc định', ['script', 'style']);

Nếu bạn gõ kịch bản gulp vào thiết bị đầu cuối, tất cả các tệp javascript trong thư mục js sẽ được nối, xuất ra thư mục chính, sau đó được làm mờ và lưu vào thư mục chính.

Nếu bạn gõ nuốt chửng, tất cả các tệp scss của bạn sẽ được biên dịch và lưu vào thư mục css.

Nếu bạn gõ nuốt nước bọt (tác vụ mặc định), của bạn kịch bản nhiệm vụ sẽ được chạy, tiếp theo là phong cách bài tập.

Các tự động tác vụ theo dõi nhiều thư mục để thay đổi trong tệp scss và js của chúng tôi và sẽ thực hiện cả hai tác vụ chúng tôi đã xác định, nếu phát hiện thay đổi.

Tổng quan

Thực tế, sử dụng Gulp không khó, nhiều người thích nó hơn Grunt vì cú pháp đơn giản hơn. Hãy nhớ các bước cần thực hiện khi tạo tự động hóa mới:

• Tìm kiếm plugin
• Cài đặt plugin
• Yêu cầu plugin trong Gulpfile của bạn
• Sử dụng cú pháp trong tài liệu

Năm lệnh có sẵn trong Gulp (tác vụ, chạy, xem, src, mệnh) là những lệnh duy nhất bạn cần biết, tất cả các addon của bên thứ ba đều có tài liệu tuyệt vời. Dưới đây là danh sách một số thứ tôi sử dụng mà bạn có thể bắt đầu ngay bây giờ:

• Tối ưu hóa hình ảnh với tối ưu hóa hình ảnh gulp
• Tạo các họa tiết hình ảnh với gulp-sprite
• Ghép các tệp với gulp-concat
• Giảm thiểu các tập tin với gulp-uglify
• Xóa tập tin bằng gulp-del
• Javascript linting với gulp-jslint
• JSON linting với gulp-jsonlint
• Autoprefix CSS với gulp-autoprefixer
• Tìm kiếm và thay thế bằng gulp-frep
• Giảm thiểu CSS bằng gulp-minify-css