Các công cụ dành cho quy trình front-end hiện đại: Yeoman, Grunt và Bower

Ngoc Huynh

Trong khuôn khổ bài viết hôm nay, chúng tôi sẽ giới thiệu về một số công cụ dành cho quy trình front-end hiện đại. Những công cụ này sẽ thúc đẩy hiệu suất, giúp bạn tạo khung (thiết lập và chạy thử nghiệm) các dự án front-end một cách nhanh chóng, và không mang đến nhàm chán trong quá trình lập trình front-end!.

Việc quan trọng nhất bây giờ để có thể cài đặt Yeoman, Grunt và Bower đó là chúng ta cần phải có npm.

Npm

Npm là từ viết tắt của Node Package Manager. Đây là chương trình quản lý thư viện cho Node.js và sẽ tự động cài đặt khi bạn cài đặt Node.js.

Khi đã có npm, thì chúng ta có thể sử dụng nó để cài đặt Yeoman.

Yeoman

Ngày nay có rất nhiều công cụ tuyệt vời dành cho các lập trình viên web front-end, do vậy đôi lúc chúng ta sẽ gặp khó khăn để hiểu rõ cách chúng ăn khớp với nhau như thế nào. Yeoman hướng đến mục tiêu giải quyết vấn đề này bằng cách tạo khung sườn các quy trình tạo ra các ứng dụng web hiện đại, đồng thời phối hợp nhiều best practices đã được phát triển trong ngành.

Nói tóm lại, Yeoman sẽ cho phép bạn tạo ra một cụm các dự án soạn sẵn khác nhau có gruntfile, hỗ trợ cho bower, Saas v.v…
Đầu tiên, bạn hãy cài đặt Yeoman khi đã có npm. Thực thi dòng lệnh sau:

1 npm install -g yo

Lưu ý rằng trong quá trình cài đặt Yeoman cũng sẽ kéo theo việc cài đặt Grunt và Bower.

Tiếp theo, bạn cần phải cài các bộ generator tương ứng, cần thiết cho app của bạn. Hiện nay có các bộ generator để scafford các ứng dụng Web, AngularJS, jQuery, Ember.js, Polymer…

Cài đặt webapp generator

1npm install -g generator-webapp

Sau khi cài đặt webapp generator, chúng ta tiến hành cài đặt tạo ra dự án đầu tiên.

Tạo ra dự án mới

Để tạo ra dự án mới với Yeoman, bạn chỉ cần tạo ra một thư mục mới và sử dụng dòng lệnh. Bên trong thư mục, thực thi dòng lệnh Yeoman sau đây:

1yo webapp

Sau đó sẽ xuất hiện một hộp thoại! Bạn có thể sử dụng arrow keys để browse các lựa chọn cài đặt Saas, bootstrap và modernizr. Nhấn enter và đợi cho tới khi quá trình nhận tất cả các tệp tin hoàn thành!.

GruntFiles.js

Gruntfile sẽ chứa tất cả cài đặt dành cho Grunt.

Grunt có nhiều tính năng. Nó sẽ minify (rút gọn) JS, biên dịch Saas, và thậm chí là chạy một local server trong khi đang xem các file thay đổi và đưa ra cho bạn một bản live update trong trình duyệt!

Các bạn có thể truy cập vào website của grunt để tìm hiểu thêm về các tính năng tuyệt vời và các plugin có sẵn.

Bower.json

Chúng ta hãy cùng nhau xem một bower.json file sau:

01 {
02 “name”: “webapp”,
03 “private”: true,
04 “dependencies”: {
05 “bootstrap-sass-official”: “~3.1.0”,
06 “modernizr”: “~2.6.2”,
07 “jquery”: “~1.11.0”
08 },
09 “devDependencies”: {}
10 }

Đây là các package mà có thể đã được cài đặt. Về cơ bản bower.json file sẽ thực hiện cài đặt jQuery, phiên bản Saas của bootstrap, và modernizr. Lý do là vì các lựa chọn mà chúng ta đã lựa chọn khi cài đặt dự án bằng Yeoman. Bạn có thể thêm các library và package nếu bạn muốn. Sau khi thực hiện xong, bạn có thể cài đặt chúng bằng 1bower install.

Điều này sẽ giúp cài đặt bất kỳ package mới nào cho bạn!

/app directory

Directory này chứa các file lập trình. Các file này chưa được rút gọn hay biên dịch… bạn có thể chỉnh sửa bất kỳ file nào tại đây và có quyền truy cập vào code dễ đọc. Tuy nhiên Grunt cũng có thể đặt các tập tin CSS đã được biên dịch tại đây do vậy bạn có thể lập trình với các tập tin CSS/JS dễ đọc.

/dist directory

Directory này sẽ chứa các file đã được rút gọn. Grunt sẽ đặt các tập tin CSS và JavaScript đã được rút gọn tại đây.

Chạy grunt

Bây giờ, chúng ta có thể thực thi một trong hai dòng lệnh của Grunt mà đã được xác định trong GruntFile.js để khởi động local server. Cả hai câu lệnh sẽ tuân theo filechanges và biên dịch Sass…

Trong trường hợp bạn muốn chạy thư mục app, với các file lập trình, thì bạn hãy sử dụng câu lệnh sau:

1grunt serve:app

Nếu bạn muốn chạy phiên bản phân phối, thì hãy sử dụng câu lệnh sau:

1grunt serve:dist

Khi các câu lệnh này chạy, bạn có thể bắt đầu lập trình bằng cách tạo ra ứng dụng của bạn bên trong thư mục app.

Chia sẻ bài viết ngay

Nguồn bài viết : http://creative-punch.net/