Mit Grunt grunt-contrib-less) für die Erstellung von Bootstrap 3.1 WENIGER in Visual Studio 2013

Ich habe diese Arbeit in einer etwas anderen Weise:

• Sicherzustellen, Sie haben grunt-cli Global installiert (npm install -g grunt-cli)
• Erstellen Gruntfile.js in Ihrem Projekt oder Ihrer Lösung, und definieren Sie ein Ziel, um zu tun, was weniger zusammenstellen, die Sie möchten (z.B. weniger)
• Hinzufügen call grunt less Ihres pre-build-Ereignis (wenn Sie nicht angeben, NENNEN, dann ist der Prozess nicht mehr zurück nach grunt)

Können Sie verschiedene Ziele, um die Entwicklung und den Aufbau der Produktion Prozesse, die, wenn Sie mögen. Sie können auch weitere Ziele für andere Aufgaben - ich habe eine so ich kann laufen grunt watch automatisch neu kompilieren mein CSS, wenn ich weniger Dateien Bearbeiten.

Schritt-für-Schritt-Anleitung zum konvertieren der VS2013 Beispielprojekt, um die Verwendung weniger und Grunzen:

1. Entfernen bootstrap-und bootstrap installieren weniger:

   Uninstall-Package bootstrap
   Install-Package Twitter.Bootstrap.less

2. Öffnen Sie eine Eingabeaufforderung und cd in dein Projekt-Verzeichnis

3. Gewährleisten grunt-cli Global installiert:

   npm install -g grunt-cli

4. Erstellen Sie ein Paket.json-Datei:

   npm init

5. Installieren grunt und grunt-contrib-less lokal:
   npm install grunt grunt-contrib-less`

6. Erstellen Sie eine Datei in Ihrem Projekt mit dem Namen Gruntfile.js mit folgendem Inhalt:

   module.exports = function (grunt) {
       grunt.initConfig({
           pkg: grunt.file.readJSON('package.json'),
           less: {
               dev: {
                   options: {
                       sourceMap: true,
                       dumpLineNumbers: 'comments',
                       relativeUrls: true
                   },
                   files: {
                       'Content/bootstrap.debug.css': 'Content/bootstrap/bootstrap.less',
                   }
               },
               production: {
                   options: {
                       cleancss: true,
                       compress: true,
                       relativeUrls: true
                   },
                   files: {
                       'Content/bootstrap.css': 'Content/bootstrap/bootstrap.less',
                   }
               }
           },
   
       });
   
       grunt.loadNpmTasks('grunt-contrib-less');
   
       //Default task(s).
       grunt.registerTask('default', ['less']);
       grunt.registerTask('production', ['less:production']);
       grunt.registerTask('dev', ['less:dev']);
   };

7. Bearbeiten Sie Ihre Visual Studio-pre-build-Ereignis zu zählen:

   cd $(ProjectDir)
   call grunt --no-color

   (--no-color entfernt einige der steuerzeichen aus der Visual-Studio-build-Ausgabe)

8. Erstellen Sie Ihr Projekt, und aktivieren Sie dann alle Dateien anzeigen, und incldue die beiden kompilierten css-Dateien in Ihrem Projekt (also, die web deploy-Abholung).