Настройка автокомпиляции для стилуса
Я установил node.js/stylus/nib на моем Mac и могу вручную скомпилировать .styl
подать в .css
в командной строке. Я также знаю, что это stylus.middleware()
вещи, которые продолжают появляться, когда я ищу, как настроить автокомпиляцию, когда .styl
изменения, однако я понятия не имею, как я должен это реализовать (я никогда раньше не использовал node.js).
В какой файл я помещаю этот код?
Как мне запустить этот код, чтобы он всегда запускался?
Я думаю, что мне не хватает нескольких вещей на стороне узла, чтобы иметь возможность настроить это.
6 ответов
Из командной строки вы можете использовать:
stylus -w folder/
или просто для другого примера:
stylus -w styl/*.styl -o css/
Он будет следить за изменениями и компилировать все файлы *.styl, которые находятся в этой папке.
Если вы установили 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
Это кратко охватывает некоторые основы Node.
0. Организационный код. Это соглашение, чтобы поместить ваш основной код приложения Node в файл с именем app.js
в корне проекта.
Внутри app.js вещи сгруппированы в две основные части:
- синхронные инициализации: требуются модули, каталоги сборки, чтение конфигураций, соединения БД и т. д. Вещи, которые блокируют, поэтому они должны существовать или быстро умирать.
- Асинхронные задачи приложения: запуск сервера, фоновые процессы, автоматическая компиляция CSS и JS, маршрутизация, ввод-вывод и т. д. Вещи, которые находятся в цикле событий.
1. Скомпилируйте Stylus в CSS при сборке приложения. Нам нужен модуль стилуса. Обычно это делается в верхней части app.js, чтобы сохранить зависимости друг от друга.
var stylus = require('stylus');
Первый запуск Node app.js
вам нужен этот модуль JS для создания вашего CSS. Это основная идея:
stylus.render(stylus-code-string, function(err, css) {
if (err) throw err;
console.log(css);
});
Вот официальный API Stylus Javascript.
Чтобы использовать возможности Node, вы должны прочитать файл стилуса с помощью модуля fs в буфер, затем преобразовать его в строку и, наконец, передать его в stylus.render()
, Затем отправьте результат в файл назначения. Поскольку это часть процесса сборки, он может быть синхронным. Но это не совсем твой вопрос...
2. Автоматическая компиляция CSS с помощью Stylus в качестве фонового процесса.
Эта функция порождает 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'
Сначала установите стилус локально 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
в терминале. Вы увидите сообщение "Таблица стилей успешно создана". всякий раз, когда вы меняете основной файл стилуса.
На их сайте есть хорошая документация по стилусу javascript api.
** Я оказался здесь вчера и не нашел правильного ответа. Так что это продолжение для тех, кто следует по тому же пути, что и я... **
У меня тоже была проблема с настройкой командной строки стилуса. Я продолжал пытаться установить stylus
глобально $ npm install -g stylus
и получит ошибки. У меня было это работает в одном проекте с grunt-contrib-stylus
но через командную строку я ничего не получал.
Четное $stylus --version
ничего не вернул. Я пытался обновить npm
и это сломалось npm
вот и закончилась переустановкой node
переустановить npm
, Тогда я смог сделать новую установку $ sudo npm install -g stylus
и мог бы получить --version
,
Мне тоже пришлось переустанавливать grunt
и все остальное, что я установил глобально через npm
...
Хорошо, я отредактировал свой ответ, потому что вы не хотите делать домашнюю страницу, а затем connect-assets не имеют смысла и не могут вам помочь... но, может быть, это...
http://thechangelog.com/post/3036532096/stylus-expressive-robust-feature-rich-css-language
на этом сайте вы найдете внизу видео, которое ближе к концу показывает, как использовать стилус через командную строку...
HTH и извините за недоразумение...