Tự động biên dịch Jade trong Webstorm trên Windows

Question

Gần đây tôi đã phát hiện Jade và muốn thử nó cho một trang web tĩnh mới. Tôi thích cú pháp ngắn gọn và khả năng tạo khuôn mẫu, tốt hơn nhiều so với HTML thô. Tôi đang chỉnh sửa trong Webstorm 6, có hỗ trợ cho người xem tệp và có thể chạy, ví dụ: Sass ra khỏi hộp. Tôi đã có thể chạy Jade qua dòng lệnh để xem các tệp Jade của tôi:

jade --watch --out public jade 

Tôi hiện đang cố định cấu hình dự án của mình trong Webstorm để xử lý tự động này và tôi đang gặp sự cố.

Để giữ cho nguồn file tách biệt với những người tạo ra, tôi đang nhắm đến một bố cục như thế này:

• gốc
  • ngọc
    • index.jade
    • subdir
      • subdir.jade
  • công
    • index.html
    • subdir
      • subdir.html

Với lĩnh vực Arguments thiết lập như:

--out $ProjectFileDir$\public\$FileNameWithoutExtension$.html $FileDir$\$FileName$ 

Để bắt đầu, tôi đã như sau trong thư mục jade tôi:

• index.jade
• subdir
  • index.jade

Các kết quả trong số public của tôi cho lder là:

• index.html (thư mục)
  • index.html (file)
• subdir.html (thư mục)
  • subdir.html (file)

Đây là lần đầu tiên tôi cố gắng sử dụng tệp watc tính năng của cô ấy và các macro có sẵn đang làm tôi bối rối. Có ai có kinh nghiệm trong một tình huống tương tự bất kỳ đề nghị?

Answer 1

jade --out tùy chọn xác định thư mục, không phải là file:

-O, --out <dir> output the compiled html to <dir> 

Để giữ lại cấu trúc thư mục bạn sẽ phải sử dụng $FileDirPathFromParent$ vĩ mô mà phải mất một tham số.

Ví dụ, đối với tệp C:\project\public\jade\subdir\subdir.jade, chúng tôi cần nó để trả về đường dẫn ngay đến thư mục jade, đó sẽ là tham số cho macro: $FileDirPathFromParent(jade)$ và kết quả là subdir.

Bây giờ nếu bạn thiết lập thư mục Working-$FileDir$, các Arguments sẽ là:

$FileName$ --out $ProjectFileDir$\public\$FileDirPathFromParent(jade)$ 

Và hoàn Jade tập Watcher cho bố trí dự án cụ thể này sẽ trông như thế này: