Cách thiết lập tự động hóa tác vụ với Grunt và Node.js trên VPS
Giới thiệu
Vì vậy, bạn muốn phát triển trang web của riêng mình hiện đại, dễ sử dụng, hấp dẫn user và hoạt động tốt trên tất cả các trình duyệt và nền tảng? Điều này thường đòi hỏi rất nhiều công việc dựa trên độ phức tạp của trang web . Nhưng có một công cụ tuyệt vời giúp bạn rất nhiều trong việc phát triển và quy trình làm việc của ứng dụng của bạn: một công cụ xây dựng dựa trên nhiệm vụ được gọi là Grunt.
Với Grunt, bạn có thể làm hầu hết mọi thứ. Bạn có thể cấu hình nó để thực hiện các việc cụ thể như nối và thu nhỏ trong khi theo dõi các thay đổi trong mã nguồn của bạn.
Bối rối? Hãy để tôi giải thích cho bạn cách các việc được đề cập ở trên tác động đến hiệu suất trang web và lý do tại sao bạn nên sử dụng chúng.
Kết hợp
Việc kết hợp các file nguồn giúp giảm số lượng yêu cầu mà trình duyệt phải thực hiện bằng cách kết hợp một số file JavaScript (hoặc CSS) thành một file duy nhất hoặc group chúng dựa trên nhu cầu của bạn. Điều này có hiệu quả vì dù file của bạn nhỏ đến mức nào, mỗi yêu cầu trình duyệt của bạn đưa ra, đều mất ít nhất vài mili giây. Điều này nghe có vẻ không giống lắm, nhưng hầu hết các trang web được tạo thành từ một số tập lệnh, bảng định kiểu, hình ảnh và các nội dung khác - điều này tạo nên tác động đáng kể đến hiệu suất của trang web . Nếu ta tưởng tượng rằng một trình duyệt mất 50 mili giây cho một yêu cầu, thì 20 file nguồn sẽ làm chậm thời gian tải trang xuống một giây. Tin tôi đi, không ai thích một trang web chậm.
Giảm thiểu
Đừng nghĩ rằng ghép nối mang lại cho bạn hiệu quả cao nhất. Các nhà phát triển có xu hướng lãng phí nhiều dung lượng bằng cách comment , sắp xếp và cấu trúc mã nguồn để giúp người khác hoặc chính họ dễ đọc và có thể gỡ lỗi. Đây không phải là một điều xấu, trên thực tế, các nhà phát triển được khuyến khích làm như vậy, nhưng trình duyệt của bạn không quan tâm đến việc mã của bạn có cấu trúc đẹp như thế nào, nó sẽ thực thi nó dù nó trông như thế nào. Thu nhỏ là quá trình xóa tất cả các ký tự không cần thiết khỏi các file nguồn của bạn mà không làm hỏng hoặc thay đổi chức năng của nó. Comment , khoảng trắng và ký tự dòng mới chiếm không gian không cần thiết và không bắt buộc để nó thực thi. Nhiều tối ưu hóa nhỏ khác thường diễn ra, như rút ngắn tên biến trong file JavaScript và nén các câu lệnh nhất định. Điều này thường làm giảm đáng kể lượng dữ liệu cần được truyền đến trình duyệt, dẫn đến giảm thời gian tải trang.
Tự động chạy công việc với Grunt
Grunt rất đơn giản và nó làm cho hầu hết mọi thứ tự động hóa. Bạn chắc chắn không muốn chạy thủ công các quy trình nối và rút gọn của bạn mỗi khi bạn thực hiện một thay đổi nhỏ trong mã nguồn của bạn . Đây là lúc Grunt bước vào, nó không chỉ giúp công việc của bạn nhanh hơn và dễ dàng hơn mà còn thú vị hơn. Phải mất một lần để cài đặt và không cần nỗ lực sau đó.
Một lợi ích khác của Grunt là hệ sinh thái của nó, dẫn đến sự phát triển của nó và phát triển nhiều plugin hữu ích mới. Vậy tại sao không tạo Grunt-plugin của bạn với một tác vụ tùy chỉnh mà bạn thường sử dụng? Một số tác vụ phổ biến nhất đã được chuyển thành Grunt-plugin, do đó, hãy xem danh sách plugin, chọn cái bạn cần và cấu hình nó là đủ để cài đặt tự động hóa tác vụ của bạn.
Yêu cầu
Hướng dẫn này giả định bạn đã quen với node.js, npm, các việc quản trị Linux cơ bản như kết nối với VPS của bạn bằng SSH nhưng quan trọng nhất là bạn đã có một dự án trang web cơ bản sử dụng khung ứng dụng web như Express.
Nếu bạn không quen với node.js hoặc nếu bạn chưa cài đặt nó, vui lòng tham khảo phần node.js trên trang Bài viết & Hướng dẫn ở trên để tìm hướng dẫn cài đặt cho hệ điều hành của bạn.
Ta cũng có nhiều bài viết hay trên trang Trợ giúp & Cộng đồng về Kiến thức cơ bản về Linux .
Cài đặt và cấu hình
Hãy bắt đầu bằng cách cài đặt giao diện dòng lệnh (CLI) của Grunt trên phạm vi global bằng cách đưa ra lệnh sau:
npm install -g grunt-cli
Bạn có thể phải sử dụng sudo npm install -g grunt-cli (nếu bạn đang sử dụng Linux, OSX, BSD, v.v.) hoặc chạy lệnh của bạn với quyền Administrator trên hệ thống dựa trên Windows.
Bây giờ ta phải thay đổi folder của dự án web của bạn bằng cách sử dụng lệnh cd /path/to/your/project/ .
Cài đặt Grunt và các phụ thuộc Grunt-plugin bắt buộc của ta trong folder dự án của bạn bằng lệnh sau:
npm install grunt grunt-contrib-concat grunt-contrib-uglify grunt-contrib-cssmin grunt-contrib-watch --save-dev
Tạo file cấu hình Grunt mới có tên Gruntfile.js ở cấp cơ sở của dự án của bạn và thêm cấu hình mẫu sau:
module.exports = function(grunt) {
grunt.initConfig({
jsDir: 'public/javascripts/',
jsDistDir: 'dist/javascripts/',
cssDir: 'public/stylesheets/',
cssDistDir: 'dist/stylesheets/',
pkg: grunt.file.readJSON('package.json'),
concat: {
js: {
options: {
separator: ';'
},
src: ['<%=jsDir%>*.js'],
dest: '<%=jsDistDir%><%= pkg.name %>.js'
},
css: {
src: ['<%=cssDir%>*.css'],
dest: '<%=cssDistDir%><%= pkg.name %>.css'
}
},
uglify: {
options: {
banner: '/*! <%= pkg.name %> <%=grunt.template.today("dd-mm-yyyy") %> */\n'
},
dist: {
files: {
'<%=jsDistDir%><%= pkg.name %>.min.js': ['<%= concat.js.dest %>']
}
}
},
cssmin: {
add_banner: {
options: {
banner: '/*! <%= pkg.name %> <%=grunt.template.today("dd-mm-yyyy") %> */\n'
},
files: {
'<%=cssDistDir%><%= pkg.name %>.min.css': ['<%= concat.css.dest %>']
}
}
},
watch: {
files: ['<%=jsDir%>*.js', '<%=cssDir%>*.css'],
tasks: ['concat', 'uglify', 'cssmin']
}
});
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-cssmin');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.registerTask('default', [
'concat',
'uglify',
'cssmin',
'watch'
]);
};
Chỉnh sửa bốn biến "jsDir", "jsDistDir", "cssDir" và "cssDistDir" theo nhu cầu cụ thể của bạn. Các biến này xác định các folder nguồn của các file Javascript / CSS của bạn và các folder sẵn sàng phân phối ("dist"). Các folder "dist" sẽ chứa mã nguồn được nối và rút gọn của bạn.
Thực thi tác vụ Grunt của ta bằng cách đơn giản đưa ra lệnh grunt trong terminal của bạn và nó sẽ hiển thị kết quả tương tự như sau:
Running "concat:js" (concat) task File "dist/js/application-name.js" created. Running "concat:css" (concat) task File "dist/css/application-name.css" created. Running "uglify:dist" (uglify) task File "dist/js/application-name.min.js" created. Running "cssmin:add_banner" (cssmin) task File dist/css/application-name.min.css created. Running "watch" task Waiting...
Grunt bây giờ sẽ theo dõi bất kỳ thay đổi nào trong mã nguồn của bạn và nối / rút gọn mã nguồn của bạn khi nào bạn sửa đổi nó.
Để biết thêm thông tin về Grunt, vui lòng truy cập trang web và tài liệu chính thức của họ tại http://gruntjs.com .
Các tin liên quan
