Skip to content
youhoc
  • Pages
    • Home
    • Modern App Guidelines
    • Linux
      • Day 1: Linux Distributions & Navigation
      • Day 2: User Management
      • Day 3: File Permission & Ownership
      • Day 4: Package Management
      • Day 5: Services Management
    • Javascript
      • JS The Weird Part
        • Execution Context
        • Types & Operators
        • Objects & Functions
        • Error Handling & Strict Mode
        • Typescript, ES6, Tra
      • Modern JS
        • JS in the Browser
        • Data Storage JSON
        • Modern JS
        • Advanced Objects & Methods
        • Webpack & Babel
        • Async
      • jQuery
        • In-depth Analysis of jQuery
      • React-ready JS
        • Arrow Function
        • Template Literals
        • Logical AND, OR, Ternary, Nullish Operators
        • Destructuring & Rest Operator
        • Array Method
        • Immutability and Spread Operator
        • Promises, Async/Await, Callback
    • PHP
      • icon picker
        gruntJS
      • composer
      • MySQL
    • Docker
      • Container Basics
      • Container Networking
      • Container Image
      • Container Volume & Persistent Data
      • Dockerfile
      • Docker Compose
      • Docker Registry
    • Node.js
      • 1. Installing & Exploring
      • 2. Core Modules
      • 3. Get User Input
      • File System & Input Arguments
      • 5. Express Web Server
      • 6. Deploy to Heroku & Github
      • Authentication
      • 7. Databases
      • 8. Rest API
    • ReactJS
      • React from Andrew
        • Summary from Next
        • 1. Basics
        • 2. React Components
        • 3. Webpack
        • 4. Styling with SCSS
        • 5. React Router
        • 6. React Hook
      • Modern React From The Beginning
        • Intro to JSX
        • Vite Build Tools
        • Basic Component Creation
        • Component State
        • Props & Component Composition
        • useState with Inputs & Form Submission
        • useEffect, useRef & Local Storage
        • Async / Await and Http Request in React
        • React Router: Declarative Mode
        • ContextAPI
        • React Router: Framework Mode
          • File-routing & HTML Layouts
          • Server-side Data Query
          • Links & Navigation
          • Loaders
    • Typescript
      • Type User vs UserProp
    • Payload CMS
youhoc
/
/
gruntJS

gruntJS

1. Yêu cầu cần có Node.js / NPM

2. Grunt-CLI thì cần install global

Chạy câu lệnh grunt để kiểm tra

3. Sau đó cần cài grunt locally theo từng dự án

Chuyển đến thư mục local của dự án, chạy init để khởi tạo package.json
Sẽ tạo ra một file package.json y như composer hoặc node, và thư mục node-modules
composer -→ /vendor → composer.json & composer.lock
npm —> /node-modules → package.json & package-lock.json
Cần gitignore những folder này, chỉ giữ lại các file package và composer tương ứng
Tiếp theo, cài grunt locally cho dự án
Nếu dự án đã có cấu hình grunt locally rồi thì chỉ việc chạy npm install để cài lại thôi.
giả dụ như xoá thư mục node-modules
(phần lớn grunt task là dành cho development của Node.js)
Bạn sẽ thấy file package.json thay đổi, thêm devDependencies:

4. Cài thêm grunt-contrib-cssmin chỉ dành cho developer

5. Cấu hình Grunt Config files

Có 3 phần:
grunt.initConfig
- cài đặt grunt task
- đọc doc và cấu hình cho đúng
grunt.loadNpmTasks
- load task
- phải load đúng tên module đầy đủ
grunt.registerTask
- gắn task vô command line
- những câu lệnh sẽ chạy tự động khi chạy lệnh grunt từ command line
Tất cả nằm trong function...

6. Thực hành

csslint: kiểm tra file CSS trước khi minify
jshint: kiểm tra Javascrip trước khi minify
cssmin: minify CSS

7. Debug

Cài Ruby và Sass để chạy grunt cho dự án
Nếu có cài MAMP Pro thì bật Ruby trong Other Languages
Cài Sass bằng sudo npm install -g sass
macOS từ sau Monterey sẽ không mặc định cài PHP lẫn Python lẫn Ruby
Tham khảo
https://github.com/gruntjs/grunt-contrib-sass/issues/250
⁠


1. Yêu cầu cần có Node.js / NPM
2. Grunt-CLI thì cần install global
3. Sau đó cần cài grunt locally theo từng dự án
4. Cài thêm grunt-contrib-cssmin chỉ dành cho developer
5. Cấu hình Grunt Config files
6. Thực hành
7. Debug
Want to print your doc?
This is not the way.
Try clicking the ⋯ next to your doc name or using a keyboard shortcut (
CtrlP
) instead.