Gulp - Come faccio a controllare ordine di elaborazione con gulp-concat

Question

Sto cercando di generare risorse combinate JavaScript e CSS in un unico file utilizzando gulp-concat utilizzando qualcosa di simile:

var concatjs = gulp 
    .src(['app/js/app.js','app/js/*Controller.js', 'app/js/*Service.js']) 
    .pipe(concat('app.js')) 
    .pipe(gulp.dest('build')); 

ho un concatted file con questo, ma l'ordine dei file javascript incorporati nel file di output combinato è casuale - in questo caso i controller vengono visualizzati prima del file app.js iniziale, che causa problemi durante il tentativo di caricare l'app Angolare che si aspetta l'app. js prima che una qualsiasi delle risorse correlate sia caricata. Allo stesso modo, le risorse CSS che vengono combinate finiscono in ordine casuale, e ancora una volta l'ordine è piuttosto importante - es. bootstrap deve essere caricato prima del tema e di eventuali fogli di stile personalizzati.

Come posso impostare il processo di concatenazione in modo che l'ordine rimanga intatto?

Aggiornamento Così si scopre l'ordinamento sopra SI effettivamente lavoro specificando esplicitamente l'ordine dei file nella gamma di specifiche di file. Quindi in questo caso la cosa fondamentale è elencare prima app/js/app.js, poi lasciare il resto degli script in cui l'ordine non ha importanza in nessun ordine.

Il motivo per cui non sono riuscito a vedere questo comportamento (Duh!) È che Gulp Watch era in esecuzione e l'aggiornamento gulpfile.js non si rifletteva effettivamente nell'output. Il riavvio di gulp ha aggiornato lo script. Errore Neophyte ...

Altri pensieri: Ancora chiedendo però - è questo il posto giusto per specificare l'ordine di costruzione? Sembra che tu stia riempiendo la logica dell'applicazione (ordine di caricamento) nello script di build, il che non sembra corretto. Ci sono altri approcci per affrontare questo?

Answer 1

Per un'applicazione angolare come quella nell'esempio (ed è la gestione delle dipendenze), di solito utilizzo questo tipo di sintassi: gulp.src(['app\js\app.js', 'app\js\**\*.js']).

È anche possibile utilizzare solo gulp.src('app\js\**\*.js') se il file app.js è il primo in ordine alfabetico.

Vedo il tuo punto di spostare l'ordine di file di caricamento nello script di build: ho avuto la stessa sensazione finché non ho iniziato ad usare gulp-inject per iniettare i file unminified riferimenti nel mio index.html in fase di sviluppo e di iniettare il bundle, minified e quelli con versione nel file indice di produzione. L'utilizzo di quella soluzione di ordinamento globale in tutto il mio ciclo di sviluppo mi ha reso tanto sensato che non ci penso più.

Infine, una soluzione possibile per questo "odore di ordinamento" può essere utilizzando browserify ma per me è solo complicare l'architettura per un'applicazione angolare: alla fine, come hai detto, hai solo bisogno che venga chiamato un file specifico prima di tutti gli altri

Answer 2

Per il mio js uso una particolare convenzione di denominazione/struttura che aiuta. L'ho diviso in directory per feature, in cui ogni 'feature' viene quindi trattata come un modulo incapsulato separato.

Così, per i miei progetti che ho,

app/js/ 

    - app.js 
    - app.routes.js 
    - app.config.js 

    /core/ 

     - core.js 
     - core.controllers.js 
     - core.services.js 

     /test/ 

      - .spec.js test files for module here 

    /feature1/ 

     - feature1.js 
     - feature1.controllers.js 

    /feature2/ 

     - feature2.js 
     - feature2.controllers.js 

    ... 

Così ogni directory ha un file con lo stesso nome che ha semplicemente la definizione del modulo iniziale, il che è tutto ciò che app.js ha in sé per l'intera applicazione .Così, per feature1.js

angular.module('feature1', []) 

e poi file successivi nel modulo di recuperare il modulo e aggiungere le cose (controllori/servizi/fabbriche, ecc) ad esso.

angular.module('feature1') 
     .controller(....) 

In ogni caso, io riesco anche a punto ...

come ho una struttura predefinita e sapere che un file specifico deve andare prima per ogni modulo, io sono in grado di utilizzare la funzione seguente per ordinare tutto in ordine prima che venga elaborato da Gulp.

Questa funzione dipende npm install file e npm install path

function getModules(src, app, ignore) { 

    var modules = []; 

    file.walkSync(src, function(dirPath, dirs, files) { 

     if(files.length < 1) 
      return; 

     var dir = path.basename(dirPath) 
      module; 

     if(ignore.indexOf(dir) === -1) { 
      module = dirPath === src ? app : dir; 

      files = files.sort(function(a, b) { 
       return path.basename(a, '.js') === module ? -1 : 1; 
      }) 
      .filter(function(value) { 
       return value.indexOf('.') !== 0; 
      }) 
      .map(function(value) { 
       return path.join(dirPath, value); 
      }) 

      modules = modules.concat(files); 
     } 
    }) 

    return modules; 
} 

Cammina la struttura di directory passata ad esso prende i file da ogni directory (o modulo) e le ordina nell'ordine corretto, assicurando che la definizione modulo il file è sempre il primo Ignora anche tutte le directory visualizzate nell'array "ignora" e rimuove tutti i file nascosti che iniziano con "."

Uso sarebbe,

getModules(src, appName, ignoreDirs); 

• src è il dir si desidera recurse da
• appName è il nome del file app.js - cosi 'app'
• ignoreDirs è un array di nomi di directory che si vorrebbe ignorare

così

getModules('app/js', 'app', ['test']); 

E restituisce un array di tutti i file nella vostra applicazione nell'ordine corretto, che si potrebbe poi utilizzare come:

gulp.task('scripts', function() { 
    var modules = getModules('app/js', 'app', ['test']); 

    return gulp.src(modules) 
       .pipe(concat('app.js')) 
       .pipe(gulp.dest('build')); 
});