Đến lúc bắt đầu Grunting rồi.
Trong bài tập này và bài tập tiếp theo, chúng ta sẽ lặp lại
cùng một loại thiết lập như chúng ta đã làm với các kịch bản NPM.
Trong phần đầu tiên, chúng ta sẽ thiết lập chuyển đổi từ SCSS sang CSS.
Sau đó, chúng tôi sẽ thiết lập một tác vụ xem và cũng phục vụ mã bằng cách sử dụng đồng bộ hóa trình duyệt.
Trong phần thứ hai của bài tập,
chúng tôi sẽ sử dụng Usman và các nhiệm vụ khác nhau để chuẩn bị nếp gấp phân phối.
Những bài tập này không có nghĩa là cách duy nhất để
thực hiện các cấu hình Grunt hoặc các tập tin gọi.
Đây chỉ là một minh họa về cách chúng ta có thể sử dụng các công cụ này.
Bạn có thể muốn tìm ra cách riêng của bạn để thiết lập tập tin
Grunt của bạn và tập tin cuộc gọi của bạn cho các dự án của bạn.
Bước đầu tiên của chúng tôi trong việc sử dụng Grunt là thiết lập Grunt CLI như một mô-đun NPM toàn cầu.
Để làm điều đó, thêm loại nhắc: NPM -g cài đặt Grunt CLI.
Đây là giao diện dòng lệnh cho Grunt.
Một khi điều này được thiết lập,
sau đó chúng tôi sẽ thiết lập một mô-đun Grunt NPM địa phương để sử dụng trong các dự án của chúng tôi.
Grunt CLI cho phép chúng ta sử dụng Grunt.
Chúng tôi đã thiết lập CLI Grunt.
Sau đó, bước tiếp theo là thiết lập - Grunt cục bộ,
vì vậy; NPM cài đặt Grunt trừ đi tiết kiệm dev.
Sau đó cài đặt Grunt cục bộ.
Một khi bạn đã hoàn thành hai bước đó,
bước tiếp theo là đi đến dự án của chúng tôi và sau đó tạo một tập tin mới,
và chúng tôi sẽ đặt tên nó là Gruntfile.js.
Bên trong Gruntfile.js này, chúng tôi sẽ thiết lập mã để cấu hình các tác vụ Grunt của chúng tôi.
Trong tập tin này, bước đầu tiên là thêm 'use strict' nghĩa là 'use strict',
'use strict' code JavaScript.
Sau đó, bạn nói module.exports
= hàm (grunt).
Sau đó, bên trong đây, chúng tôi sẽ thiết lập cấu hình Grunt cho tất cả các nhiệm vụ.
Như tôi đã đề cập trước đó, Grunt là một Á hậu nhiệm vụ cấu hình dựa trên.
Vì vậy, chúng tôi sẽ cài đặt các plug-in Grunt khác nhau cho
các nhiệm vụ khác nhau và sau đó cấu hình chúng trong tập tin Grunt của chúng tôi.
Để làm cấu hình,
chúng tôi sẽ thêm vào mã ở đây,
nói: Grunt.initconfig
và bên trong InitConfig này,
chúng tôi sẽ thêm vào cấu hình cho các nhiệm vụ Grunt của bánh xe.
Sau khi bạn hoàn thành việc này,
hãy lưu các thay đổi.
Trong bước tiếp theo của
chúng tôi, chúng tôi sẽ thiết lập một vài plug-in Grunt để cho phép chúng tôi chuyển đổi mã SCSS thành mã CSS.
Để làm điều đó, tôi sẽ cài đặt một mô-đun NPM gọi là
Grunt SASS — Grunt SASS, save def.
Thêm vào đó,
tôi sẽ thiết lập thêm hai module Grunt gọi là,
NPM Install Time Grunt, và Jit Grunt.
Hai module — Time Grunt và Jit grunt.
Mô-đun Time Grunt in ra các thống kê thời gian để chạy các tác vụ Grunt khác nhau.
Mô-đun Jit Grunt được sử dụng để tải trong
các plug-in Grunt bất cứ khi nào chúng được yêu cầu trong bất kỳ ứng dụng nào.
Cách thay thế khác là tải trong
các mô-đun Grunt khác nhau một cách rõ ràng trong tập tin cấu hình Grunt của bạn.
Tôi thích sử dụng Jit Grunt để nó sẽ chăm sóc tải
trong bất kỳ plugin Grunt mà tôi cần như có thể được yêu cầu,
như trong khi tôi sử dụng chúng trong mã.
Cài đặt hai Time Grunt và Jit Grunt và một khi chúng được cài đặt,
thì đó là thời gian để cấu hình nhiệm vụ chuyển đổi SASS của chúng tôi.
Bây giờ bạn rõ ràng phải tự hỏi tại sao chúng ta gõ
module.exports này và sau đó chức năng và như vậy.
Đây là cách chúng tôi xác định mô-đun nút.
Chúng tôi sẽ đối phó với cấu trúc của mô-đun nút và tại sao chúng tôi sử dụng cách tiếp cận này
trong khóa học mô-đun nút phía máy chủ sau này trong chuyên môn hóa.
Đối với thời điểm này, chỉ cần chấp nhận rằng đó là cách mã được viết cho Grunt,
bởi vì các tập tin Grunt chính nó
là một mô-đun nút sẽ tải trong các plug-in Grunt khác nhau.
Sau khi chúng tôi làm điều đó, chúng tôi sẽ yêu cầu một vài plugin Grunt ở đây.
Để làm điều đó, chúng tôi sẽ nói yêu cầu ('thời gian- grunt'),
và chúng tôi sẽ nói grunt so với cấu hình mà chúng tôi sử dụng để tải trong Time Grunt.
Để yêu cầu, như bạn sẽ tìm hiểu sau khi bạn tìm hiểu về mô-đun nút,
là một cách để nói rằng tải trong mô-đun nút Time Grunt
được sử dụng trong mô-đun nút cụ thể này.
Tương tự như vậy, tôi sẽ yêu cầu Jit Grunt node module.
Mô-đun nút Jit Grunt này đảm bảo rằng nó sẽ tải trong
bất kỳ mô-đun nút khác hoặc bất kỳ plug-in Grunt khác- đó là các module nút,
về cơ bản, như trong khi chúng thực sự được ngụ ý trong Grunt của tôi để thực hiện các nhiệm vụ khác nhau.
Thay thế sẽ là tải thủ công trong mỗi và mỗi một trong
những Grunt plug-in một cách rõ ràng bằng cách sử dụng tuyên bố yêu cầu.
Tôi đang tiết kiệm cho mình một chút rắc rối bằng cách chỉ sử dụng Jit Grunt,
mà sẽ chăm sóc tải các mô-đun nút khi cần thiết.
Bây giờ di chuyển vào cấu hình,
như chúng ta đã hiểu, Grunt hoạt động trên cấu hình,
vì vậy mỗi Grunt plug-in mà chúng tôi muốn sử dụng để thực hiện một nhiệm vụ,
nó cần phải được cấu hình bên trong tập tin Grunt InitConfig này.
Cấu hình này về cơ bản là một đối tượng JavaScript.
Nếu bạn đã quen thuộc với các đối tượng JavaScript,
bạn bắt đầu hiểu cú pháp rất, rất nhanh.
Nhiệm vụ đầu tiên mà tôi sẽ cấu hình là SASS.
Vì vậy, tôi gõ vào SASS ở đây,
và sau đó bên trong SASS, tôi nói quận.
Bây giờ bạn phải tin rằng đây là cách cấu hình được thực hiện.
Vì vậy, tôi nói dist,
và sau đó bên trong đó,
tôi nói các tập tin, và sau đó trong đó,
tôi chỉ định các tập tin cần phải được chuyển đổi.
Tôi nói, CSS/styles.CSS, mà
là phụ thuộc vào CSS/styles.scss.
Với điều này, chúng tôi hoàn thành cấu hình của nhiệm vụ SASS ở đây.
Một khi chúng tôi hoàn thành cấu hình nhiệm vụ SASS,
nếu bạn thực sự muốn thực hiện nhiệm vụ SASS,
sau đó xuống dưới bạn sẽ cấu hình nhiệm vụ SASS bằng cách nói “Grunt.RegisterTask”,
và sau đó tôi sẽ gọi nhiệm vụ này CSS,
và sau đó tôi sẽ,
trong ngoặc scribe, nói “SASS.”
Bây giờ, để hiểu cú pháp ở đây,
điều này như bạn có thể thấy nó nói “Grunt.RegisterTask” và tên của nhiệm vụ này là CSS.
Và nhiệm vụ này liên quan đến điều gì?
Nhiệm vụ này liên quan đến việc thực hiện nhiệm vụ SASS đã được cấu hình ở đây.
Đây là cách chúng tôi đọc cú pháp này ở đây.
Nếu bạn không muốn, bạn không cần phải cấu hình này,
bởi vì chúng tôi sẽ sử dụng SASS cùng với nhiệm vụ xem để tự động
chạy SASS khi tệp SCSS của chúng tôi được thay đổi.
Với điều này, chúng ta hãy lưu các thay đổi.
Để tôi cho các bạn thấy nhiệm vụ đặc biệt này trong hành động.
Nếu bạn cấu hình nhiệm vụ với tên CSS ở đó,
sau đó thêm dấu nhắc,
bạn có thể gõ “grunt.CSS” và sau đó nó sẽ thực hiện
nhiệm vụ chuyển đổi mã sass sang mã CSS.
Đi đến dấu nhắc lệnh của bạn, tại dấu nhắc,
gõ vào “grunt.CSS” và bạn sẽ thấy
nhiệm vụ SASS thực hiện và sau đó chuyển đổi tập tin styles.sess sang tập tin styles.CSS.
Ngoài ra, như bạn có thể thấy,
Time Grunt sẽ in ra các số liệu thống kê như
thế này để cho biết mỗi nhiệm vụ mất bao nhiêu thời gian.
Nếu điều đó là quan tâm đến bạn,
sau đó bạn có thể xem xét các chi tiết này ở đây.
Trong bước tiếp theo của chúng tôi, chúng tôi sẽ cấu hình đồng hồ và máy chủ,
để giữ một chiếc đồng hồ trên
các tập tin SASS và tự động chuyển đổi chúng khi chúng được thay đổi,
và sau đó chúng tôi sẽ thiết lập máy chủ,
sử dụng BrowserSync để phục vụ trang web của chúng tôi.
Để thiết lập các nhiệm vụ xem và phục vụ,
tôi sẽ cài đặt một vài plug-in grunt hơn,
vì vậy tôi sẽ nói npm cài đặt,
grunt-contrib-watch trừ đi tiết kiệm dev.
Đây là chiếc đồng hồ Grunt-contrib-watch.
Grunt plug-in đó là một mô-đun nút, vì vậy hãy cài đặt đó.
Vì vậy, đồng hồ plugin-in cho phép bạn giữ một chiếc đồng hồ trên các tập tin khác nhau của bạn.
Các plug-in tiếp theo mà tôi sẽ
cài đặt là grunt-browser-sync.
Module BrowserSync là một trong những mà tôi sẽ sử dụng,
để lưu các tập tin từ thư mục dự án của tôi,
để tôi có thể xem trang web trong một trình duyệt.
Một khi tôi đã cài đặt hai mô-đun đó,
đó là thời gian để đi vào grunt.initconfig của tôi,
và sau đó cấu hình hai nhiệm vụ.
Một để giữ một chiếc đồng hồ,
cái thứ hai để phục vụ lên các tập tin bằng cách sử dụng BrowserSync.
Vì vậy, quay trở lại initconfig của tôi,
đặt một dấu phẩy ở đó sau SASS,
và sau đó di chuyển vào dòng tiếp theo.
Luôn luôn nhớ để đặt dấu phẩy này ở đó.
Một dấu phẩy bị thiếu gây ra rất nhiều đau đầu khi bạn đang cố gắng để chạy các nhiệm vụ grunt của bạn.
Rất khó để xác định rằng bạn đã bỏ lỡ dấu phẩy.
Vì vậy, điều quan trọng là phải chú ý đến
cú pháp và đảm bảo rằng bạn không bỏ lỡ bất kỳ dấu phẩy nào trong số đó.
Nó sẽ quay lại để cắn anh vào sai thời điểm.
Vì vậy, nhiệm vụ tiếp theo,
mà tôi sẽ cấu hình là WatchTask.
Vì vậy, tôi nói Watch và tôi muốn xem gì?
Tôi muốn xem các tập tin này, đó là CSS/*.SCSS.
Vì vậy, đây là tập tin SCSS mà tôi muốn xem.
Tất cả các tập tin SCSS trong thư mục CSS của tôi.
Nếu bất kỳ trong số họ được sửa đổi,
sau đó nhiệm vụ tương ứng mà tôi sẽ thực hiện là, SASS.
Nhiệm vụ SASS mà tôi đã cấu hình trước đó.
Vì vậy, với điều này, tôi đã cấu hình WatchTask của tôi,
để giữ một chiếc đồng hồ trên các tập tin SCSS và sau đó
tự động chuyển đổi chúng bằng cách gọi SASS.
Bây giờ với WatchTask tôi thực sự có thể giữ một chiếc đồng hồ trên một số tập tin,
và sau đó tự động gọi các nhiệm vụ tương ứng cho những tập tin.
Vì vậy, ví dụ, tôi có thể giữ một chiếc đồng hồ trên các
tập tin JavaScript của tôi và sau đó tự động làm JS gợi ý,
khi các tập tin của tôi thay đổi.
Hoặc để làm nhận dạng và như vậy.
Bây giờ, cái tiếp theo mà tôi sẽ cấu hình là BrowserSync.
Một lần nữa đừng quên dấu phẩy sau khi WatchTask,
và sau đó gõ vào BrowserSync.
Tôi sẽ nói BrowserSync ở đây và sau đó cho BrowserSync,
tôi sẽ nói cấu hình một nhiệm vụ bên trong.
Bây giờ, đây là cú pháp mà chúng tôi sử dụng để đưa vào
cấu hình bên trong tập tin grunt của chúng tôi.
Vì vậy, nó nói BrowserSync dev.
Bây giờ, nếu bạn hỏi tôi tại sao,
chúng tôi chỉ cần đọc tài liệu,
cho mỗi một trong những trình cắm thêm đó và sau đó tìm ra cách cấu hình các trình cắm thêm đó.
Vì vậy, tôi đã đọc tài liệu và tôi đã tìm ra
một số thiết lập cơ bản cho mỗi nhiệm vụ này vì vậy đó là lý do tại sao tôi chỉ gõ chúng vào.
Rõ ràng nếu bạn muốn linh hoạt hơn,
bạn có thể muốn đọc tài liệu tương ứng và sau đó tìm ra
các cách khác để cấu hình các tác vụ này.
Cấu hình của tôi ở đây chỉ là một cách để giải quyết hoặc giải quyết các vấn đề.
Vì vậy, ở đây tôi chỉ định các BSFiles,
vì vậy tập tin này chỉ định
những tập tin cần được theo dõi bởi BrowserSync của tôi và sau đó khi bất kỳ tập tin nào thay đổi,
sau đó BrowserSync của tôi sẽ làm cho trình duyệt được tải lại.
Vì vậy, tôi sẽ xem tất cả các tập tin trong thư mục CSS của tôi, các
tập tin HTML trong thư mục dự án của tôi,
và sau đó tất cả các tập tin JavaScript của tôi trong thư mục JS.
Vì vậy, với điều này tôi đã cấu hình tất cả những tập tin mà tôi sẽ giữ một chiếc đồng hồ,
và sau đó tự động gây ra một tải lại của trang của tôi khi được yêu cầu.
Và sau đó, cấu hình tiếp theo mà tôi cần
làm là một số tùy chọn khác, cho BrowserSync của tôi.
Vì vậy, các tùy chọn mà tôi sẽ chỉ định là,
WatchTask true, có nghĩa là có một WatchTask đang chạy,
và thư mục cơ sở cho máy chủ của tôi.
Vì vậy, tôi nói BaseDir,
và sau đó tôi chỉ định, dấu gạch chéo chấm.
Vì vậy, thư mục hiện tại,
như thư mục cơ sở của tôi.
Vì vậy, với những thay đổi này,
hãy để tôi lưu các thay đổi vào tập tin grunt của tôi,
và sau đó tôi sẽ đi xuống dưới đây và sau đó cấu hình một nhiệm vụ grunt, ở đây được gọi là mặc định.
Vì vậy, tôi sẽ chỉ định nhiệm vụ là mặc định.
Đối với nhiệm vụ mặc định này, tôi cần phải làm gì?
Tôi cần phải thực hiện
BrowserSync và cũng là nhiệm vụ thứ hai mà tôi sẽ làm là xem.
Tôi sẽ phải thực hiện tác vụ BrowserSync trước tiên và sau đó là WatchTask sau.
Bởi vì tác vụ BrowserSync sẽ bắt đầu phục vụ máy chủ của tôi.
Nếu tôi thực hiện WatchTask trước và nhiệm vụ BrowserSync sau này,
WatchTask sẽ về cơ bản,
dừng mọi thứ và sau đó tất cả các nhiệm vụ còn lại đằng sau sẽ không thực hiện.
Vì vậy, nếu bạn đang sử dụng WatchTask,
hãy làm điều đó như là một trong những cuối cùng trong chuỗi mà bạn chỉ định trong dấu ngoặc vuông này.
Với điều này, dự án của tôi bây giờ được cấu hình,
để cả hai giữ một chiếc đồng hồ trên các tập tin SASS của tôi và phục vụ nó lên bất cứ khi nào cần thiết.
Vì vậy, điều này hoàn thành tập tin grunt của tôi, chúng
ta hãy quay trở lại thiết bị đầu cuối của chúng tôi.
Quay trở lại thiết bị đầu cuối của
tôi, tôi đã mở một tab khác và sau đó trong tab này,
tôi sẽ chạy nhiệm vụ grunt,
mà cũng sẽ giữ BrowserSync của tôi chạy và sẽ phục vụ lên
các tập tin và tự động tải lại trang web,
nếu bất kỳ của những tập tin thay đổi.
Vì vậy, nếu bạn cấu hình một nhiệm vụ như một nhiệm vụ mặc định như chúng tôi đã làm trong bài tập,
sau đó tại dấu nhắc,
tôi chỉ cần gõ grunt và sau đó nó sẽ tự động thực hiện nhiệm vụ mặc định.
Một khi nhiệm vụ grunt của tôi bắt đầu chạy,
bạn có thể thấy rằng nó đã bắt đầu BrowserSync và nó đang phục vụ lên
các tập tin và nó cũng đang chạy WatchTask
, đang chờ đợi cho bất kỳ thay đổi để tự động chạy nhiệm vụ SCSS.
Để chứng minh cho bạn làm thế nào các nhiệm vụ SCSS sẽ được kích hoạt,
bất cứ khi nào tôi thực hiện bất kỳ thay đổi để tập tin Styles.scss của
tôi, vì vậy tôi đưa lên các tập tin Styles.scss,
và tôi chỉ đơn giản là sẽ lưu tập tin này.
Và sau đó bạn sẽ nhận thấy rằng ngay lập tức,
ở phía bên trái nhiệm vụ SASS được gọi và chạy và sau đó biên dịch lại và điều này
cũng sẽ gây ra các tập tin Styles.scss được thay đổi, sau khi được biên dịch lại.
Sau đó, điều này sẽ kích hoạt BrowserSync để tự động tải lại trang web của tôi.
Với điều này, chúng tôi hoàn thành bài tập grunt phần một của chúng tôi.
Đây là thời điểm tốt để lưu các tập tin của bạn,
vào Git Repository với thông điệp Grunt phần một.