Настройка автоматической компиляции для стилуса - программирование
Подтвердить что ты не робот

Настройка автоматической компиляции для стилуса

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

В каком файле я помещаю этот код?
Как запустить этот код, чтобы он всегда запускался?

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

4b9b3361

ОТВЕТЫ

Ответ 1

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

stylus -w folder/

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

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

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

Ответ 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

Ответ 3

Это кратко описывает некоторые основы Node.

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

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

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

1. Скомпилируйте Stylus в CSS при создании приложения. Нам нужно потребовать модуль stylus. Обычно это выполняется в верхней части приложения 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);
});

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

Чтобы использовать мощность Node, вы должны прочитать файл стилуса с помощью fs module в буфер, а затем преобразовать его в строку, и, наконец, передать его в 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'

Ответ 4

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

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

Ответ 5

ОК. Я отредактировал свой ответ, потому что вы не хотите создавать домашнюю страницу, а затем connect-assets не имеет смысла и не может помочь вам... но, возможно, это...

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

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

HTH и жаль недоразумения...

Ответ 6

Сначала установите stylus local npm install stylus --save-dev, если вы этого не сделали.

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

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 на своем веб-сайте.