Also hier ist, wie es geht (kompilieren auf zu bauen und nicht-elegante Kompilierung auf Speichern):
Schritt 1
Öffnen Sie Ihre package.json Datei (es ist in der Wurzel des Projekts) und fügen Sie die folgenden Zeilen:
"grunt-contrib-less": "^1.0.0",
"less": "^2.1.2"
Natürlich können Sie die Versionsnummern ändern (Sie werden hilfreich intellisense zu bekommen), das sind nur die aktuellen Versionen sind.
Schritt 2
der rechten Maustaste auf den Ordner NPM (unter Dependencies) und Restore Packages klicken. Dies installiert less und grunt-contrib-less.
Schritt 3
Nach der Wiederherstellung werden diese Pakete gehen (in der Wurzel des Projekts wieder) auf Ihrer gruntfile.js Datei. Hier müssen Sie den folgenden Abschnitt in grunt.initConfig
less: {
development: {
options: {
paths: ["importfolder"]
},
files: {
"wwwroot/destinationfolder/destinationfilename.css": "sourcefolder/sourcefile.less"
}
}
}
Sie werden auch diese Zeile am Ende gruntfile.js hinzufügen müssen, um hinzuzufügen:
grunt.loadNpmTasks("grunt-contrib-less");
Schritt 4
Dann gehen Sie einfach zu View->Other Windows->Task Runner Explorer in dem Menü drücken Sie das Aktualisieren Symbol/Schaltfläche, dann mit der rechten Maustaste auf less unter Tasks und gehen Sie zu Bindings und ankreuzen After Build.
Hurra, jetzt werden weniger Dateien kompiliert und wir (ich) haben etwas über Grunt gelernt, das wirklich mächtig scheint.
Schritt 5: Kompilieren auf Speichern
Ich habe noch nicht mit diesen Arbeiten zu meiner Zufriedenheit bekommen, aber hier ist das, was ich bisher habe:
Wie oben, fügen Sie eine weitere NPM Paket grunt-contrib-watch (Zum Paket hinzufügen.json, dann Pakete wiederherstellen).
Dann eine Uhr Abschnitt in gruntfile.js hinzufügen, wie diese (natürlich kann dies auch für andere Arten von Dateien arbeiten):
watch: {
less: {
files: ["sourcefolder/*.less"],
tasks: ["less"],
options: {
livereload: true
}
}
}
So werden Sie jetzt so etwas wie dies in Ihrem gruntfile haben. 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");
};
man kann dann einfach diese Aufgabe gesetzt läuft auf Project Open (rechts~~POS=TRUNC auf watch unter Tasks im Task Runner Explorer (es ist unter View->Other Windows im oberen Menü) und fertig ich würde erwarten, du müsstest Schließen Sie das Projekt/die Lösung, und öffnen Sie es erneut, damit das Programm gestartet wird. Andernfalls können Sie die Aufgabe manuell ausführen.
Auch arbeite ich mich durch diese, so dass, wenn ich so erfolgreich tun, ich dies mit einem Schritt-für-Schritt-Antwort aktualisieren werde. – Maverick
Dies ist eine hervorragende Anleitung, wie man Grunt und Bower in VS2015 verwenden http://www.asp.net/vnext/overview/aspnet-vnext/grunt-and-bower-in-visual-studio-2015 –