Come compilare file .less in salvataggio in Visual Studio 2015 (anteprima)

Question

Ok, quindi ho creato un nuovo progetto ASP.Net 5/MVC 6 in Anteprima di Visual Studio 2015. In linea con il nostro attuale metodo di fare le cose, per lo styling voglio usare i file .less. La creazione dei file è semplice, ma Web Essentials non li compila più.

Quindi la mia domanda è questa: che cosa esattamente devo fare per ottenere i miei file .css generati quando salvi i file .less?

Sulla base delle mie avventure che fanno sì che Typescript funzioni correttamente, dovrò utilizzare Grunt per eseguire questa operazione, ma sono nuovo di zecca per Grunt e quindi non sono sicuro di come lo si farebbe?

Si prega di aiuto!

Answer 1

Quindi, ecco come farlo (compilare su di costruzione e non elegante compilazione su Save):

Fase 1

Aprite il vostro file di package.json (è nella root del vostro progetto) e aggiungere queste righe:

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

Ovviamente è possibile modificare i numeri di versione (si otterrà utili intelliSense), queste sono solo le versioni attuali.

Fase 2

pulsante destro del mouse sulla cartella NPM (sotto Dependencies) e fare clic Restore Packages. Questo installerà less e grunt-contrib-less.

Fase 3

Una volta che questi pacchetti vengono ripristinati, vai al tuo gruntfile.js del file (ancora una volta, nella radice del progetto). Qui, è necessario aggiungere la seguente sezione per grunt.initConfig

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

Avrete anche bisogno di aggiungere questa linea verso la fine del gruntfile.js:

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

Fase 4

Quindi vai su View->Other Windows->Task Runner Explorer nel menu premi l'icona/pulsante di aggiornamento, quindi fai clic con il pulsante destro del mouse su less sotto Tasks e vai su Bindings e fai clic su After Build.

Urrà, ora meno file verranno compilati e noi (I) abbiamo imparato a conoscere il grunt, che sembra davvero potente.

Passo 5: Compilare su Save

non ho ancora ottenuto questo lavoro per la mia soddisfazione, ma ecco quello che ho finora:

Come sopra, aggiungere un altro pacchetto NPM grunt-contrib-watch (aggiungi al pacchetto.json, quindi ripristinare i pacchetti).

Quindi aggiungere una sezione orologio in gruntfile.js, come questo (ovviamente questo può funzionare per altri tipi di file come bene):

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

Così ora avrete qualcosa di simile nel tuo 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"); 
}; 

Uno può poi semplicemente impostare questo compito per essere eseguito su progetto Open (tasto destro del mouse sul watch sotto Tasks nel Task Runner Explorer (è sotto View->Other Windows nel menu in alto) e il gioco è fatto mi aspetterei dovresti farlo chiudi e riapri il progetto/soluzione per ottenere questo risultato, altrimenti puoi eseguire manualmente l'attività.

Answer 2

(Nota: c'è ora una nuova domanda posta here riguardano direttamente sass ho cercato di modificare la domanda e tag in questa domanda per includere sass, ma qualcuno non lo permetteva..)

vorrei per aggiungere la risposta alla stessa domanda per sass (.scss). La risposta è così correlata Penso che questi potrebbero essere meglio combinati come due risposte in questo stesso post (se non sei d'accordo, per favore fatemelo sapere, altrimenti potremmo aggiungere "o sass" nel titolo del post?). Come tale, vedere la risposta di Maverick per alcuni dettagli più piene, ecco la sintesi per sass:

(Pre-passo per i progetti vuoti) Se si è iniziato con un progetto vuoto, prima aggiungere Grunt e Bower:

soluzione clic destro -> Aggiungi -> 'Grunt e Bower a Project' (quindi attendere un minuto per l'installazione a tutti)

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" 
} 

(FYI: grunt-contrib-sass link)

Poi:

Dipendenze -> tasto destro del mouse NPM -> Ripristina Packages.

gruntfile.js

1) Aggiungi o assicurarsi che queste tre linee sono registrati in prossimità del fondo (come compiti NPM):

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

2) Sempre in gruntfile. js, aggiungi le configurazioni di init, qualcosa come la seguente.

{Avvertenza: non sono esperto in tali configurazioni. Ho trovato la configurazione sass su un post di blog eccellente qualche tempo fa che non riesco a individuare in questo momento per dare credito. La chiave era che volevo trovare tutti i file nel progetto all'interno di una determinata cartella (più i discendenti).Ciò che segue (avviso "someSourceFolder/**/*.scss" e see important related note here). }

// ... 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 
     } 
    } 
} 

Ora seguire le istruzioni per la Task Runner Explorer come indicato nel altra risposta. Assicurati di chiudere e riaprire il progetto. Sembra che tu debba eseguire (doppio clic) "orologio" (sotto "Attività") ogni volta che il progetto viene avviato per far sì che l'orologio guardi, ma poi funziona con i salvataggi successivi.

Answer 3

Con VS 2015 Web Essential è split into multiple extensions è possibile scaricare l'estensione Web Compiler da here e ha anche i dettagli su come usarlo.

Non è certamente elegante come in passato, ma se si sta utilizzando un progetto esistente e si desidera utilizzare un compilatore per MENO, questo potrebbe fare il lavoro di base.