Minification automatico con nodo taskJun e Gulp

Question

Ho bisogno di alcuni consigli per migliorare la minificazione automatica con nodo e gulp.

L'obiettivo principale è generare dinamicamente i file minificati (per JS e LESS) in modalità di sviluppo e modificare automaticamente i file normali (js e meno) in file minificati in modalità produzione.

Lo scenario contiene:

• NodeJS e ExpressJS per la configurazione di routing e l'ambiente
• Jade come motore di template
• Gulp (compito corridore)

Questa è la mia messa a punto:

GULP

Sto usando nodemon per lanciare server.js che avvia il mio server di nodi. In questo file gulp ho alcune attività (['watch']) per vedere le modifiche sui file JS e LESS e ridurle in ogni singola modifica.

gulp.task('nodemon', function() { 
    nodemon({ script: 'server.js'}) 
     .on('start', ['watch']) 
     .on('change', ['watch']) 
}) 

NODE

Nel server del nodo rendo le viste iniezione e l'oggetto che rileva la modalità di produzione di sviluppo o

var env= process.env.NODE_ENV = process.env.NODE_ENV || 'development'; 

    app.get('/', function(req, res){ 
     res.render('index', {environment: env}); 
    }); 

JADE

Nella vista, la l'oggetto iniettato viene confrontato per aggiungere normali file CSS e JS per d modalità di sviluppo o file minificati per la modalità di produzione

if environment == "development" 
      link(rel='stylesheet', href='/vendor/bootstrap/dist/css/bootstrap.css') 
    else 
      link(rel='stylesheet', href='/vendor/bootstrap/dist/css/bootstrap.min.css') 

È questo il modo corretto di farlo? Dovrei controllare per altre opzioni? Voglio evitare la minifrazione manuale prima di inviare ogni volta un'app al server. Tutti i consigli sarebbero accettati al fine di migliorare questo.

È meglio eseguire la minificazione durante l'attesa del server? Come posso farlo con Azure?

Grazie.

Answer 1

Ho trovato una nuova soluzione per eseguire questa minifica automatica.

Con il codice della mia domanda di cui sopra, è possibile generare, in modalità di sviluppo, tutti i file minificati per il caricamento manuale sul server. Può essere ok ma, se si apportano alcune modifiche in css/js senza aver eseguito l'operazione di gulp per minify, le modifiche non verranno ridotte.

Ho trovato una nuova soluzione se si sta lavorando con Azure. La mia nuova soluzione utilizza KUDU (https://github.com/projectkudu/kudu)

Kudu è il motore dietro le distribuzioni git nei siti Web di Azure e può anche essere eseguito all'esterno di Azure. Quando si distribuisce in azzurro, esiste un comando di distribuzione predefinito che installa node e package.json.

Con Kudu è possibile creare un comando di distribuzione personalizzato per avviare tutto ciò che si desidera (gulp per minification, grunt, test, ecc.). In questo caso, avvieremo un compito ingombrante per la minimizzazione.

Prima a tutti che stiamo per installare localmente azzurro-CLI per creare uno script di distribuzione personalizzato per Azure:

npm install -g azure-cli 

Poi creiamo il comando personalizzato

azure site deploymentscript --node 

Questo aggiungerà il seguente file nella tua directory:

• . occupazione
• deploy.cmd

.deployment lanciare deploy.cmd (necessaria per Azure)

Se ispezionare deploy.cmd si vede che installare tutti i pacchetti necessari. Quindi, per il lancio grugnito server abbiamo bisogno di aggiungere questo nella sezione di configurazione:

IF NOT DEFINED GULP_CMD (
    :: Install gulp 
    echo Installing Gulp 
    call npm --registry "http://registry.npmjs.org/" install gulp -g --silent 
    IF !ERRORLEVEL! NEQ 0 goto error 

    :: Locally just running "gulp" would also work 
    SET GULP_CMD="%appdata%\npm\gulp.cmd" 

) 

e cambiare la sezione distribuzione come questo:

:Deployment 
echo Handling node.js deployment. 

:: 1. Select node version 
call :SelectNodeVersion 

:: 2. Install npm packages 
IF EXIST "%DEPLOYMENT_TARGET%\package.json" (
    pushd "%DEPLOYMENT_TARGET%" 
    call :ExecuteCmd !NPM_CMD! install 
    IF !ERRORLEVEL! NEQ 0 goto error 
    popd 
) 

:: 3. Install npm packages 
echo "Execute Gulp" 
IF EXIST "%DEPLOYMENT_TARGET%\gulpfile.js" (
    pushd "%DEPLOYMENT_TARGET%" 
    call :ExecuteCmd !GULP_CMD! YOUR_GULP_TASK_TO_EXECUTE 
    IF !ERRORLEVEL! NEQ 0 goto error 
) 

popd 

:: 4. KuduSync 
IF /I "%IN_PLACE_DEPLOYMENT%" NEQ "1" (
    call :ExecuteCmd "%KUDU_SYNC_CMD%" -v 50 -f "%DEPLOYMENT_SOURCE%" -t "%DEPLOYMENT_TARGET%" -n "%NEXT_MANIFEST_PATH%" -p "%PREVIOUS_MANIFEST_PATH%" -i ".git;.hg;.deployment;deploy.cmd" 
    IF !ERRORLEVEL! NEQ 0 goto error 
) 

Con questo script di distribuzione personalizzato per Azure, ogni volta che si effettua una distribuzione (spinga il tuo ramo in azzurro) gulp avvierà l'operazione YOUR_GULP_TASK_TO_EXECUTE (nel mio caso "stili" per il lancio di minifoto in file .less)

Se verrà eseguito un errore durante lo script di distribuzione, l'implementazione azzurra del nostro sito sarà fallire (controllare il registro). Consiglio di avviare localmente deploy.cmd per vedere come funzionerà in azzurro e se si bloccherà.

È possibile personalizzare questo script per il lancio desiderato in ogni singola implementazione.

Spero che aiuti!

Answer 2

Quello che normalmente è esattamente ciò che si vorrebbe evitare .. :)

Durante lo sviluppo ho alcuni osservatori che stanno linting js file, traducendo stilo per CSS e generando i miei parziali HTML statiche da giada. Il loro ultimo passo è usare il meraviglioso plugin gulp-inject per mettere una chiamata alle risorse non minime nel mio file di indice. Tutti questi file vengono inseriti nella cartella build.

Quando voglio testare il mio ambiente di produzione ho un compito dist che prende tutti i beni presenti nelle concatena cartella di build e minify, applicare un suffisso giri al nome per il busting della cache e con gulp-Inject i aggiorneremo il file index.html con i collegamenti alle risorse miniate.

Nel server controllo l'ambiente e comando express (con il pacchetto serve-static) per servire le cartelle build o dist di conseguenza.

Durante la creazione del sito Web in Azure è possibile specificare il valore process.env.NODE_ENV in modo che sia opportuno non apportare modifiche al runtime al codice.