Bây giờ chúng ta đã cấp đủ
rồi, đã đến lúc Gulp rồi.
Chúng tôi sẽ cố gắng thực hiện cùng một loại
tác vụ mà chúng tôi đã thực hiện với cả NPM Scripts và Grunt,
nhưng bây giờ chúng tôi sẽ cố gắng làm tương tự bằng cách sử dụng Gulp và Gulp Plug-ins.
Để bắt đầu, trước tiên hãy cài đặt Gulp như một mô-đun toàn cầu.
Vì vậy, để làm điều đó, tại dấu nhắc,
gõ npm -g install gulp,
điều này sẽ cài đặt Gulp như một mô-đun toàn cầu và làm
cho nó có sẵn để sử dụng trên dòng lệnh.
Sau khi chúng tôi hoàn thành điều này,
bước tiếp theo là cài đặt Gulp cục bộ trong dự án của chúng tôi.
Vì vậy, để làm điều đó, tại dấu nhắc,
gõ npm install gulp —save-dev.
Một khi chúng tôi đã hoàn thành hai điều này,
đó là thời gian để tiếp tục và cấu hình các nhiệm vụ Gulp của chúng tôi.
Trước khi chúng tôi làm điều đó, bước tiếp theo của
chúng tôi, chúng tôi sẽ cài đặt plugin Gulp Sass để chúng tôi có thể
cấu hình Sass để xem như là nhiệm vụ chuyển đổi trong tập tin Gulp của chúng tôi.
Vì vậy, để đi trước và làm điều đó,
gõ npm install
gulp sass —save-dev.
Ngoài ra trong khi chúng tôi đang ở đó,
chúng tôi cũng có thể cài đặt Trình duyệt Sync Gulp Task
quá, để chúng tôi có thể cấu hình cả hai này sau khi khác.
Vì vậy, tôi sẽ cài đặt, npm cài đặt trình duyệt đồng bộ —save-dev.
Một khi hai điều này được cài đặt,
sau đó chúng ta hãy tiếp tục và tạo tệp Gulp của chúng tôi và sau đó cấu hình Nhiệm vụ Gulp của chúng tôi ở đây.
Đi đến thư mục dự án của chúng tôi, chúng
ta hãy tạo một tập tin mới và sau đó đặt tên nó là gulpfile.js,
và trong tập tin này, chúng tôi sẽ cấu hình nhiệm vụ Gulp của chúng tôi.
Vì vậy, một khi gulpfile.js đã sẵn sàng,
cũng cấu hình các nhiệm vụ Gulp ở đây bằng cách đầu tiên bắt đầu
với 'sử dụng nghiêm chọn' và sau đó var gulp.
Vì vậy, chúng ta cần phải yêu cầu các mô-đun nút gulp,
và cũng trong khi chúng ta đang ở đó,
chúng ta sẽ yêu cầu mô-đun nút sass.
Như tôi đã đề cập trong bài tập trước đó,
nó sẽ trở nên rõ ràng hơn đối với bạn tại sao mã được viết như thế này, một
khi bạn hiểu thêm về các mô-đun nút trong một khóa học sau.
BrowserSync, vì vậy những gì chúng tôi đã làm là bao gồm các
mô-đun nút Gulp Contrast và BowserSync vào tập tin Gulp của chúng tôi.
Và một khi bạn đã làm điều đó,
đó là thời gian để cấu hình nhiệm vụ Gulp của chúng tôi.
Như chúng ta đã học trước đây,
Gulp là một mã dựa trên cách cấu hình các
nhiệm vụ không giống như Grunt mà dựa nhiều hơn vào cấu hình của các nhiệm vụ.
Vì vậy, trong trường hợp Gulp,
em bé sẽ thiết lập nhiệm vụ của chúng tôi để gõ
gulp.task và sau đó chúng ta hãy thiết lập một tên nhiệm vụ 'sass',
và sau đó cho nhiệm vụ này,
chúng tôi sẽ thiết lập này như một chức năng,
và đây là cách mã được chuẩn bị.
Vì vậy, Gulp Nhiệm vụ Sass chức năng và ở đây,
chúng tôi đang thiết lập các nhiệm vụ Gulp,
vì vậy chúng tôi sẽ gõ return gulp.src ('. /css/ *.scss') Như chúng ta đã biết,
Gulp là một công cụ dựa trên mã trên cấu hình.
Vì vậy, chúng tôi sẽ chuẩn bị nhiệm vụ này như vậy.
Vì vậy, bạn thấy rằng chúng tôi đã chỉ định Gulp nguồn ống sass trên,
và sau đó ở đây, lỗi.
Vì vậy, nếu một lỗi xảy ra,
chúng tôi sẽ sử dụng cách Sass để đăng nhập lỗi và sau đó ống này
thông qua gulp.dest ('. /css '), và
hoàn thành cấu hình của nhiệm vụ Gulp Sass.
Bạn phải tự hỏi tại sao chúng tôi viết mã như thế này.
Nó nói nguồn gulp và sau đó chỉ định một cái gì đó ở đó,
và sau đó một trong những tiếp theo nói ống và sau đó một trong những tiếp theo nói ống.
Hãy hiểu cách Gulp làm mọi việc một chút chi tiết hơn.
Để giúp giải thích lý do tại sao chúng tôi cấu hình các nhiệm vụ như thế,
tôi có một lời giải thích về những gì chúng tôi gọi là Gulp Streams.
Cách Gulp hoạt động giống như bạn mất một tập hợp các tập tin và bạn chỉ định tập hợp các
tập tin bằng cách nói nguồn gulp như chúng tôi đã làm với các nhiệm vụ Sass có.
Vì vậy, ở đây, đây là chức năng mà mất các tập tin.
Bạn thậm chí có thể chỉ định các tập tin bằng cách sử dụng các mô hình globbing mà chúng tôi đã học được trong Grunt,
và sau đó nó tạo ra một dòng các đối tượng đại diện cho các tập tin này.
Bây giờ, một khi dòng được tạo ra,
sau đó các dòng có thể được piped thông qua một tập hợp các
chức năng khác để biến đổi các tập tin này.
Và sau đó cuối cùng, các tập tin được chuyển đổi kết quả có thể được đưa vào một vị trí đích.
Vì vậy, đó là lý do tại sao chúng tôi chỉ định nguồn Gulp,
sau đó chúng tôi chỉ định đường ống.
Vì vậy, các đường ống cho phép các dòng được đường ống thông qua một chức năng,
và như vậy, đó là lý do tại sao chúng tôi đã nói đường ống chấm,
và sau đó chúng tôi đã nói gulp.
Và sau đó chúng tôi nói Sass về lỗi.
Và sau đó người tiếp theo nói Pipe Gulp Dest.
Và như vậy, gulp dest xác định đích của các tập tin đã được xử lý.
Vì vậy, đó là cách một nhiệm vụ điển hình được chỉ định trong gulp bởi vì nhưng gulp hoạt động trên luồng.
Vì vậy, các tập tin dòng của bạn thông qua các đường ống cho đến khi chúng
được chuyển giao và sau đó chúng sẽ được gửi tại điểm đến được chỉ định.
Vì vậy, bạn sẽ thấy cấu trúc tương tự cho nhiều nhiệm vụ gulp mà chúng tôi
sẽ cấu hình trong bài tập này và bài tập tiếp theo.
Bây giờ bạn đã hiểu một chút về cách gulp hoạt động với luồng và làm thế nào
nhiệm vụ gulp sử dụng đường ống để xử lý các tập tin thông qua một tập hợp các chức năng,
và nó trở nên rõ ràng hơn cho bạn lý do tại sao chúng tôi thiết lập nhiệm vụ sass này như đã thấy trong mã này ở đây.
Nhiệm vụ tiếp theo mà chúng ta sẽ cấu hình được gọi là gulp,
và chúng tôi sẽ cấu hình nhiệm vụ này như đồng hồ sass.
Vì vậy, đây là một nhiệm vụ xem mà chúng ta sẽ cấu hình,
và sau đó bạn sẽ chỉ định chức năng.
Và như vậy ở đây,
nhiệm vụ quan sát gulp sass,
những gì chúng tôi làm là chỉ định các tập tin mà chúng tôi sẽ xem.
Vì vậy, chúng tôi sử dụng nhiệm vụ xem gulp để xem các tập tin.
Vì vậy, đồng hồ đã được xây dựng vào gulp.
Vì vậy, nó sẽ mất gulp xem và sau đó chúng tôi chỉ định các tập tin có *.SCSS.
Vì vậy, như bạn có thể thấy, đồng hồ gulp sẽ xem các
tập tin này và sau đó khi bất kỳ thay đổi nào đối với các tập tin này xảy ra,
sau đó nó sẽ chạy nhiệm vụ sass,
mà chúng tôi đã chỉ định trước đó.
Vì vậy, đó là cách mà nhiệm vụ xem sass được thiết lập.
Bây giờ chúng tôi đã thực hiện hai điều này, chúng
ta hãy thiết lập tác vụ đồng bộ trình duyệt tiếp theo.
Vì vậy, đóng đó với dấu chấm phẩy và sau đó
nhiệm vụ tiếp theo mà chúng tôi sẽ thiết lập là tác vụ đồng bộ trình duyệt.
Vì vậy, tôi sẽ chỉ định tác vụ đồng bộ trình duyệt ở đó.
Và sau đó đối với tác vụ đồng bộ trình duyệt,
tôi sẽ chỉ định chức năng đó.
Một lần nữa, lưu ý cấu trúc trong đó chúng tôi viết mã,
nhiệm vụ gulp và sau đó bạn chỉ định một cái gì đó mà theo sau nhưng với một chức năng.
Bây giờ một lần nữa như tôi đã nói,
chúng ta học các mô-đun nút trong khóa học cuối cùng của chuyên môn này,
nó sẽ trở nên rõ ràng hơn cho bạn tại sao không mô-đun được viết với cấu trúc này,
và tại sao các chức năng được viết như thế này.
Vì vậy, chúng ta nói gulp tác vụ trình duyệt đồng bộ.
Ở đây, tôi sẽ xác định một biến,
một biến JavaScript được gọi là tập tin,
đó là không có gì nhưng trong mảng,
và rằng bên trong những tập tin mảng tôi sẽ chỉ định tất cả các tập tin mà
nếu sửa đổi trình duyệt đồng bộ cần
phải gây ra việc tải lại hoặc các tập tin.
Vì vậy, các tập tin html, các tập tin CSS trong thư mục CSS,
và sau đó tương tự tôi cũng sẽ xem các tập tin hình ảnh,
và các tập tin JavaScript.
Tất cả các tập tin này nếu bất kỳ trong số họ thay đổi.
Vì vậy, sau này, tôi sẽ cấu hình đồng bộ trình duyệt ở đây.
Vì vậy, tôi sẽ nói đồng bộ hóa trình duyệt.
Chúng tôi đã xác định biến này được gọi là đồng bộ trình duyệt trước đó.
Vì vậy, chúng ta phải khởi tạo đồng bộ hóa trình duyệt,
và do đó, tham số đầu tiên
là các tập tin cần phải được theo dõi,
và sau đó tham số thứ hai chỉ định các tùy chọn mà chúng tôi đang đưa ra cho trình duyệt.
Vì vậy, tùy chọn mà tôi đang chỉ định là dành cho máy chủ.
Tôi sẽ chỉ định thư mục cơ sở như thư mục hiện tại,
và sau đó hoàn thành đặc điểm kỹ thuật của tác vụ đồng bộ trình duyệt.
Vì vậy, với điều này, chúng tôi đã hoàn thành chỉ định tác vụ đồng bộ trình duyệt ở đây.
Vì vậy, bạn có thể thấy rằng làm thế nào chúng tôi cấu hình tác vụ đồng bộ hóa trình duyệt,
chúng tôi chỉ định các tệp và sau đó lưu
đồng bộ hóa trình duyệt trong đó và cung cấp các tệp như tham số đầu tiên.
Tham số thứ hai là các tùy chọn cho plugin đồng bộ hóa trình duyệt.
Sau đó, cuối cùng, chúng tôi sẽ lên lịch hoặc
chúng tôi sẽ cấu hình nhiệm vụ được gọi là mặc định.
Cũng giống như tôi có nhiệm vụ mặc định trong Grunt,
chúng tôi cũng có thể có một nhiệm vụ mặc định tương tự được xác định cho gulp.
Vì vậy, ở đây chúng ta nói gulp tác vụ mặc định trình duyệt đồng bộ hóa,
và sau đó chỉ định chức năng.
Và bên trong đó chúng ta sẽ chỉ định bắt đầu gulp.
Vì vậy, điều này xác định rằng tôi nên bắt đầu
nhiệm vụ khác mà sass xem nhiệm vụ. Nhiệm vụ xem sass cần phải được bắt đầu.
Đảm bảo rằng tác vụ đồng bộ trình duyệt đang chạy trước khi tác vụ xem sass được bắt đầu.
Vì vậy, đây là cú pháp để xác định rằng trong gulp.
Vì vậy, với điều này, chúng tôi đã cấu hình tất cả mọi thứ mà chúng ta cần trong tập tin gulp.
Vì vậy, một lần nữa quay trở lại,
có những bước mà chúng tôi đã làm.
Chúng tôi lần đầu tiên sử dụng yêu cầu để bao gồm tất cả các plugin gulp của họ ở
đó, sau đó chúng tôi cấu hình nhiệm vụ sass,
và sau đó xác định nhiệm vụ xem sass.
Đây là nơi chúng tôi sử dụng đồng hồ gulp có sẵn cho chúng tôi như từ gulp.
Sau đó, chúng tôi đã chỉ định tác vụ đồng bộ trình duyệt và sau đó cuối cùng
sắp xếp lại nhiệm vụ mặc định với trình duyệt Sync và bắt đầu gulp với đồng hồ sass.
Bây giờ, chúng ta hãy xem những thay đổi,
và sau đó chúng ta sẽ đi trước và thực hiện các tập tin gulp thêm,
và loại nhắc gulp.
Bạn sẽ thấy rằng gulp khởi động với đồng bộ trình duyệt và nhiệm vụ xem sass bắt đầu,
và sau đó đồng bộ trình duyệt của bạn sẽ bắt đầu phục vụ các tập tin.
Nếu bạn xem trang web của mình bằng trình duyệt,
bạn sẽ có thể thấy trang web được phục vụ trong trình duyệt.
Hãy để tôi cũng minh họa chức năng của nhiệm vụ đồng hồ.
Vì vậy, tôi sẽ kéo lên style.css và
chỉ cần cố gắng lưu thay đổi và bạn sẽ nhận thấy rằng ở phía bên trái,
nhiệm vụ sass được gọi ngay lập tức và nó
sẽ biên dịch lại các tập tin style.scss vào các tập tin CSS.
Và sau đó trình duyệt đó sẽ tải lại vào thời điểm này.
Với điều này, chúng tôi hoàn thành phần đầu tiên của bài tập gulp.
Trong phần thứ hai, chúng tôi sẽ chuẩn bị thư mục phân phối.
Đây là thời điểm tốt để bạn thực hiện một git-commit với thông điệp Gulp phần 1.