FLASH SALE! Up to 40% off on unlimited courses, tutorials and creative asset downloads SAVE NOW
Advertisement
  1. Web Design
  2. Terminal
Webdesign

Dòng lệnh cho thiết kế Web: Giới thiệu

by
Length:MediumLanguages:
This post is part of a series called The Command Line for Web Design.
The Command Line for Web Design: Grasping the Basics

Vietnamese (Tiếng Việt) translation by Binh T. Nguyen (you can also view the original English article)

Trong một thời gian dài, làm việc với các dòng lệnh được xem như một lĩnh vực bên ngoài của hoạt động thiết kế web. Nó được sử dụng chuyên biệt cho những việc như quản trị máy chủ và quản lý tập tin và tất cả những việc không liên quan đến công việc hàng ngày của một người lập trình web.

Nhưng đó chỉ là những điều trong quá khứ, nhưng hiện tại thì điều đó không còn đúng nữa.

Ngày nay, có hàng ngàn công cụ hỗ trợ dòng lệnh đáng kinh ngạc dành riêng cho ngôn ngữ front end và quy trình công việc. Những lợi ích to lớn mà chúng cung cấp đồng nghĩa với việc tận dụng những dòng lệnh đang trở thành kĩ năng thiết yếu hơn bao giờ hết cho những người lập trình web.

some familiar command line tools
Một vài công cụ thường dùng

Tôi thừa nhận là một thời gian sau lần đầu tiên tôi gặp những loại công cụ thiết kế web này, tôi có một chút ám ảnh với những dòng lệnh. Tôi bị ảnh hưởng bởi những ý tưởng dành-cho-lập-trình-viên-chứ-không-phải-người-thiết-kế, và tôi luôn tìm kiếm những sự lựa chọn khác thay cho việc để những dòng lệnh một cơ hội.

Và rồi, cuối cùng, tôi có một quyết định liều lĩnh khi một dự án tôi thực sự muốn sử dụng không thể tránh khỏi yêu cầu tương tác với dòng lệnh. Ban đầu tôi có hơi lo sợ, nhưng sau đó với một sự ngạc nhiên thú vị tôi phải thốt lên rằng: 

“Điều này thật tuyệt vời, tôi không hiểu tại sao tôi không bắt đầu học những thứ này sớm hơn!”

Hiện tại, tôi sử dụng dòng lệnh trong hầu hết những dự án thiết kế web và tôi sẽ không thể thiếu nó. Dòng lệnh vô cùng hữu ích trong hầu hết các giai đoạn của một quá trình thiết kế web thông thường.

Về loạt bài này

Nhưng đây mới là vấn đề, ngay khi bây giờ tôi không thể làm hầu hết những thứ bạn sẽ tìm được trong một hướng dẫn “Bắt đầu với dòng lệnh” thông thường. Nếu bạn không bao giờ học cách làm sao để mkdir hay cd hay ls cũng không thành vấn đề. Sự thật là, là một người thiết kế web bạn thực sự không cần những công cụ đó. Kĩ năng duy nhất bạn cần là trực tiếp tạo điều kiện cho việc thực hiện những dự án thiết kế web của bạn trở nên hiệu quả hơn.

Đó là lý do loạt bài này không nói về cách “làm thế nào để chạy những dòng lệnh khó hiểu cho những tác vụ bạn không bao giờ làm.” hay nó có phải là “một tiến trình dev phức tạp được làm đơn giản cho người thiết kế”. Đây là một loạt bài đặc biệt dành cho những người thiết kế web, chỉ ra cho bạn cách sử dụng những công cụ vô cùng hữu ích, đặc biệt cho những dự án thiết kế web.

Một khi bạn bắt đầu mang những dòng lệnh vào trong quy trình thiết kế của mình nó sẽ mở ra một thế giới hoàn toàn khác của những lựa chọn, tiết kiệm một khoảng lớn thời gian quý giá của bạn, và, tôi hứa là, bạn sẽ không bao giờ phải hối tiếc.

Tại sao Dòng lệnh lại tuyệt vời đối với Thiết kế web

