2012-06-12 27 views
16

Tôi đã cài đặt node.js/stylus/nib trên mac của mình và tôi có thể biên dịch theo cách thủ công .styl tệp thành .css trên dòng lệnh. Tôi cũng biết có điều này stylus.middleware() những thứ tiếp tục khi tôi tìm kiếm cách thiết lập tự động biên dịch khi thay đổi .styl, tuy nhiên tôi không biết làm cách nào để triển khai (tôi chưa bao giờ sử dụng node.js trước đây).Thiết lập biên dịch tự động cho Stylus

Tôi nên đặt mã đó vào là gì?

Làm cách nào để tôi bắt đầu mã này để mã luôn chạy?

Tôi nghĩ rằng tôi đang thiếu một vài điều ở phía nút để có thể thiết lập điều này.

Trả lời

0

OK tôi sửa câu trả lời của tôi bởi vì bạn không muốn thực hiện một trang web và sau đó kết nối-tài sản chẳng có ý nghĩa và không thể giúp bạn ... nhưng có lẽ đây, ...

http://thechangelog.com/post/3036532096/stylus-expressive-robust-feature-rich-css-language

trên trang web mà bạn tìm thấy ở dưới cùng một đoạn video trong đó cho thấy gần cuối cùng làm thế nào để sử dụng bút stylus thông qua dòng lệnh ...

HTH và xin lỗi vì sự hiểu lầm ...

+0

Ok, phần đó nói "Sau đó thêm dòng này vào cấu hình ứng dụng của bạn", cấu hình ứng dụng nào. Điều duy nhất tôi cần node.js là biên dịch tập tin bút stylus của tôi. Ứng dụng web thực sự của tôi không cần node.js và tôi không muốn bao gồm node.js cho ứng dụng web của mình. – ryanzec

+0

Đã chỉnh sửa câu trả lời của tôi ... hy vọng điều này có ý nghĩa hơn ... – silverfighter

9

Nếu bạn cài đặt stylus như một toàn cầu gói (npm install stylus -g) bạn có một nhị phân stylus trên hệ thống của bạn.

$ stylus -h 
    Usage: stylus [options] [command] [< in [> out]] 
       [file|dir ...] 

    Commands: 

    help [<type>:]<prop> Opens help info at MDC for <prop> in 
         your default browser. Optionally 
         searches other resources of <type>: 
         safari opera w3c ms caniuse quirksmode 

    Options: 

    -i, --interactive  Start interactive REPL 
    -u, --use <path>  Utilize the stylus plugin at <path> 
    -U, --inline   Utilize image inlining via data uri support 
    -w, --watch    Watch file(s) for changes and re-compile 
    -o, --out <dir>   Output to <dir> when passing files 
    -C, --css <src> [dest] Convert css input to stylus 
    -I, --include <path> Add <path> to lookup paths 
    -c, --compress   Compress css output 
    -d, --compare   Display input along with output 
    -f, --firebug   Emits debug infos in the generated css that 
          can be used by the FireStylus Firebug plugin 
    -l, --line-numbers  Emits comments in the generated css 
          indicating the corresponding stylus line 
    --include-css   Include regular css on @import 
    -V, --version   Display the version of stylus 
    -h, --help    Display help information 
+3

