Creazione di PowerShell - Compilazione di SASS

Question

Spero di iniziare a utilizzare SASS in un progetto di Visual Studio 2010 utilizzando Web Workbench - ma il problema del controllo della versione tramite TFS mi ha bloccato. Per evitare di sovrascrivere le modifiche di qualcun altro, capisco che il CSS in uscita dovrebbe essere escluso dal controllo del codice sorgente e che lo SCSS dovrebbe essere compilato sul lato server CSS durante il processo di compilazione. Attualmente utilizziamo uno script PowerShell per la build, ma non riesco a trovare alcuna informazione su come incorporare la compilation SCSS in PowerShell. C'è qualche documentazione decente là fuori su questo processo?

Answer 1

Penso che la mia mancanza di esperienza con Powershell/script di compilazione in generale mi abbia fatto pensare troppo a questo. Ho preso le seguenti operazioni:

1) installati Rubino per Windows da qui: https://www.ruby-lang.org/en/documentation/installation/

2) Aprire il prompt dei comandi -> entrato gem install ruby

3) Inaugurato PowerGUI Script Editor (già installato, ma può essere scaricato qui: http://software.dell.com/products/powergui-freeware/)

4) Creato una funzione per eseguire il seguente: sass -t compressed "path\sassInput.scss" "path\sassOutput.css"

E presto. Voglio avere un modo per farlo per ogni file .scss nella directory che non è parziale, ma questo è sufficiente per farmi iniziare per ora.

UPDATE: Questo è quello che ho finito con uno script PowerShell: (nota $dirpath è impostato su directory principale del mio progetto altrove)

$stylesheetPath = $dirpath + "App_Themes\" 
$files = Get-ChildItem $stylesheetPath -Filter *.scss 
for ($i=0; $i -lt $files.Count; $i++) { 
    $file = $files[$i] 
    $fileName = $file.BaseName 
    $filePath = $file.FullName 
    if (-not $fileName.StartsWith("_")) { 
     $newFilePath = "$stylesheetPath$fileName.css" 
     sass -t compressed $filePath $newFilePath 
    } 
} 

Answer 2

È necessario un compilatore SASS e il tuo chilometraggio può variare. Il compilatore originale è scritto in Ruby, quindi, se vuoi usarlo, devi installare Ruby, la gemma SASS e invocare sass dal tuo script PowerShell. Un'altra opzione è usare un compilatore compatibile come SassC o C6 che non ha bisogno del runtime di Ruby.

Answer 3

1. Installare Node.JS (https://nodejs.org/download/)
2. Installa Ruby per Windows (http://rubyinstaller.org/)
3. esegui npm init nella directory del progetto per creare un file packages.json.
4. installare grugnito npm install grunt --save-dev (http://gruntjs.com/getting-started)
5. installare grugnito-contrib-sass npm install grunt-contrib-sass --save-dev
6. creare un vuoto Gruntfile.js nel progetto principale

7. aggiungere il seguente al tuo gruntfile.js

   module.exports = function(grunt) { 
       // Do grunt-related things in here 
   }; 
   

8. Seguire le istruzioni qui per creare un'attività grunt-sass: https://github.com/gruntjs/grunt-contrib-sass Alcuni semplici esempi sono forniti vicino alla fine del readme.

9. eseguire grunt da una finestra di PowerShell nella root del progetto.

10. PROFITTO!

questo frammento potrebbe aiutare quando si aggiunge questo al vostro script di build automatizzato:

push-location c:\dev\project 
grunt 
pop-location