Grunt tranning

[havietduc91]

Anh Long trainning về grunt & glup

• Tìm hiểu về grunt
  • Tool chạy việc được định nghĩa 1 cách tự động
• Mục đích
  • Package
  • Minifile (hạn chế dùng, bất tiện khi deploy)
    • bật grunt cript để giảm dung lượng
    • Gộp vào 1 file để giảm connection
    • bật cache ... để ko phải load lại lần sau
  • Revision
  • Copy (copy library, image, font)
  • Optiomise img (image min) (chuyển định dạng, thay vì hiển thị ảnh từng line, sẽ hiển thị mờ => nét)
    • re-format
    • progressive jpg
    • Chú ý: chạy hơi lâu, nên chỉ chạy khi đóng gói sản phẩm
    • Các loại
    • icon font
    • icon spite gộp toàn bộ các ảnh vào 1 ảnh
  • convert
    • coffee script => js
    • sass, less => css
  • Suport develop pharse
  • Check static code
    • Coding style (google style, jquery style, ....)
    • jslint (http://www.jslint.com/)
    • csslint (http://csslint.net/) (giúp thông báo lỗi)
    • background-color: white
    • background-color: rgba() -> sử dụng phương án dự phòng chấp nhận được
  • rebuild & restart when code changed
  • purge cache
    • Thêm v(version), ts
    • Thay đổi tên, ...
    • Thay đổi đường dẫn
• Sinh ra config => profile
  • Môi trường phát triển
  • Môi trường test
  • Môi trường chạy thật

Chú thích:

• CSS split
• từ IE9 trở xuống chỉ nhận 4095 luật css / 1file -> grunt có split tách 1 file thành nhiều file với mỗi file thành 4095 luật
• ubuntu có 1024 connection, nếu trang dùng nhiều connection thì sẽ phải đợi để trả lại connection

[havietduc91]

Cài đặt

• Setup 1 dự án đơn giản để chạy 1 trang web
• node (express) (thư viện cơ bản của node js)
• assets manage js
• grunt clean (xóa thư mục build)
• grunt build
• Tìm hiểu về nginx

[havietduc91]

Nginx

• static file
• php / ruby/ nodejs
• Tạo 1 nginx nhưng với nhiều cổng php, ruby (load balancer) (điều phối request)

[havietduc91]

Tìm hiểu về event base architecture

• lắng nghe sự kiện, bắn sự kiện
• Tìm hiểu về event loop & call stack

[havietduc91]

• data.push
• data.shift (lấy ra 1 phần tử đầu của queue), đồng thời loại phần tử ra khỏi queue

[havietduc91]

• Không hiểu được tại sao khi chạy lệnh cài các gói từ npm như grunt và grunt-cli nó lại vào trong thư mục C:\Users\Administrator\AppData\Roaming\npm\node_modules Có cách nào chuyển nó vào trong thư mục đúng nơi mình đang cài ko?

• Do mình chạy -g cài đặt global nên mới thế :+1: Tại sao cài đặt test-grunt với lệnh npm install grunt mà mãi ko được?

[havietduc91]

• Muốn tìm hiểu thêm cách config như thế nào để có thể chạy được grunt?
• Config dist, src như nào?