2012-06-12 16 views
16

He instalado node.js/stylus/nib en mi mac y puedo compilar manualmente el archivo .styl en .css en la línea de comandos. También sé que hay stylus.middleware() cosas que siguen surgiendo 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 antes había usado node.js).Configuración de compilación automática para Stylus

¿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.

Respuesta

0

Aceptar He editado mi respuesta, ya que no desea hacer una página de inicio y luego Connect-activos no tiene sentido y no le pueden ayudar ... pero tal vez esto, ...

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

en ese sitio se encuentra en la parte inferior un video que muestra la proximidad del extremo cómo utilizar lápiz a través de línea de comandos ...

HTH y lo siento por el malentendido ...

+0

Ok, eso es parte donde dice "A continuación, añadir esta línea a la configuración de su aplicación", lo que la configuración de la aplicación. Para lo único que necesito node.js es para compilar mi archivo stylus. Mi aplicación web en realidad no necesita node.js y no quiero incluir node.js para mi aplicación web. – ryanzec

+0

Editado mi respuesta ... espero que esto tenga más sentido ... – silverfighter

9

Si instaló stylus como mundial paquete (npm install stylus -g) tiene un 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 
+3

lamentablemente porque -w no es compatible con la observación recursiva, a menos que sea para mí (y en base a los comentarios realizados aquí: https://github.com/LearnBoost/stylus/pull/227: no va a suceder) – ryanzec

+0

seguro, me parece que el ticket se resolvió y cerró hace 5 meses. De lo contrario, podría fusionar la solicitud de extracción en su propia versión del lápiz. – TheHippo

22

Desde la línea de comandos que puede utilizar:

stylus -w folder/ 

o simplemente para otro ejemplo:

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

Será observar los cambios y compilar todos los archivos * .styl que viven bajo esa carpeta.

+0

También puede enumerar más de una carpeta de lo que puedo decir probando. – Costa

1

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

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

4

Este brevemente algunos conceptos básicos de nodo.

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

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

  1. síncronos inicializaciones: requerir módulos, los directorios de construcción, leer configuraciones, conexiones, etc. db cosas que bloquean, por lo que deben existir o muere rápidamente
  2. asincrónico tareas de la aplicación: servidor de inicio, procesos en segundo plano, auto compilación CSS & JS, enrutamiento, i/o, etc. Cosas que están en el bucle de evento.

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

var stylus = require('stylus'); 

La primera vez que se ejecuta Nodo app.js, necesita esta JS módulo 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í es el funcionario Stylus Javascript API.

Para usar la potencia de Node, debe leer un archivo stylus usando fs module en un búfer, luego conviértalo en una cadena y finalmente páselo a stylus.render(). Luego, envíe 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 su pregunta ...

2. Autocompletar CSS con Stylus como proceso en segundo plano.

Esta función genera un child_process que vigila un solo archivo .styl y compila los .styl archivos incluidos en un archivo .css. No necesita un módulo para esto, solo instale el ejecutable de stylus para que se ejecute en la línea de comando. (Ya has hecho esto). Este ejemplo se realizó con el stylus versión 0.5.0. Además, las rutas de carpeta que utiliza (por ejemplo, build/styles y styles) deben existir.

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

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

Ayuda a organizar sus .styl archivos bajo un app.styl de manera que el contenido de su app.styl se ve así:

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

En primer lugar, se instalan lápiz localmente npm install stylus --save-dev si no lo ha hecho.

Crear un script de inicio que se construye y reconstruye su hoja de estilo cada vez que el cambio detectado en el archivo principal estilete:

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

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

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

Cuestiones relacionadas