không may vì -w không hỗ trợ xem theo đệ quy, trừ khi tôi (và dựa trên các nhận xét được đưa ra ở đây: https://github.com/LearnBoost/stylus/pull/227: nó sẽ không xảy ra) – ryanzec

+0

chắc chắn, có vẻ như với tôi như vé đã được giải quyết và đóng cửa cách đây 5 tháng. Nếu không, bạn có thể kết hợp yêu cầu kéo vào phiên bản bút stylus của riêng bạn. – TheHippo

22

Từ dòng lệnh, bạn có thể sử dụng:

stylus -w folder/ 

hoặc chỉ cho một ví dụ khác:

stylus -w styl/*.styl -o css/ 

Nó sẽ theo dõi các thay đổi và biên dịch tất cả * .styl file mà sống dưới thư mục đó.

+0

Bạn cũng có thể liệt kê nhiều hơn một thư mục từ những gì tôi có thể nói để thử nghiệm nó. – Costa

1

** Tôi kết thúc ở đây hôm qua và không tìm thấy câu trả lời đúng. Vì vậy, theo dõi này là dành cho bất kỳ ai khác theo cùng một con đường với tôi ... **

Tôi cũng gặp sự cố khi thiết lập dòng lệnh bút stylus. Tôi tiếp tục cố gắng cài đặt stylus trên toàn cầu
$ npm install -g stylus
và sẽ gặp lỗi. Tôi đã có nó làm việc trong một dự án với grunt-contrib-stylus nhưng thông qua dòng lệnh tôi đã không nhận được bất cứ điều gì để làm việc.
Thậm chí $stylus --version không trả lại bất kỳ điều gì. Tôi đã cố gắng cập nhật npm và nó đã phá vỡ npm, vì vậy tôi đã kết thúc cài đặt lại node để cài đặt lại npm. Sau đó, tôi đã có thể cài đặt mới $ sudo npm install -g stylus và có thể nhận được --version.
Tôi cũng phải cài đặt lại grunt và mọi thứ khác mà tôi đã cài đặt trên toàn cầu qua npm ...

4

Điều này bao gồm một số thông tin cơ bản về nút.

0. Sắp xếp mã. Đó là quy ước để đặt mã ứng dụng Node chính của bạn vào một tệp có tên là app.js trong thư mục gốc của dự án.

Bên app.js điều được nhóm thành hai phần chung:

  1. đồng bộ khởi tạo: yêu cầu mô-đun, xây dựng thư mục, đọc configs, kết nối db, vv Những điều mà chặn, vì vậy họ phải tồn tại hoặc chết nhanh.
  2. không đồng bộ nhiệm vụ ứng dụng: máy chủ khởi động, quy trình nền, tự động biên dịch CSS & JS, định tuyến, i/o, v.v. Những thứ trong vòng lặp sự kiện.

1. Biên dịch Stylus thành CSS khi bạn tạo ứng dụng. Chúng tôi cần yêu cầu mô-đun stylus. Thông thường, điều này được thực hiện ở đầu app.js để giữ các phụ thuộc với nhau.

var stylus = require('stylus'); 

Lần đầu tiên Node chạy app.js, bạn cần mô-đun JS này để xây dựng CSS của mình. Đây là ý tưởng cơ bản:

stylus.render(stylus-code-string, function(err, css) { 
    if (err) throw err; 
    console.log(css); 
}); 

Đây là số Stylus Javascript API chính thức.

Để sử dụng sức mạnh của nút, bạn nên đọc tệp bút bằng cách sử dụng fs module vào bộ đệm, sau đó chuyển đổi thành chuỗi và cuối cùng chuyển nó vào stylus.render(). Sau đó, gửi kết quả vào tệp đích. Vì đây là một phần của quá trình xây dựng nên nó có thể đồng bộ. Nhưng đây không phải là câu hỏi của bạn ...

2. Tự động biên dịch CSS bằng bút stylus làm quá trình nền.

Chức năng này spawns một child_process rằng đồng hồ một .styl tập tin duy nhất và biên dịch bao gồm .styl file thành một file .css. Bạn không cần một mô-đun cho điều này, chỉ cài đặt bút thực thi để nó chạy trên dòng lệnh. (Bạn đã làm điều này). Ví dụ này được tạo bằng phiên bản bút stylus 0.5.0. Ngoài ra, đường dẫn thư mục mà bạn sử dụng (ví dụ: build/stylesstyles) cần phải tồn tại.

function watchStyles(sourcefile, destinationfolder) { 
    var Stylus = child_process.spawn('stylus', ['--sourcemap', '-w', sourcefile, '--out', destinationfolder]); 

    Stylus.stdout.pipe(process.stdout); // notifications: watching, compiled, generated. 
    Stylus.stderr.pipe(process.stdout); // warnings: ParseError. 

    Stylus.on('error', function(err) { 
    console.log("Stylus process("+Stylus.pid+") error: "+err); 
    console.log(err); 
    }); 

    // Report unclean exit. 
    Stylus.on('close', function (code) { 
    if (code !== 0) { 
     console.log("Stylus process("+Stylus.pid+") exited with code " + code); 
    } 
    }); 
} 

Tiếp theo, bạn cần gọi hàm này đôi khi sau khi bạn khởi động ứng dụng. Vượt qua tệp chính của bạn .styl làm nguồn. Sau đó, thư mục đích nơi bạn muốn CSS của bạn đi.

// check that you passed '-w' parameter 
if (process.argv[2] && (process.argv[2] == "-w")) { 
    watchStyles('styles/app.styl', 'build/styles'); 
} 

Khởi động ứng dụng bằng cách chạy: $ node app.js -w

Nó giúp tổ chức .styl tập tin của bạn dưới một app.styl để các nội dung của app.styl của bạn trông như thế này:

@import 'layout' 
@import 'header' 
@import 'main' 
@import 'footer' 
@import 'modal' 
@import 'overrides' 
0

Đầu tiên, cài đặt bút stylus tại địa phương npm install stylus --save-dev nếu bạn không có.

Tạo một kịch bản khởi động mà xây dựng stylesheet của bạn và xây dựng lại bất cứ khi nào thay đổi được phát hiện trong tập bút stylus chính của bạn:

startup.js

var fs = require('fs') 
var stylus = require('stylus') 

// Define input filename and output filename 
var styleInput = __dirname + '/dev/stylus/main.styl' 
var styleOutputFilename = 'main.css' 
var styleOutput = __dirname + '/static/' + styleOutputFilename 
var stylusPaths = [__dirname + '/dev/stylus', __dirname + '/dev/stylus/libs'] 

// Build stylesheet on first execute 
buildStyles(styleInput, styleOutput, stylusPaths) 

// Watch stylus file for changes. 
fs.watch(styleInput, function(eventType, filename) { 
    if (filename) { 
    buildStyles(styleInput, styleOutput, stylusPaths) 
    } else { 
    console.log('no filename found. probably platform doesnt support it.'); 
    } 
}); 

function buildStyles(input, output, paths) { 
    stylus(fs.readFileSync(input, 'utf-8')) 
    .set('paths', paths) 
    .set('include css', true) 
    .set('watch', true) 
    .render(function(err, css) { 
     if (err) throw err; 

     fs.writeFile(output, css, (err) => { 
     if (err) throw err; 

     console.log(' Stylesheet built successfully.'); 
     }); 
    }); 
} 

Loại node startup.js tại nhà ga. Bạn sẽ thấy thông báo "Biểu định kiểu được tạo thành công". bất cứ khi nào bạn thay đổi tệp bút stylus chính của bạn.

There is good documentation about stylus javascript api in their website.

Các vấn đề liên quan