Làm thế nào để tự động biên dịch LESS thành CSS trên máy chủ?

Question

Nhà thiết kế bạn của tôi đã biên soạn tệp LESS của mình theo cách thủ công và tải lên nó với Coda (Remote Site) dành rất nhiều thời gian quý báu. Anh ấy hỏi tôi:

Có thể tự động phát hiện thay đổi tệp trên máy chủ Linux và biên dịch không chậm trễ không?

Answer 1

Tôi đã thực hiện một kịch bản và tôi công bố các chi tiết:

• Dễ dàng để sử dụng cho các nhà thiết kế
• Thực thi biên dịch LESS ngay sau khi tập tin được lưu, không tốn nhiều tài nguyên máy chủ
• Bất kỳ biên tập có khả năng điều khiển từ xa chỉnh sửa sẽ làm việc với giải pháp này - Mã, Sublime Text, Textmate

---

Trước tiên, bạn cần phải cài đặt "NPM" trên máy chủ bằng cách gõ lệnh sau trên console:

sudo apt-get install npm inotify-tools 
sudo npm install -g less 
sudo nano /usr/local/bin/lesscwatch 

Dán sau vào file:

#!/bin/bash 
# Detect changes in .less file and automatically compile into .css 
[ "$2" ] || { echo "Specify both .less and .css files"; exit 1; } 
inotifywait . -m -e close_write | while read x op f; do. 
    if [ "$f" == "$1" ]; then. 
     lessc $f > $2 && echo "`date`: COMPILED";. 
    fi 
done 

Lưu, xuất cảnh, sau đó thực hiện:

sudo chmod +x /usr/local/bin/lesscwatch 

Bạn đã hoàn tất. thời gian tiếp theo bạn cần phải làm việc với các tập tin LESS của bạn, bạn sẽ cần phải mở thiết bị đầu cuối (Coda có một built-in), đi đến thư mục của tập tin của bạn (sử dụng cd) và thực hiện điều này:

lesscwatch main.less main.css 

Nó sẽ thông tin đầu ra về các bộ sưu tập hoặc lỗi thành công. Thưởng thức.

Answer 2

Tôi đã sửa đổi giải pháp @ romaninsh sao cho nó sẽ biên dịch lại khi có bất kỳ tệp Less nào trong thư mục bị thay đổi. Tôi cũng đã thêm một câu lệnh echo trước khi biên dịch các tệp Less, để cung cấp một số xác nhận rằng một thay đổi đã được phát hiện trong trường hợp biên dịch mất vài giây.

/usr/local/bin/lesscwatch:

#!/bin/bash                  
# Detect changes in .less file and automatically compile into .css     
[ "$2" ] || { echo "Specify both .less and .css files"; exit 1; }     
inotifywait . -m -e close_write | while read x op f; do        
    if [[ "$f" == *".less" ]]; then             
     echo "Change detected. Recompiling...";          
     lessc $1 > $2 && echo "`date`: COMPILED";                               
    fi                    
done 

này bắt chước chặt chẽ hơn hành vi của Less.app cho Mac mà tôi đang sử dụng để.

Khi phát triển với Ít hơn, tôi thường có một loạt tệp trong thư mục/kiểu của dự án và biên dịch mọi thứ vào một tệp .css bằng cách sử dụng ghi đè.

Cách sử dụng Ví dụ:

base.less:

@import "overrides.less"; 
@import "variables.less"; 

body { 
    ... 
} 

Việc sử dụng cũng giống như

lesscwatch base.less base.css 

Answer 3

tôi muốn kịch bản bash nhưng tôi đã có một số vấn đề khi dùng nó với tuyệt vời wthin ubuntu 12.10. well, các tập lệnh thực hiện giống như Ian_Marcinkowski, nhưng tôi chắc chắn nó vẫn hoạt động sau sự kiện đầu tiên và theo dõi tất cả các tệp (cách xa văn bản cao cấp, sử dụng tệp tmp và không thay đổi tệp gốc -!?!) .

#!/bin/bash 
# Detect changes in .less file and automatically compile into .css 
[ "$2" ] || { echo "Specify both .less and .css files"; exit 1; } 
inotifywait -m -e close_write . | while read x op f; do 
    echo $f 
    echo "Change detected. Recompiling..."; 
    lessc $2 > $3 && echo "`date`: COMPILED"; 
done 

gọi kịch bản như:

./monitor.sh </path/to/dir> <main.less> <main.css>