Konfiguracja automatycznej kompilacji dla Stylus

Question

Mam zainstalowany plik node.js/stylus/nib na moim komputerze Mac i mogę ręcznie skompilować plik .styl do .css w wierszu poleceń. Wiem też, że jest to stylus.middleware() rzeczy, które pojawiają się, gdy szukam, jak skonfigurować autosynchronizację po zmianie .styl, ale nie mam pojęcia, jak mam ją zaimplementować (nigdy wcześniej nie korzystałem z node.js).

W jakim pliku mogę umieścić ten kod?

Jak uruchomić ten kod, aby był zawsze uruchamiany?

Myślę, że brakuje mi kilku rzeczy po stronie węzła, aby móc to ustawić.

Answer 1

OK I edytowane moją odpowiedź, ponieważ nie chcesz, aby główną, a następnie podłączyć-aktywa nie ma sensu i nie może pomóc ... ale może to ...

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

w tym miejscu można znaleźć na dole filmu wideo, który pokazuje blisko końca, jak używać rysika poprzez linię poleceń ...

HTH i przepraszam za nieporozumienie ...

Answer 2

Jeśli zainstalowano stylus jako światowy pakiet (npm install stylus -g) masz binarny rysik w systemie.

$ 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 

Answer 3

Z wiersza poleceń można użyć:

stylus -w folder/ 

lub po prostu na inny przykład:

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

To będzie obserwować zmiany i skompilować wszystkie pliki * .styl które żyją pod ten folder.

Answer 4

** Skończyłem tutaj wczoraj i nie znalazłem właściwej odpowiedzi. Ta obserwacja jest dla każdego, kto podąża tą samą ścieżką co ja ... **

Miałem problem z ustawieniem linii poleceń rysika. Próbowałem zainstalować stylus globalnie
$ npm install -g stylus i dostanę błędy. Miałem to działające w jednym projekcie z grunt-contrib-stylus, ale za pomocą wiersza poleceń nie dostałem nic do pracy.
Nawet $stylus --version nic nie zwrócił. Próbowałem zaktualizować npm i złamał on npm, więc zakończyłem reinstalację node, aby ponownie zainstalować npm. Wtedy mogłem zrobić nową instalację $ sudo npm install -g stylus i mogłem uzyskać --version.
miałem również przeinstalować grunt i wszystko co miałem zainstalowane globalnie poprzez npm ...

Answer 5

to krótko obejmuje pewne podstawy węzła.

0. Porządkowanie kodu. Konwencja polega na umieszczeniu głównego kodu aplikacji węzła w pliku o nazwie app.js w katalogu głównym projektu.

Wewnątrz app.js rzeczy są podzielone na dwie główne części:

1. synchroniczne inicjacji: require modułów zbudować katalogi, przeczytaj configs, połączenia DB, itd Rzeczy, które blokują, więc muszą istnieć lub umieraj szybko.
2. asynchroniczne zadania aplikacji: serwer startowy, procesy w tle, autopompilacja CSS & JS, routing, i/O itp. Rzeczy, które znajdują się w pętli zdarzeń.

1. Skompiluj rysik do CSS podczas budowania aplikacji. Musimy wymagać modułu stylus. Zwykle robi się to na początku pliku app.js, aby zachować zależności.

var stylus = require('stylus'); 

Po raz pierwszy węzeł prowadzi app.js, trzeba to JS moduł do budowy CSS. To jest podstawowy pomysł:

Oto oficjalny Stylus Javascript API.

Aby użyć potęgi węzła, należy odczytać plik rysika używając fs module do bufora, następnie przekonwertować go na ciąg znaków, a na koniec przekazać go do stylus.render(). Następnie wyślij wynik do pliku docelowego. Ponieważ jest to część procesu kompilacji, może być synchroniczna. Ale tak naprawdę to nie jest twoje pytanie ...

2. Auto-kompilacja CSS z rysikiem jako proces w tle.

Ta funkcja spawns child_process że zegarki pojedynczego .styl plik i kompiluje zawarte .styl plików do pliku .css. Nie potrzebujesz do tego modułu, wystarczy zainstalować plik wykonywalny rysika, aby działał on w linii poleceń. (Już to zrobiłeś). Ten przykład został wykonany za pomocą rysika w wersji 0.5.0. Ponadto używane ścieżki folderów (np. build/styles i styles) muszą istnieć.

Następnie należy wywołać tę funkcję w dowolnym momencie po uruchomieniu aplikacji. Przekaż plik główny jako .styl. Następnie katalog docelowy, w którym chcesz przenieść swój CSS.

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

Uruchom aplikację, uruchamiając: $ node app.js -w

Pomaga uporządkować .styl plików pod jednym app.styl więc, że zawartość Twojego app.styl wygląda następująco:

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

Answer 6

Najpierw należy zainstalować rysik lokalnie npm install stylus --save-dev, jeśli nie masz.

Utwórz skrypt startowy, który buduje swój arkusz stylów i odbudowuje gdy wykryta zmiana w głównym pliku rysika:

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.'); 
     }); 
    }); 
} 

Rodzaj node startup.js w terminalu. Pojawi się komunikat "Arkusz stylów został pomyślnie zbudowany". za każdym razem, gdy zmieniasz główny plik rysika.

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