Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Terminal
Webdesign

Dòng lệnh cho thiết kế web: khởi động front-end code

by
Difficulty:BeginnerLength:LongLanguages:
This post is part of a series called The Command Line for Web Design.
How to Install NPM and Bower
The Command Line for Web Design: Automation With Grunt

Vietnamese (Tiếng Việt) translation by Andrea Ho (you can also view the original English article)

Là một nhà thiết kế web, có ba ngôn ngữ mà bằng cách này hoặc cách khác bạn đảo bảo sẽ làm việc với chúng: CSS, HTML và JavaScript. Trong hướng dẫn này, bạn sẽ tận dụng dòng lệnh để giúp bạn phát triển với 3 ngôn ngữ này mạnh mẽ hơn và hiệu quả hơn.

Bạn sẽ tìm hiểu cách sử dụng dòng lệnh để:

  • Biên dịch tiền xử lý (Stylus, Sass, và LESS) code cho CSS
  • Autoprefix CSS
  • Nén, kết hợp và làm đẹp CSS
  • Biên dịch Jade cho HTML
  • Kết hợp và thu gọn JavaScript

Chú ý: hướng dẫn này giả định bạn đã hoàn thành các hướng dẫn trước trong loạt bài. Nếu bạn chưa hoàn thành chúng, bạn sẽ thấy hữu ích khi trở lại và theo dõi chứng trước khi bắt đầu.

Tiền xử lý CSS

Nếu bạn chưa từng làm việc với các bộ tiền xử lý CSS trước đó, hãy thử qua ngay lập tức. Khi bạn tìm thấy bộ tiền xử lý mà bạn thấy phù hợp với phong cách code của mình, có thể bạn sẽ không bao giờ code CSS thuần lần nữa.

Ba bộ tiền xử lý thường được cân nhắc chọn lựa là Stylus, Sass / SCSS và LESS. Tuts+ có một loạt các hướng dẫn và khóa học rất hay để giúp bạn tìm hiểu làm thế nào để viết theo cú pháp của 3 preprocessor (bộ tiền xử lý).

Trong hướng dẫn này, chúng tôi sẽ giới thiệu cho các bạn cách sử dụng dòng lệnh để biên dịch code cho từng loại preprocessor.

Stylus

Mỗi người dùng ưa thích một bộ tiền xử lý (preprocessor), và của tôi là Stylus. Stylus sử dụng cú pháp tối giản có thể được viết rất nhanh, có chức năng rất mạnh mẽ, và được các thư viện bên thứ ba hỗ trợ, như Jeet và Kouto-Swiss.

Bạn có thể đọc tất cả về Stylus tại: http://stylus-lang.com/

Cài đặt Stylus

Để cài đặt Stylus toàn cục, bạn có thể dùng nó để biên dịch các file ".styl" bất kỳ, hãy chạy lệnh này:

Biên dịch Stylus

Cách dễ nhất để biên dịch Stylus là sử dụng dòng lệnh này:

Lệnh này sẽ biên dịch "example.styl". thành "example.css" trong cùng thư mục.

Chia nhỏ ra ta bắt đầu lệnh này bằng stylus. Sau đó chúng ta dùng < example.styl để cho biết file input của Stylus, theo sau đó là > example.css để báo hiệu tên của file CSS chúng ta muốn tạo ra.

Đồng thời bạn cũng có chọn lựa để bổ sung các cờ vào lệnh này, chẳng hạn như dùng cờ --compress để bỏ khoảng trắng khỏi file CSS kết quả:

Như giải pháp thay thế khi biên dịch mỗi lần một file, bạn có thể biên dịch tất cả file Stylus trong một thư mục thành các CSS trong một thư mục khác. Để thực hiện, sau lệnh stylus, xác định thư mục nguồn, sau đó dùng cờ --out sau đó là thư mục đích.

Ví dụ, để biên dịch tất cả file Stylus from thư mục tên "source_files" thành "asset/css":