Qua loạt bài hướng dẫn này bạn sẽ tìm hiểu những tiến trình được lái bởi dòng lệnh có thể vĩnh viễn thay đổi cách bạn tiếp cận việc thiết kế web.

Sau khi giúp bạn bắt đầu với những điều cơ bản, chúng tôi sẽ đi thẳng vào các kĩ năng thực tế để bạn có thể sử dụng chúng ngay lập tức. Khi bạn có cái nhìn cụ thể ở mỗi chủ đề chúng tôi đề cập, bạn sẽ bắt đầu thấy một bức tranh dầm hình thành về lý do tại sao dòng lệnh lại là một công cụ cần thiết cho thiết kế web đến vậy.

Những chủ đề chính

Ta hãy đi nhanh qua những chủ đề chúng tôi sẽ đề cập trong loạt bài này. Có tất cả năm chủ đề chính:

1. Quản lý các gói của bên thứ ba

Những nhà thiết kế web thường sử dụng những gói của bên thứ ba như jQuery, Bootstrap, Modernizr, Font Awesome, Normalize.css và một danh sách dài những thứ khác. Trước khi có các dòng lệnh, việc sử dụng các gói bên ngoài thường là:

  1. Giữ một danh sách những dấu trang mà bạn có thể tải xuống phiên bản mới nhất của mỗi gói.
  2. Truy cập những website nói trên để tải về các gói mỗi khi bạn cần chúng.
  3. Lặp lại toàn bộ quy trình mỗi khi một gói được cập nhật.
  4. Chuyển những phiên bản cập nhật vào mỗi dự án sử dụng chúng.

Xử lý các chương trình quản lý gói một cách thủ công thường chậm và khó khăn, nhưng với dòng lệnh thì đây chỉ là điều trong quá khứ.

Bạn có thể lấy trực tiếp các gói vào dự án chỉ bằng việc gõ vài từ, ví dụ:

 bower install jquery

Bạn có thể giữ cho các gói luôn được cập nhật bằng một câu lệnh đơn giản như:

 bower update jquery

Không còn phải tự mình tải xuống những gói từ web hay cập nhật chúng khi thay đổi nữa, và đó chỉ là một chức năng nhỏ trong những việc bạn có thể làm thông qua việc quản lý các gói dòng lệnh.

2. Sẵn sàng để sử dụng mã Front End

Ba ngôn ngữ bạn gần như có thể thấy ở hầu hết các dự án thiết kế web là CSS, HTML và JavaScript. Các công cụ dòng lệnh mở ra những hướng mới để làm cho việc sản xuất và phân phối mã trong những ngôn ngữ này trở nên hiệu quả và mạnh mẽ hơn.

Một trong những thứ mạnh mẽ nhất chúng ta có thể sử dụng dòng lệnh với CSS là để biên dịch bộ tiền xử lí, như là StylusSass / SCSS và LESS. Với dòng lệnh bạn có thể nhanh chóng biên dịch bất kì tập tin tiền xử lí nào. Bạn cũng có thể thiết lập biên dịch tự động để tập tin CSS của bạn được biên dịch lại bất kì khi nào bạn thay đổi tập tin tiền xử lí.

Thông qua dòng lệnh chúng ta cũng có thể tăng cường quy trình công việc CSS với những thứ như autoprefixing, clean tập tin và nén. Một cách tương tự chúng ta cũng có thể tối ưu hóa JavaScript với việc nối tập tin và tối ưu code.

Và với HTML, chúng tôi tiếp cận với ngôn ngữ như Jade cho ta khả năng viết ngôn ngữ HTML dưới dạng viết tắt, và cả khả năng để phát triển những hệ thống mẫu để ngăn chúng ta phải viết lại một khối mã nhiều lần trong suốt dự án.

3. Tự động hóa với Task Runners

Có thể biên dịch CSS với một vài từ, sau đó thu gọn JavaScript với một vài từ khác thật tuyệt. Nhưng khi mọi thứ bắt đầu có sức mạnh thật sự là khi bạn có thể làm mọi thứ dự án của bạn cần cùng một lúc với một lệnh đơn.

