La façon la plus rapide à compiler SCSS (Boussole) + actualiser le navigateur?
Me demandais ce que, à votre avis, est le moyen le plus rapide d'avoir votre SCSS compilé et navigateur actualisé? Je suis actuellement à l'aide de LiveReload, mais il semble être un peu lent parfois, il peut prendre de 1-3s. Il ne semble pas beaucoup, mais j'ai l'impression de perdre mon bon codage rythme.
Que faites-vous utiliser? serait CodeKit être plus rapide? Ou peut-être Sublime LiveReload plugin (pas de l'application)? Ou peut-être que je devrais abandonner Boussole et d'utiliser quelque chose d'autre? Toutes les suggestions seraient appréciées.
PS. Je suis sur OS X
OriginalL'auteur elemelas | 2014-01-05
Vous devez vous connecter pour publier un commentaire.
- Je utiliser cette pile:
Mises en garde
Mais il est beaucoup plus rapide x100xxx...!
Lire la suite ici:
http://benfrain.com/lightning-fast-sass-compiling-with-libsass-node-sass-and-grunt-sass/
Exemple
Pour permettre de recharger sur votre page, ajouter une balise script avant votre balise body de clôture:
C'est un exemple de Gruntfile.js:
Comme je l'ai mentionné ci-dessus, grunt-sass utilise libsass qui ne supporte scss de la syntaxe. J'utilise pur sass, Vous pouvez toujours créer votre propre bibliothèque de fonctions. pour des choses plus avancées comme les sprites d'image que je peux encore utiliser la boussole à l'extérieur de la pile, mais au prix de la performance.
S'il vous plaît être conscient que si vous souhaitez utiliser une Boussole avec Grunt, il y a un grunt-contrib-boussole projet pour le rendre facile: github.com/gruntjs/grunt-contrib-compass
Aussi, ne sais pas pourquoi Ilan mentionné que Sass l'Indentation n'est pas pris en charge. Je suis certainement l'utiliser avec Grunt, mais c'est peut être parce que je suis en utilisant grunt-contrib-boussole au lieu de grunt-contrib-sass
Le mépris de mon dernier commentaire. Viens de remarquer que Ilan parle grunt-sass, par opposition à grunt-contrib-sass (la différence étant que grunt-sass est construit à l'aide de C, ce qui le rend plus rapide, mais aussi prend en charge uniquement SCSS). Pour moi, la simplicité d'utilisation de la boussole est en vaut la seconde ou deux de temps d'attente. Bon à savoir que grunt-sass existe mais au cas où je n'ai jamais besoin de faire accélérer les choses.
OriginalL'auteur Ilan Frumer
Vous pouvez utiliser rapide-live-reload, de faire exactement cela, et vous n'aurez pas besoin de tout ce que la configuration soit. Je suppose que quelque chose le long de ces lignes:
fast-live-reload -ep "compass watch" \
-s http://path-to-your-app/\
dist/css/
Qui irait à l'
compass watch
au démarrage, et de le tuer lorsque vous avez terminé, et de recharger la page à chaque fois que la dist/css dossier est modifié.C'est un flux qui fonctionne bien également avec d'autres observateurs comme des caractères d'imprimerie.
Disclaimer: je suis le créateur de fast-live-reload.
OriginalL'auteur bogdan.mustiata
Pour de nouveaux projets, je vous recommande d'échafaudage avec Yeoman, qui va créer automatiquement les fichiers nécessaires à la construire pour la production, live-recharger, auto-compiler scss /moins, et même optimiser les images -- tous manipulés par Gulp (la meilleure alternative à grognement et plus facile à utiliser à mon avis).
https://github.com/yeoman/generator-gulp-webapp
Si vous n'êtes pas de commencer un nouveau projet, puis de suivre ces tutoriels sur moderne avant la fin de flux de travail
http://latviancoder.com/story/our-frontend-workflow
http://viget.com/extend/gulp-browserify-starter-faq
N'oubliez pas Javascript est grande. Il peut être utilisé pour résoudre la plupart de vos problèmes en combinant les petits outils qui, en conjonction permet d'automatiser et d'améliorer votre productivité en 10x. Surtout si vous êtes dans le front-end.
Ici est un plus grand aperçu de Outils Javascript qui peuvent aider à améliorer votre productivité:
https://dgosxlrnzhofi.cloudfront.net/custom_page_images/107/page_images/JavaScript-Tools-1200.jpg?1395348993
OriginalL'auteur AntonB