2014-11-26 7 views
10

Uygulamamı dağıtırken, bower bağımlılığını deploy dizinine kopyalamak ve bu dosyalara olan bağlantıları deploy dizinindeki index.html dizinine enjekte etmek istiyorum.Grid kullanarak ana-bower-dosyaları tek adımda nasıl kopyalanır ve enjekte edilir?

Her adım tek başına mükemmel şekilde çalışır, bunları birleştiremiyorum.

Kopya dosyaları: dosyaları enjekte

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

:

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

ben bağımlı dosyaların doğru düzeni sağlamak için tek adımda bunu gerektiğini düşünüyorum.

Bu bileşimi denedim ama çalışmadı.

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/')); 

cevap

13

Ben wiredep tavsiye:

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

ve wiredep görev benziyor:

Sen html bir blok eklemek

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

için Deps katacak Hangi html'niz şu şekilde:

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

html blok

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

yudum görev

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')); 
}); 

bir göz atın tüm projenizin javascript bağımlılıkları

sipariş useref ile bu birleştirebilirsiniz

nasıl jeneratör-gulp- webapp şeyler yapar:

Not: $.plugin sözdizimi var $ = require('gulp-load-plugins')();

+0

Bu "uygulama" değişkeni nereden geliyor? – Startec

İlgili konular