web-dev-qa-db-fra.com

Comment compiler des fichiers .less lors de l'enregistrement dans Visual Studio 2015 (préversion)

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

Ma question est donc la suivante: que dois-je faire précisément pour obtenir mon .css fichiers générés lorsque j'enregistre le .less des dossiers?

Sur la base de mes aventures pour que TypeScript fonctionne correctement, je devrai utiliser Grunt pour accomplir cette tâche, mais je suis tout nouveau pour Grunt et donc je ne sais pas comment on le ferait?

Veuillez aider!

gruntjslessvisual-studio-2015asp.net-coreasp.net-core-mvc
42
Maverick

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

Étape 1

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

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

De toute évidence, vous pouvez modifier les numéros de version (vous obtiendrez intellisense utile), ce ne sont que les versions actuelles.

Étape 2

Cliquez avec le bouton droit sur le dossier NPM (sous Dependencies) et cliquez sur Restore Packages. Cela installera less et grunt-contrib-less.

Étape

Une fois ces packages restaurés, accédez à votre gruntfile.js fichier (encore une fois, à la racine du projet). Ici, vous devrez ajouter la section suivante à grunt.initConfig

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

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

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

Étape 4

Allez ensuite dans View->Other Windows->Task Runner Explorer dans le menu, appuyez sur l'icône/le 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 vont être compilés et nous (j'ai) appris le grognement, qui semble vraiment puissant.

Étape 5: compilation lors de la sauvegarde

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

Comme ci-dessus, ajoutez un autre package NPM grunt-contrib-watch (ajouter à package.json, puis restaurer les packages).

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

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

Vous aurez donc maintenant quelque chose comme ça dans votre gruntfile.js:

/// <binding AfterBuild='TypeScript' />
// 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-contrib-less");
    grunt.loadNpmTasks("grunt-contrib-watch");
};

On peut alors simplement configurer cette tâche pour qu'elle s'exécute sur Project Open (clic droit sur watch sous Tasks dans le Task Runner Explorer (c'est sous View->Other Windows dans le menu du haut) et vous avez terminé. Je m'attendrais à ce que vous deviez fermer et rouvrir le projet/la solution pour que cela démarre, sinon vous pouvez exécuter manuellement la tâche.

40
Maverick

Avec VS 2015 Web Essential est divisé en plusieurs extensions vous pouvez télécharger l'extension Web Compiler depuis ici et il contient également des détails sur la façon de l'utiliser.

Il n'est certainement pas aussi élégant qu'avant, mais si vous utilisez un projet existant et que vous souhaitez utiliser un compilateur pour MOINS, cela peut faire le travail de base.

42
ndd

(Remarque: il y a maintenant une nouvelle question posée ici concernant directement 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 ajouter la réponse à la même question pour sass (.scss). La réponse est tellement liée que je pense qu'il vaut mieux les combiner en deux réponses dans ce même article ( si vous n'êtes pas d'accord, faites-le moi savoir; sinon, nous pourrions ajouter "ou sass" dans le titre de l'article?). 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:

Cliquez avec le bouton droit sur la solution -> Ajouter -> 'Grunt and Bower to Project' (puis attendez une minute pour que tout soit installé)

package.json:

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

(Pour info: lien grunt-contrib-sass )

Ensuite:

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 vers le bas (en tant que tâches NPM):

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

2) Toujours dans gruntfile.js, ajoutez des configurations init, quelque chose comme ceci.

{Avertissement: je ne suis pas un expert de telles configurations. J'ai trouvé la configuration sass sur un excellent article de blog il y a quelque temps que je ne peux pas localiser pour le moment. La clé était que je voulais trouver les fichiers tous dans le projet dans un certain dossier (plus les descendants). Ce qui suit (remarque "someSourceFolder/**/*.scss" et voir la note connexe 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 de Task Runner Explorer comme indiqué dans l'autre réponse. Assurez-vous de fermer et de rouvrir le projet. Il semble que vous devez exécuter (double-cliquer) "regarder" (sous "Tâches") à chaque démarrage du projet pour que la montre soit surveillée, mais cela fonctionne ensuite lors des sauvegardes suivantes.

8
Nicholas Petersen