Bằng việc sử dụng một thứ gọi là “task runner”, một lệnh đơn từ như gulp hay grunt có thể được thiết lập để biên dịch tập tin tiền xử lí của bạn sau đó biên dịch, autoprefix, clean và nén tập tin CSS kết quả lại, sau đó tập tin Jade của bạn được biên dịch sang HTML, và tập tin JS của bạn được nối và tối ưu hóa–tất cả chỉ trong một vài giây.

Bạn cũng có thể cài đặt task runners để giải quyết những việc này tự động cho bạn. Sau khi chạy một lệnh như gulp watch hay grunt watch bạn có thể chỉ cần tiếp tục làm việc trong tập tin thô của dự án trong khi đó, ở chế độ nền, tất cả trình biên dịch và tối ưu hóa được giải quyết cho bạn một cách tự động.

Task runners hoàn toàn linh hoạt và có thể được cấu hình như bạn muốn, vì thế không có điểm dừng cho những cách bạn có thể thiết lập dự án của mình. Một cách đơn giản là điều chỉnh mọi thứ tốt để phù hợp với mỗi tình huống khi cần.

4. Live reload, Đồng bộ trình duyệt & Kiểm tra đa thiết bị

Việc nạp lại trực tiếp giúp bạn không cần phải nhấn nút refresh và tập trung vào việc lấy phản hồi thời gian thực một cách trơn tru với những thay đổi trong thiết kế khi bạn thực hiện chúng.

Sau khi bạn đã tự động hóa task runners, bạn có thể thêm live reload vào, làm cho nó phù hợp với bất kì cấu hình nào bạn tạo cho dự án. Bạn có thể quyết định chính xác những gì gây ra live reload, có thể là biên dịch tiền xử lí, thay đổi html hay bất kì thứ gì bạn muốn.

Như một phần của việc cho phép live reload bạn cũng sẽ có một bản xem trước của trang web trên localhost, tức là một bản mô phỏng của một máy chủ web chạy trên máy tính của bạn. Điều này rất tốt cho việc đảm bảo mọi thứ làm việc như mong đợi qua giao thức https:// , ngược lại với giao thức file://.

Bạn cũng sẽ tìm hiểu để đồng bộ trình duyệt, nhờ đó bạn có được một URL bạn có thể đưa vào nhiều trình duyệt và tất cả đều đồng bộ với nhau. Ví dụ, click nút nav trên Chrome sau đó bạn sẽ thấy làm cách nào mà Firefox, Opera và Safari phản ứng với hành động đó cùng lúc.

Việc đồng bộ trình duyệt không bị giới hạn cho một thiết bị. Bạn cũng có thể đi đến cùng một URL trên máy tính bảng, điện thoại hay bất kì thiết bị nào khác trên cùng một kết nối và mỗi cái hiển thị một bản xem trước được đồng bộ. Tất cả những điều này đến với nhau để cho bạn thiết lập hoàn hảo cho việc kiểm tra chéo trình duyệt và thiết bị.

Và bởi vì bạn xây dựng điều này ở trên cùng của việc thiết lập task runner, tất cả trở nên trực tiếp với những lệnh như grunt start hay gulp start.

5. Scaffolding những dự án mới

Scaffolding những dự án mới bằng tay có thể là một điều đau đầu. Để toàn bộ cấu trúc thư mục và tập tin được thiết lập và tất cả các tập tin được kết nối và thiết lập để làm việc cùng nhau có thể rất tốn thời gian.

Bằng việc sử dụng dòng lệnh, tuy nhiên, bạn có thể scaffold tất cả những loại dự án trong vài giây, hoàn hảo khi bạn muốn thuê các thư viện mã lệnh bên thứ ba và bắt đầu lập trình như Foundation, Bootstrap, HTML5 Boilerplate và Google Web Starter Kit.

Với những phương pháp chúng tôi sẽ đề cập, những dự án scaffold mới của bạn sẽ không chỉ có tất cả những mã chúng cần, mà task runner của chúng được thiết lập trước vì thế những thứ như biên dịch tự động và bản xem trước local host sẵn sàng được đưa ra.

Tiếp tục

Ngay sau đây, nếu bạn đã sẵn sàng tôi sẽ gặp bạn trong hướng dẫn đầu tiên!

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.