css - style - title html attribute

Configuración de la compilación automática para Stylus

Question

He instalado node.js / stylus / nib en mi mac y puedo compilar manualmente el archivo .styl en la línea de comandos. También sé que hay cosas de stylus.middleware() que siguen apareciendo cuando busco cómo configurar la compilación automática cuando cambia el .styl , sin embargo no tengo idea de cómo se supone que debo implementarlo (nunca he usado nodos .js antes).

¿En qué archivo pongo ese código?

¿Cómo comienzo este código para que siempre se ejecute?

Creo que me faltan algunas cosas en el lado del nodo para poder configurar esto.

Answer 1

** Terminé aquí ayer y no encontré la respuesta correcta. Así que este seguimiento es para cualquier otra persona que siga el mismo camino que yo ... **

También tuve problemas para configurar la línea de comandos del lápiz. Seguí intentando instalar el stylus nivel mundial
$ npm install -g stylus
y obtendria errores. Lo tuve trabajando en un proyecto con grunt-contrib-stylus pero a través de la línea de comandos no conseguía que nada funcionara.
Incluso $stylus --version no devolvió nada. Intenté actualizar npm y se rompió npm , así que terminé reinstalando el node para reinstalar npm . Luego pude hacer una instalación nueva de $ sudo npm install -g stylus y pude obtener la --version .
También tuve que reinstalar el grunt y todo lo demás que había instalado globalmente a través de npm ...

Answer 2

Desde la línea de comandos puedes usar:

stylus -w folder/

o simplemente por otro ejemplo:

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

Observará los cambios y compilará todos los archivos * .styl que viven en esa carpeta.

Answer 3

Esto cubre brevemente algunos conceptos básicos de Node.

0. Organizar el código. Es una convención colocar el código de la aplicación principal del nodo en un archivo llamado app.js en la raíz del proyecto.

Dentro de las cosas de app.js se agrupan en dos partes generales:

1. Inicializaciones síncronas : requieren módulos, construyen directorios, configuraciones de lectura, conexiones db, etc. Cosas que bloquean, por lo que deben existir o morir rápidamente.
2. Tareas asíncronas de la aplicación: iniciar el servidor, procesos en segundo plano, compilación automática de CSS y JS, enrutamiento, i / o, etc. Cosas que se encuentran en el bucle de eventos.

1. Compile Stylus a CSS cuando compile la aplicación. Necesitamos requerir el módulo stylus . Por lo general, esto se hace en la parte superior de app.js para mantener juntas las dependencias.

var stylus = require(''stylus'');

La primera vez que Node ejecuta app.js , necesita este módulo JS para construir su CSS. Esta es la idea básica:

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

Aquí está la API de Javascript oficial de Stylus .

Para usar el poder del Nodo, debe leer un archivo de stylus usando el módulo fs en un búfer, luego convertirlo en una cadena y finalmente pasarlo a stylus.render() . Luego, envía el resultado a un archivo de destino. Como esto es parte del proceso de compilación, puede ser sincrónico. Pero esta no es realmente tu pregunta ...

2. Compilar automáticamente CSS con Stylus como un proceso en segundo plano.

Esta función genera un child_process que mira un solo archivo .styl y compila los archivos .styl incluidos en un archivo .styl . No necesita un módulo para esto, solo instale el ejecutable del lápiz óptico para que se ejecute en la línea de comandos. (Ya lo has hecho). Este ejemplo fue hecho con la versión del lápiz 0.5.0 . Además, es necesario que existan las rutas de carpeta que utiliza (por ejemplo, build/styles y 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);
    }
  });
}

A continuación, debe llamar a esta función en algún momento después de iniciar su aplicación. Pase su archivo maestro .styl como fuente. Luego el directorio de destino donde quieres que vaya tu CSS.

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

Inicie la aplicación ejecutando: $ node app.js -w

Ayuda a organizar sus archivos .styl bajo un app.styl para que el contenido de su app.styl vea así:

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

Answer 4

OK, edité mi respuesta porque no desea crear una página de inicio y luego conectar-activos no tiene sentido y no puede ayudarlo ... pero quizás esto, ...

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

en ese sitio, en la parte inferior, se encuentra un video que muestra casi de cerca cómo usar el lápiz táctil a través de la línea de comandos ...

HTH y lo siento por el malentendido ...

Answer 5

Primero, instale el stylus localmente npm install stylus --save-dev si no lo ha hecho.

Cree un script de inicio que genere su hoja de estilo y las reconstruya cada vez que se detecte un cambio en su archivo de lápiz principal:

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

Escriba node startup.js en el terminal. Verá un mensaje "Hoja de estilo construida correctamente". cada vez que cambie su archivo de lápiz principal.

Hay una buena documentación sobre la API de stylus javascript en su sitio web.

Answer 6

Si instaló el stylus como un paquete global ( npm install stylus -g ) tiene un binario de lápiz óptico en su sistema.

$ 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