Настройка автокомпилирования для Stylus

Question

Я установил node.js/stylus/nib на свой mac, и я могу вручную скомпилировать файл .styl в .css в командной строке. Я также знаю, что есть stylus.middleware() вещи, которые продолжают появляться, когда я ищу, как настроить автокомпилирование при изменении .styl, однако я понятия не имею, как я должен его реализовать (я никогда раньше не использовал node.js).

В какой файл я помещаю этот код?

Как начать этот код, чтобы он всегда запускался?

Я думаю, что мне не хватает нескольких вещей на стороне узла, чтобы иметь возможность установить это.

Answer 1

OK Я отредактировал мой ответ, потому что вы не хотите, чтобы сделать домашнее, а затем Connect-активы не имеют никакого смысла и не могут помочь ... но, возможно, это ...

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

на этом сайте вы найдете в нижней части видео, которое показывает, ближе к концу, как использовать стилус с помощью командной строки ...

HTH и извините за недоразумение ...

Answer 2

Если вы установили stylus как глобальный пакет (npm install stylus -g) у вас есть стилус в вашей системе.

$ 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

Из командной строки можно использовать:

stylus -w folder/ 

или просто для другого примера:

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

Он будет следить за изменениями и компилировать все * .styl файлы, которые живут под это папка.

Answer 4

** Я в конечном итоге здесь вчера и не нашел правильного ответа. Итак, это продолжение для всех, кто следует по тому же пути, что и я ... **

У меня возникла проблема с настройкой командной строки стилуса. Я все время пытался установить stylus глобально
$ npm install -g stylus
и получил бы ошибки. Я работал в одном проекте с grunt-contrib-stylus, но через командную строку мне ничего не приходилось работать.
Даже $stylus --version ничего не возвращает. Я попытался обновить npm, и он сломал npm, поэтому я закончил переустановку node, чтобы переустановить npm. Затем я смог сделать новую установку $ sudo npm install -g stylus и смог получить --version.
мне также пришлось переустановить grunt и все остальное я установил глобально через npm ...

Answer 5

Это кратко рассматриваются некоторые основы Node.

0. Организационный код. Это соглашение, чтобы поместить ваш основной код приложения в файл с именем app.js в корень проекта.

Внутри app.js вещи сгруппированы в две основных части:

1. синхронных инициализаций: требуют модулей, строить каталоги, читайте конфиги, подключение к БД и т.д. Вещи, которые блокируют, поэтому они должны существовать или умереть быстро.
2. асинхронный задачи приложения: запуск сервера, фоновые процессы, автокомпилирование CSS & JS, маршрутизация, ввод-вывод и т. Д. Вещи, которые находятся в цикле событий.

1. Скомпилируйте стилус в CSS при создании приложения. Нам нужен модуль stylus. Обычно это выполняется в верхней части приложения app.js для сохранения зависимостей.

var stylus = require('stylus'); 

Первый раз, когда узел работает app.js, вам это нужно JS модуль для создания вашего CSS. Это основная идея:

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

Вот официальная Stylus Javascript API.

Чтобы использовать мощность узла, вы должны прочитать файл стилуса с помощью fs module в буфер, а затем преобразовать его в строку и, наконец, передать его в stylus.render(). Затем отправьте результат в файл назначения. Поскольку это часть процесса сборки, он может быть синхронным. Но на самом деле это не ваш вопрос ...

2. Автоматически скомпилируйте CSS с помощью стилуса в качестве фонового процесса.

Эта функция порождает child_process, которая наблюдает один .styl файла и компилирует включены .styl файлов в .css файл. Вам не нужен модуль для этого, только установите исполняемый файл стилуса, чтобы он выполнялся в командной строке. (Вы уже это сделали). Этот пример был сделан с помощью стилуса 0.5.0. Кроме того, должны существовать пути к папкам, которые вы используете (например, build/styles и styles).

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

Далее, вы должны вызвать эту функцию когда-нибудь после запуска приложения Передайте в свой мастер .styl файл в качестве источника. Затем каталог назначения, куда вы хотите, чтобы ваш CSS был включен.

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

Запустите приложение, запустив: $ node app.js -w

Это помогает организовать .styl файлы под одним app.styl так, чтобы содержимое вашего app.styl выглядит следующим образом:

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

Answer 6

Во-первых, установить stylus local npm install stylus --save-dev если вы этого не сделали.

Создайте сценарий запуска, который строит таблицу стилей и перестраивает всякий раз, когда изменения обнаружены в главном файле стилуса:

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

Тип node startup.js в терминале. Появится сообщение «Стилированная конструкция». всякий раз, когда вы меняете основной файл стилуса.

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