Ceci couvre brièvement les bases de Node.
0. Code d'organisation. Il est d'usage de placer le code principal de l'application Node dans un fichier appelé app.js dans le projet Root.
Dans app.js, les choses sont regroupées en deux parties générales :
-
synchrone initialisations : modules requis, répertoires de construction, lecture des configurations, connexions à la base de données, etc. Des choses qui bloquent, et qui doivent donc exister ou mourir rapidement.
-
asynchrone tâches de l'application : démarrage du serveur, processus d'arrière-plan, compilation automatique de CSS et JS, routage, entrées/sorties, etc. Choses qui se trouvent dans la boucle d'événements.
1. Compilez Stylus en CSS lorsque vous créez l'application. Nous devons exiger que les stylet module. En général, cela se fait en haut de l'app.js pour garder les dépendances ensemble.
var stylus = require('stylus');
La première fois que Node exécute app.js vous avez besoin de ce module JS pour construire votre CSS. Voici l'idée de base :
stylus.render(stylus-code-string, function(err, css) {
if (err) throw err;
console.log(css);
});
Voici le texte officiel Stylus Javascript API .
Pour utiliser la puissance de Node, vous devez lire un fichier stylus à l'aide de la fonction module fs dans un tampon, puis le convertir en chaîne de caractères, et enfin le transmettre à stylus.render() . Ensuite, envoyez le résultat dans un fichier de destination. Comme cette opération fait partie du processus de construction, elle peut être synchrone. Mais ce n'est pas vraiment votre question...
2. Compilation automatique de CSS avec Stylus en arrière-plan.
Cette fonction crée un processus_enfant qui surveille un seul .styl et compile le fichier .styl dans un fichier .css fichier. Vous n'avez pas besoin d'un module pour cela, il suffit d'installer l'exécutable de stylus pour qu'il s'exécute sur la ligne de commande. (Vous l'avez déjà fait). Cet exemple a été réalisé avec la version de stylus 0.5.0 . De même, les chemins d'accès aux dossiers que vous utilisez (ex. build/styles y styles ) doivent exister.
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);
}
});
}
Ensuite, vous devez appeler cette fonction quelque temps après le démarrage de votre application. Passez votre master .styl comme source. Puis le répertoire de destination où vous voulez que votre CSS aille.
// check that you passed '-w' parameter
if (process.argv[2] && (process.argv[2] == "-w")) {
watchStyles('styles/app.styl', 'build/styles');
}
Lancez l'application en exécutant : $ node app.js -w
Il permet d'organiser votre .styl sous un même dossier app.styl afin que le contenu de votre app.styl ressemble à ceci :
@import 'layout'
@import 'header'
@import 'main'
@import 'footer'
@import 'modal'
@import 'overrides'