Chú ý: thư mục mà bạn đang biên dịch cần tồn tại trước khi bạn chạy lệnh này vì hoạt động sẽ thất bại nếu không thể tìm ra thư mục cụ thể để xuất các file CSS.

Có một số chọn lựa khác mà bạn có thể tận dụng khi đang dùng Stylus qua dòng lệnh. Để đọc tất cả về chúng, hãy đến trang http://stylus-lang.com/docs/executable.html

Sass / SCSS

Sass có thể là bộ tiền xử lý phổ biến nhất tại thời điểm này. Nó cực kỳ mạnh mẽ và có môt công động mạnh mẽ và tích cực. Được hỗ trở bởi những thư viện bên thứ ba lớn như Compass, BourbonSusy.

Hãy đọc thêm về Sass tại: http://sass-lang.com/

Bạn có hai chọn lựa khi nói đến biên dịch Sass trên máy của bạn: bạn có thể chọn Ruby để xử lý hoặc bạn có thể dùng LibSass.

Sass đầu tiên được tạo ra để chạy trên Ruby, và nếu bạn tìm kiếm 100% hỗ trợ và tính năng, đó có lẽ là chọn lựa mà bạn muốn. Ví dụ, nếu bạn muốn dùng Compass thì cách dễ nhất là dùng biên dịch Ruby.

LibSass được tạo ra như một giải pháp, và một trong chọn lựa để giúp biên dịch sass thông qua npm package. Phương pháp này biên dịch sass nhanh hơn, thời gian biên dịch khoảng 5 giây bằng Ruby ít hơn khoảng nửa giây bằng LibSass. Tuy nhiên, có thể bạn thấy các tính năng nhất định và code của bên thứ ba không được hỗ trợ.

Bạn chọn lựa phương pháp là tuỳ vào sở thích cá nhân, nhưng nguyên tắc chung tôi khuyên bạn là dùng LibSass để nhanh hơn, trừ khi bạn có điều đặc biệt gì đó (như Compass) cần đến biên dịch bằng Ruby.

Dù bạn chọn lựa phương pháp gì, chúng ta cũng xem cả hai, vậy có thể bạn dùng cả hai.

Cài đặt Ruby Sass

Để biên dịch Sass bằng Ruby, đầu tiên bạn sẽ cần cài đặt Ruby trên máy của bạn.

Nếu bạn dùng Mac, bạn rất may vì Ruby đã cài sẵn vì thế bạn không phải làm gì.

Nếu bạn dùng Windows, hãy đến trang http://rubyinstaller.org/ sau đó tải về và chạy bộ cài đặt. Tiếp theo, cài đặt Sass bằng lệnh này:

Sass sẽ tự động được tải về và cài đặt cho bạn. Kiểm tra kỹ bản cài đặt thành công bằng lệnh:

Bạn sẽ thấy số phiên bản và tên của bản cài đặt Sass hiển thị trong terminal của bạn:

Biên dịch với Ruby Sass

Để biên dịch một file bằng Ruby sass, chỉ cần gõ sass, tiếp theo là tên của input file, một khoảng trắng, sau đó tên file biên dịch mà bạn muốn đặt.

Theo dõi bằng Ruby Sass

Ruby Sass có hàm dựng sẵn "watch" (chúng ta sẽ tìm hiểu thêm sau đó), hàm này sẽ theo dõi các file có thay đổi và tự động biên dịch lại chúng mỗi lần chúng được lưu lại.

Để sử dụng, bổ sung cờ --watch trong lênh của bạn, sau đó tách biệt các tên của source và các file biên dịch trong một dấu hai chấm thay vì một khoảng trắng:

Bạn cũng có xác định toàn bộ các thư mực để theo dõi và xuất ra, thay vì chỉ một file, như vậy:

Khi việc theo dõi được bắt đầu, bạn sẽ thấy terminal như thế này:

Biết thêm thông tin về các lệnh

Để đọc tất cả các tùy chọn hiện có thông qua dòng lệnh chạy Ruby Sass:

Một tài liệu đọc về dong lệnh sẽ được hiển thị trong terminal của bạn:

Bạn có thể sử dụng cờ --help để biết thêm thông tin về lệnh bất kỳ mà bạn sử dụng. Chỉ cần gõ tên của lệnh theo sau là --help và bạn sẽ có được thông tin tương tự như ở trên trong mỗi trường hợp.

Cài đặt LibSass / node-sass

Nếu bạn dùng LibSass, bạn có thể bắt đầu theo cùng phương pháp mà bạn đã dùng để cài đặt các npm package trước đó trong loạt hướng dẫn này.

Bản thân LibSass được xây dựng bằng C++ nhưng có rất nhiều triển khai của thư viện này, bao gồm một số được xây dựng để làm việc với Node.js. Trong trường hợp này, chúng ta ẽ dùng package node-sass.

Để cài đặt node-sass toàn cục, hãy chạy lệnh này:

Biên dịch với node-sass

Để biên dịch một file, gõ node-sass, sau đó là tên của input file và tên bạn muốn đặt cho file CSS đã biên dịch:

Để kiểm soát thư mục chứa file CSS đã biên dịch, bổ sung cờ --output và thư mục đích đến ở giữa tên của các file input và output:

Theo dõi với node-sass

Giống như Ruby Sass, node-sass cũng dùng cờ --watch để kích hoạt tự động biên dịch của các file khi có thay đổi:

Bạn cũng có thể xác định đối tượng theo dõi là tất cả thư mục, và thư mục để xuất file, thay vì chỉ với các file đơn lẻ:

