Come copiare e iniettare i file del main-bower in un unico passaggio usando gulp?

Quando si distribuisce la mia app, voglio copiare la dipendenza di bower nella directory deploy e inserire i collegamenti a questi file nello index.html che si trova anche nella directory deploy.Come copiare e iniettare i file del main-bower in un unico passaggio usando gulp?

Ogni passo da solo funziona perfettamente da non sono in grado di combinarli.

Copiare i file:

return gulp.src(mainBowerFiles(), { read: false }) 
    .pipe(gulp.dest('./deploy/lib/'));

Iniezione i file:

return gulp.src('./deploy/index.html') 
    .pipe(plugins.inject(
     gulp.src(mainBowerFiles(), { read: false }), { relative: true })) 
    .pipe(gulp.dest('./deploy/'));

penso che avrei dovuto fare questo in un unico passaggio per mantenere l'ordine corretto dei file dipendenti.

Ho provato questa combinazione ma non ha funzionato.

return gulp.src('./deploy/index.html') 
    .pipe(plugins.inject(
     gulp.src(mainBowerFiles(), { read: false }) 
      .pipe(gulp.dest('./deploy/lib/'), { relative: true }))) 
    .pipe(gulp.dest('./deploy/'));

fonte

2014-11-26 Heiner

vi consiglio wiredep:

Si aggiunge un blocco al tuo html:

<html> 
<head> 
</head> 
<body> 
    <!-- bower:js --> 
    <!-- endbower --> 
</body> 
</html>

e il vostro compito wiredep assomiglia a:

// inject bower components 
gulp.task('wiredep', function() { 
    var wiredep = require('wiredep').stream; 
    gulp.src('app/*.html') 
    .pipe(wiredep()) 
    .pipe(gulp.dest('app')); 
});

a cui si aggiungeranno le dipendenze per il tuo html come tale:

<html> 
<head> 
</head> 
<body> 
    <!-- bower:js --> 
    <script src="bower_components/foo/bar.js"></script> 
    <!-- endbower --> 
</body> 
</html>

È quindi possibile combinare questo con useref di ordinare tutte le dipendenze JavaScript del vostro progetto

blocco HTML

<!-- build:js scripts/app.js --> 
<!-- bower:js --> 
<script src="bower_components/foo/bar.js"></script> 
<!-- endbower --> 
<script src="js/yourcustomscript.js"></script> 
<!-- endbuild -->

compito sorso

gulp.task('html', ['styles'], function() { 
    var assets = $.useref.assets({searchPath: '{.tmp,app}'}); 

    return gulp.src('app/*.html') 
    .pipe(assets) 
    .pipe(assets.restore()) 
    .pipe($.useref()) 
    .pipe(gulp.dest('dist')); 
});

Date un'occhiata a come generatore-gulp- webapp fa cose: https://github.com/yeoman/generator-gulp-webapp

Nota: la sintassi $.plugin assume var $ = require('gulp-load-plugins')();

fonte

2014-11-27 01:02:15

Da dove viene questa variabile "app"? – Startec

Come copiare e iniettare i file del main-bower in un unico passaggio usando gulp?

risposta

Problemi correlati