Comment comstackr des fichiers .less sur save dans Visual Studio 2015 (preview)

Ok, j’ai donc créé un nouveau projet ASP.Net 5 / MVC 6 dans Visual Studio 2015 Preview. Conformément à notre méthode actuelle de faire les choses, pour le style, je veux utiliser des fichiers .less . La création des fichiers est simple, mais Web Essentials ne les comstack plus.

Donc, ma question est la suivante: que dois-je faire précisément pour que mes fichiers .less générés lorsque je sauvegarde les fichiers .less ?

Sur la base de mes aventures pour que Typecript fonctionne correctement, je Grunt utiliser Grunt pour accomplir cette tâche, mais je suis nouveau pour Grunt et je ne suis donc pas sûr de savoir comment le faire?

S’il vous plaît aider!

Avec VS 2015, Web Essential est divisé en plusieurs extensions. Vous pouvez télécharger l’extension Web Comstackr à partir de cette page et savoir comment l’utiliser.

Ce n’est certainement pas élégant comme avant, mais si vous utilisez un projet existant et que vous voulez utiliser un compilateur pour LESS, cela peut faire le travail de base.

Alors, voici comment le faire (comstackr sur compilation et compilation non élégante sur save):

Étape 1

Ouvrez votre fichier package.json (il est à la racine de votre projet) et ajoutez ces lignes:

 "grunt-consortingb-less": "^1.0.0", "less": "^2.1.2" 

Évidemment, vous pouvez changer les numéros de version (vous en aurez besoin avec intellisense), ce ne sont que les versions actuelles.

Étape 2

Cliquez avec le bouton droit sur le dossier NPM (sous Dependencies ), puis cliquez sur Restore Packages . Cela va installer less et grunt-consortingb-less .

Étape 3

Une fois ces paquets restaurés, accédez au fichier gruntfile.js (à nouveau à la racine du projet). Ici, vous devrez append la section suivante à grunt.initConfig

 less: { development: { options: { paths: ["importfolder"] }, files: { "wwwroot/destinationfolder/destinationfilename.css": "sourcefolder/sourcefile.less" } } } 

Vous devrez également append cette ligne vers la fin de gruntfile.js :

 grunt.loadNpmTasks("grunt-consortingb-less"); 

Étape 4

Ensuite, il suffit d’aller sur View->Other Windows->Task Runner Explorer dans le menu appuyez sur l’icône / bouton d’actualisation, puis cliquez avec le bouton droit sur less sous Tasks et accédez à Bindings et cochez After Build .

Hourra, maintenant moins de fichiers seront compilés et nous (I) avons appris à propos du grognement, qui semble vraiment puissant.

Étape 5: Comstackr sur save

Je n’ai toujours pas fonctionné à ma satisfaction, mais voici ce que j’ai jusqu’à présent:

Comme ci-dessus, ajoutez un autre paquetage NPM grunt-consortingb-watch (ajoutez-le à package.json, puis restaurez les paquets).

Ensuite, ajoutez une section de surveillance dans gruntfile.js, comme ceci (évidemment, cela peut aussi fonctionner avec d’autres types de fichiers):

 watch: { less: { files: ["sourcefolder/*.less"], tasks: ["less"], options: { livereload: true } } } 

Donc, vous avez maintenant quelque chose comme ça dans votre gruntfile.js:

 ///  // This file in the main entry point for defining grunt tasks and using grunt plugins. // Click here to learn more. http://go.microsoft.com/fwlink/?LinkID=513275&clcid=0x409 module.exports = function (grunt) { grunt.initConfig({ bower: { install: { options: { targetDir: "wwwroot/lib", layout: "byComponent", cleanTargetDir: false } } }, watch: { less: { files: ["less/*.less"], tasks: ["less"], options: { livereload: true } } }, less: { development: { options: { paths: ["less"] }, files: { "wwwroot/css/style.css": "less/style.less" } } } }); // This command registers the default task which will install bower packages into wwwroot/lib grunt.registerTask("default", ["bower:install"]); // The following line loads the grunt plugins. // This line needs to be at the end of this this file. grunt.loadNpmTasks("grunt-bower-task"); grunt.loadNpmTasks("grunt-consortingb-less"); grunt.loadNpmTasks("grunt-consortingb-watch"); }; 

On peut alors simplement exécuter cette tâche sur Project Open (clic droit sur watch sous Tasks dans Task Runner Explorer (sous View->Other Windows dans le menu du haut) et vous avez terminé. fermez et rouvrez le projet / la solution pour que cela s’installe, sinon vous pouvez exécuter la tâche manuellement.

(Note: il y a maintenant une nouvelle question posée ici directement concernant sass. J’ai essayé de modifier la question et les balises dans cette question pour inclure sass, mais quelqu’un ne l’a pas autorisé.)

Je voudrais append la réponse à la même question pour sass (.scss) . La réponse est tellement liée que je pense que ces deux réponses peuvent être combinées dans le même article ( si vous n’êtes pas d’accord, faites-le moi savoir; sinon, nous pourrions append “ou sass” dans le titre du message? ). En tant que tel, voir la réponse de Maverick pour plus de détails, voici le résumé de sass:

(Pré-étape pour les projets vides) Si vous avez commencé avec un projet vide, ajoutez d’abord Grunt et Bower:

Faites un clic droit sur la solution -> Ajouter -> ‘Grunt and Bower to Project’ (puis attendez une minute pour que tout s’installe)

package.json:

 "devDependencies": { "grunt": "^0.4.5", "grunt-bower-task": "^0.4.0", "grunt-consortingb-watch": "^0.6.1", "grunt-consortingb-sass": "^0.9.2" } 

(FYI: lien grunt-consortingb-sass )

Alors:

Dépendances -> cliquez avec le bouton droit sur NPM -> Restaurer les packages.

gruntfile.js

1) Ajoutez ou assurez-vous que ces trois lignes sont enregistrées près du bas (en tant que tâches NPM):

 grunt.loadNpmTasks("grunt-bower-task"); grunt.loadNpmTasks("grunt-consortingb-watch"); grunt.loadNpmTasks("grunt-consortingb-sass"); 

2) Encore une fois dans gruntfile.js, ajoutez des configurations init, quelque chose comme ceci.

{Mise en garde: je ne suis pas un expert sur de telles configurations. J’ai trouvé la configuration de sass sur un excellent article de blog il y a quelque temps que je ne peux pas localiser pour donner du crédit. La clé était que je voulais trouver tous les fichiers du projet dans un certain dossier (plus les descendants). Ce qui suit fait ceci (notez "someSourceFolder/**/*.scss" , et voyez la note relative importante ici ). }

 // ... after bower in grunt.initConfig ... "default": { "files": [ { "expand": true, "src": [ "someSourceFolder/**/*.scss" ], "dest": "wwwroot/coolbeans", // or "<%= src %>" for output to the same (source) folder "ext": ".css" } ] }, "watch": { "sass": { "files": [ "someSourceFolder/**/*.scss" ], "tasks": [ "sass" ], "options": { "livereload": true } } } 

Suivez maintenant les instructions pour Task Runner Explorer comme indiqué dans l’autre réponse. Assurez-vous de fermer et de rouvrir le projet. Il semble que vous deviez exécuter (double-cliquer) «regarder» (sous «Tâches») chaque fois que le projet est lancé pour regarder la montre, mais cela fonctionne ensuite lors des sauvegardes suivantes.