Khi sử dụng node-sass để theo dõi nguyên cả thư mục, bảo đảm kèm theo /* vào cuối cùng để xác định bạn muốn theo dõi toàn bộ file trong đó.

Dừng quá trình "watch" (theo dõi)

Khi bạn có quá trình “watch” đang chạy, bạn có thể dừng lại bằng cách:

  • Đóng terminal
  • Nhấn CTRL + C

LESS

Bộ tiền xử lý LESS cũng rất phổ biến, và có lẽ triển khai nổi tiếng nhất với của nó là trong framework Twitter Bootstrap. LESS là một bộ tiền xử lý tuyệt vời đầu tiên để bắt đầu vì nó rất giống với việc viết bằng CSS thuần.

Đọc thêm về LESS tại: http://lesscss.org/

Cài đặt LESS

Để cài đặt LESS toàn cục, cho phép bạn dùng để biên dịch các file ".less" ở bất kỳ đâu, chạy lệnh này:

Biên dịch LESS

Mở terminal tại thư mục chứa file LESS bạn muốn biên dịch và dùng lệnh lessc cùng với tên file, ký hiệu >, sau đó là tên bạn muốn đặt cho file CSS đã biên dịch:

Autoprefixing CSS

Autoprefixer là một npm package kiểm tra với CanIUse.com để cập nhật thông về tin thuộc tính CSS nào cần có các prefix và thuộc tính nào thì không cần. Sau đó nọ tự động xử lý viêc bổ sung những prefix cần thiết vào code của bạn.

Việc này cực kỳ hữu hiệu, trừ khi bạn theo dõi bản cập nhật trình duyệt thường xuyên, bạn có thể dễ dàng kèm theo các prefix của browser bạn Nó cũng có nghĩa là bạn có thể viết tất cả các CSS của bạn mà không cần phải bận tâm đến các prefix, và để Autoprefixer đảm trách chúng giúp bạn.

Ví dụ: autoprefixer sẽ chuyển code này:

...thành thế này:

Đọc thêm về Autoprefixer tại: https://www.npmjs.com/package/autoprefixer

Cài đặt Autoprefixer

Cài đặt Autoprefixer toàn cục với:

Autoprefix cho một file CSS

Để autoprefix cho một file CSS, hãy sử dụng lệnh sau:

Không giống như biên dịch một file preprocessor, mặc định lệnh này không tạo ra một file thứ hai. File mục tiêu của bạn sẽ được cập nhật, với prefix chính xác được thêm vào trực tiếp.

Nếu bạn muốn Autoprefixer tạo ra file thứ hai, tách biệt file, thì hãy thêm cờ --output và theo sau là tên file mà bạn mong muốn:

Tối ưu hóa CSS

Bạn luôn muốn CSS mà bạn triển khai trên các website của bạn được giảm xuống kích thước nhỏ nhất có thể. Để đạt được điều này, bạn có thể sử dụng các kỹ thuật tối ưu hóa của:

  • Compresssion (nén) - loại bỏ khoảng trắng và chú giải
  • Cleaning (làm sạch) - sửa code để ít hao tốn không gian hơn.

Nén với preprocessors (bộ tiền xử lý)

Stylus, Ruby Sass và node-sass đều có khả năng nén CSS của bạn trong quá trình biên dịch.

Trong Stylus, thêm vào cờ --compress:

Trong Ruby Sass, thêm vào cờ --style, theo sau là compressed:

Trong node-sass, thêm cờ --output-style, theo sau là compressed:

Làm sạch và Nén lại bằng clean-css

Nếu bạn không sử dụng bộ tiền xử lý CSS, hoặc bạn chỉ muốn tối ưu hóa mã tối code, bạn có thể sử dụng package clean-css để nén cái file CSS của bạn nhiều hơn.

Quy trình nén thông thường cơ bản chỉ xóa khoảng trắng và chú thích trong CSS của bạn. Mặt khác package clean-css có thể những việc như:

  • Hợp nhất những selector bị trùng lặp
  • Hợp nhất những thuộc tính trùng lặp có cùng style.
  • Làm tròn những số có nhiều số thập phân
  • Loại bỏ dấu chấm phẩy và khoảng trắng cuối mỗi selector.

Hợp nhất các selector trùng lặp có thể hữu dụng, ví dụ, bạn sẽ muốn đưa tất cả bố cục của một class ban đầu vào file "layout.css" trong khi màu sắc cho cùng class ban đầu là "color.css".

Làm tròn con số thật tuyệt khi bạn dùng hàm tiền xử lý để chuyển đổi một giá trị thành đơn vị rem và bạn có được kết quả như 2.3649858573rem. Với clean-css con số đó sẽ được làm tròn thành 2 số thập phân, khiến giá trị gọn hơn 2.36rem.

Bạn có thể đọc thêm về clean-css tại: https://github.com/jakubpawlowicz/clean-css

Cài đặt clean-css

Cài đặt clean-css toàn cục với lệnh:

Sử dụng clean-css

Để dọn sạch một file CSS, hãy sử dụng:

Lưu ý: Dù tên package “clean-css” có chưa dấu gạch nối, nhưng hãy bảo đảm bắt đầu lệnh của bạn với cleancss không có dấu gạch ngang.

Để xác định tên file mới do clean-css tạo mới, hãy sử dụng cờ -o, theo sau đó là tên file mới, trước tên của file bạn đang hướng tới:

Có một số tùy chọn lệnh khác có sẵn cho clean-css, bạn có thể đọc tất cả về chúng tại: How to user Clean CSS CLI.

HTML & JavaScript

Jade

Jade là một ngôn ngữ tuyệt vời để biên dịch sang HTML, và giúp bạn nhanh chóng viết code để việc phát triển trở nên nhanh hơn nhiều, và tạo hệ thống template của riêng bạn để tự bạn có thể viết lại code.

Tìm hiểu thêm về Jade tại: https://www.npmjs.com/package/jade

Cài đặt Jade

Để cài đặt Jade toàn cục, hãy chạy lệnh:

Biên dịch Jade

Jade, được tạo bởi người tạo ra Stylus, sử dụng cú pháp lệnh cơ bản giống nhau của các dấu hiệu <> để biên dịch một file:

Lệnh này sẽ biên dịch “index.jade” thành "index.html" vào cùng một thư mục.

Để biên dịch tất cả các file Jade trong thư mục nhất định:

Để thiết lập thư mục bạn muốn ghi các file HTML của bạn, hãy thêm cờ --out giữa tên của các thư mục input và output:

Để sử dụng hàm watch của Jade để tự động biên dịch khi lưu, thêm cờ --watch ngay sau lệnh jade:

Với các file riêng lẻ:

Hoặc cho toàn bộ các thư mục:

Kết hợp và thu gọn file JavaScript

Cũng như chúng ta muốn các file CSS được triển khai cần được tối ưu hóa, do đó chúng ta cũng muốn phân phối các file JavaScript của mình theo cách hiệu quả nhất có thể.

Thông thường ta có nhiều file JS tham gia vào dự án của chúng ta, chẳng hạn như Modernizr, jQuery và code riêng của bạn, nhưng đồng thời ta muốn giảm tối thiểu số lương yêu cầu http do trang của chúng ta tạo ra. Ngoài ra, chúng ta muốn đảm bảo thời gian tải cho JavaScript siêu nhanh.

Phương pháp tốt nhất để xử lý cả hai vấn đề là cùng lúc ghép các file JavaScript thành một file duy nhất, nghĩa là chúng tôi chỉ cần một http request để tải file đó và rút gọn kích thước file kết quả nhỏ nhất có thể.

Chúng tôi sẽ sử dụng package UglifyJS để xử lý quy trình này.

Để cài đặt uglify-js toàn cục, hãy chạy:

Để kết hợp hai file JavaScript, sau đó loại bỏ khoảng trắng và các chú thích ra khỏi file kết quả, hãy sử dụng lệnh uglifyjs và theo sau là tên của từng file nguồn của bạn, giữa mỗi file có dấu cách. Sau đó bổ sung cờ --output và tên mà bạn muốn đặt cho file đã kết hợp và thu gọn:

Cũng giống như việc loại bỏ mặc định các khoảng trắng và những bình luận, bạn cũng có thể bổ sung phần nén (compression), nó sẽ thực sự thay đổi code để giảm thiểu kích thước. Để thực hiện điều này, bổ sung cờ --compress vào cuối câu lệnh.

Một tuỳ chọn tối ưu khác là "cắt nhỏ" code, nó sẽ xử lý các tên của biến, hàm và đối số thành những ký tự đơn lẻ. Để dùng tuỳ chọn này, bổ sung cờ --mangle vào cuối lệnh:

Bạn cũng có thể áp dụng nén và xử lý các tên bằng cách truyền vào cả 2 cờ:

Đọc thêm về các lệnh này mà bạn có thể chạy cùng UglifyJS tại https://www.npmjs.com/package/uglify-js

Một ghi chú về việc thu gọn JavaScript của bên thứ ba

Nếu bạn đang kết hợp và(hoặc) thu gọn các script bên thứ ba như jQuery, Mondenizr v.v. hãy bảo đảm bạn dùng phiên bản mở rộng của chúng. Thông thường sẽ là một ý tưởng tệ khi phải thu gọn lần nữa các file trước đó đã được thu gọn vì bạn có thể làm hỏng các chức năng của chúng.

Bạn có thể xác định các file đã được thu gọn rồi vì thường nó sẽ tuân thủ nguyên tắc đặt tên là "name.min.js", trong khi các phiên bản đầy đủ sẽ là "name.js".

Trong hướng dẫn tiếp theo

Bây giờ bạn biết cách hoàn thành một số task cực hữu ích bằng các lệnh khác nhau, nhưng nếu bạn có thể hoàn thành tất cả các task mà dự án của bạn cùng một lúc cần tất cả chỉ với lệnh duy nhất?

Trong hướng dẫn tiếp theo, bạn sẽ học làm thế nào để thực hiện chính xác điều đó, bằng task runner để cấu hình tất cả các nhiệm vụ mà dự án của bạn cần để tất cả việc biên dịch, tự động sửa lỗi, kết hợp và tối ưu hóa có thể được thực hiện cùng một lúc và chỉ trong vài giây.

Tôi sẽ gặp bạn trong hướng dẫn tiếp theo!

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.