2017-04-11 2 views
2

Im irgendwie zu Verlust hier.FountainJs - Wo werden app.js und vendor.js generiert

http://fountainjs.io/

Im mit fountainJs für ein Projekt, die folgenden Konfigurationen:

  • AngularJS 1.5
  • Reines Javascript
  • Gulp
  • SCC

Die Sache ist, ich diese Projektstruktur haben:

SRC 
|- APP 
    |-folder1 
    |- file1.js 
    |- file2.js 
    |-folder2 
    |- file3.js 
    |- file4.js 
|- common1.js 


environment_variable='folder1' 

Und möchten, dass app.js sind nur JS-Dateien aus einem Ordner, durch die Umgebungsvariable definiert (file1.js, file2.js), plus, die gewöhnlichsten (common1.js). Stattdessen enthält es jedes Mal, wenn ich einen Build mache, alle JS-Dateien, die in die app.js hochgeladen wurden, wodurch alle Arten von Konflikten entstehen.

Irgendwelche Ideen oder Anleitungen für mich zu verwenden? Ich vermute, dass das die build.js-Datei ist, die all das macht, kaufe ich verstehe nicht, was dort vor sich geht.

const gulp = require('gulp'); 
const filter = require('gulp-filter'); 
const useref = require('gulp-useref'); 
const lazypipe = require('lazypipe'); 
const rev = require('gulp-rev'); 
const revReplace = require('gulp-rev-replace'); 
const uglify = require('gulp-uglify'); 
const cssnano = require('gulp-cssnano'); 
const htmlmin = require('gulp-htmlmin'); 
const sourcemaps = require('gulp-sourcemaps'); 
const uglifySaveLicense = require('uglify-save-license'); 
const inject = require('gulp-inject'); 
const ngAnnotate = require('gulp-ng-annotate'); 

const conf = require('../conf/gulp.conf'); 

gulp.task('build', build); 

function build() { 
    const partialsInjectFile = gulp.src(conf.path.tmp('templateCacheHtml.js'), {read: false}); 
    const partialsInjectOptions = { 
    starttag: '<!-- inject:partials -->', 
    ignorePath: conf.paths.tmp, 
    addRootSlash: false 
    }; 

    const htmlFilter = filter(conf.path.tmp('*.html'), {restore: true}); 
    const jsFilter = filter(conf.path.tmp('**/*.js'), {restore: true}); 
    const cssFilter = filter(conf.path.tmp('**/*.css'), {restore: true}); 

    return gulp.src(conf.path.tmp('/index.html')) 
    .pipe(inject(partialsInjectFile, partialsInjectOptions)) 
    .pipe(useref({}, lazypipe().pipe(sourcemaps.init, {loadMaps: true}))) 
    .pipe(jsFilter) 
    .pipe(ngAnnotate()) 
    .pipe(uglify({preserveComments: uglifySaveLicense})).on('error', conf.errorHandler('Uglify')) 
    .pipe(rev()) 
    .pipe(jsFilter.restore) 
    .pipe(cssFilter) 
    .pipe(cssnano()) 
    .pipe(rev()) 
    .pipe(cssFilter.restore) 
    .pipe(revReplace()) 
    .pipe(sourcemaps.write('maps')) 
    .pipe(htmlFilter) 
    .pipe(htmlmin()) 
    .pipe(htmlFilter.restore) 
    .pipe(gulp.dest(conf.path.dist())) 
     .pipe(gulp.src(conf.path.src('/templates/**/*')).pipe(gulp.dest(conf.path.dist('/templates')))); 
} 

Antwort

0

Gemäß meinem Verständnis Ihrer Frage, möchten Sie js Dateien von folder2 auszuschließen.

so zu tun, sollten Sie diesen Weg in dem Filter ausschließen möchten, können Sie so etwas wie folgt verwenden:

const jsFilter = filter(
    conf.path.tmp(['**/*.js', '!folder2/*.js']), {restore: true} 
); 
0

Ich habe auch einige Probleme mit FountainJs. Ich habe angefangen, es zu benutzen, als das Projekt bereits größtenteils fertig war und ich musste einige Kompromisse eingehen, um das Build-System für das Projekt anzupassen.

Nun die build Aufgabe erstellt nicht einmal und app.js Datei. Sie könnten versuchen, gulp-debug zu verwenden, um zu sehen, welche Dateien durch die Pipe übergeben werden.

0

Build-Skript verwendet gulp-useref zum Verketten von Skripten und Stilen, die in mit gulp-inject injiziert wurden.Sowohl der Plugins suchen spezielle Kommentare, gulp-inject Verwendung:

  • <!-- bower:css -->
  • <!-- inject:css -->
  • <!-- bower:js -->
  • <!-- inject:js -->
  • <!-- inject:partials -->

gulp-useref Verwendung:

  • <!-- build:css({.tmp/serve,src}) styles/vendor.css -->
  • <!-- build:css({.tmp/serve,src}) styles/app.css -->
  • <!-- build:js(src) scripts/vendor.js -->
  • <!-- build:js({.tmp/serve,.tmp/partials,src}) scripts/app.js -->

So müssen alles in den Kommentaren in index.html erwähnt wird, können Sie die Plugins Dokumentation refere Details zu erhalten.

Sie können auch einen Blick auf Angular-Gulp-Boilerplate werfen, die ich vor langer Zeit gegabelt habe, um Abhängigkeiten auf dem neuesten Stand zu halten und neue Funktionen einzuführen, da es im Produktionsprojekt verwendet wird.

Verwandte Themen