Gulp nie można wstrzykiwać css i js jednocześnie

Próbuję uruchomić następujący kodGulp nie można wstrzykiwać css i js jednocześnie

var $ = require('gulp-load-plugins')({ lazy: true }); // fetches gulp plugins

gulp.task('wiredep', function() { 
    var wiredep = require('wiredep').stream; 

    return gulp 
    .src(config.index) 
    .pipe(wiredep(config.wiredepDefaultOptions))  //wiredep injection configuration 
    .pipe($.inject(gulp.src(config.js)))    //custom js files configuation 
    .pipe(gulp.dest(config.client)) 
}); 



/* inject bower and other injections */ 
    gulp.task('inject', ['styles-compile', 'wiredep'], function() { 
    return gulp 
     .src(config.index) 
     .pipe($.inject(gulp.src(config.css))) 
     .pipe(gulp.dest(config.client)) 
});

// Jeśli komentarz następujący wiersz .pipe($.inject(gulp.src(config.css)))

wtedy mój. Pliki js się wstrzykują, inaczej nie, z tego co rozumiem, ten wtrysk dzieje się równolegle.

Co robię źle?

Źródło

2015-09-16 eugenekgn

Dlaczego nie można użyć prostego 'gulp.src'. Czy możesz wyjaśnić, co robi '$ .inject'? –

$ .inject jest tym samym co gulp-inject, mam zainstalowane "gulp-load-plugins", które ładuje wszystkie moduły w var $ = require ('gulp-load-plugins') ({lazy: true}); // pobiera wtyczki gulp – eugenekgn

będzie wstrzykiwać tylko jeden zestaw plików, zastępując stary zestaw nowym zestawem za każdym razem, gdy go wywołasz. Istnieją dwa sposoby rozwiązania tego problemu.

1) Ze strony github gulp-inject: użyj wtyczki event-stream, aby połączyć dwa strumienie nazw plików (.css i .js) w jeden strumień, który należy przekazać do wstrzyknięcia.

var es = require('event-stream'), 
    inject = require('gulp-inject'); 

// Concatenate vendor scripts 
var vendorStream = gulp.src(['./src/vendors/*.js']) 
    .pipe(concat('vendors.js')) 
    .pipe(gulp.dest('./dist')); 

// Concatenate AND minify app sources 
var appStream = gulp.src(['./src/app/*.js']) 
    .pipe(concat('app.js')) 
    .pipe(uglify()) 
    .pipe(gulp.dest('./dist')); 

gulp.src('./src/index.html') 
    .pipe(inject(es.merge(vendorStream, appStream))) 
    .pipe(gulp.dest('./dist'));

2) Alternatywnym rozwiązaniem, które może spełnić swoją aktualną organizację kodu lepiej jest użyć parametru gulp-injectname zdefiniować dwa różne miejsca wstrzyknięcia. W ten sposób masz plik nagłówka tak:

<!DOCTYPE html> 
<html> 
    <head> 
    <title>My index</title> 
    <!-- styles:css --> 
    <!-- the styles files will be injected here --> 
    <!-- endinject --> 
</head> 
<body> 

    <!-- scripts:js --> 
    <!-- the scripts files will be injected here --> 
    <!-- endinject --> 
</body> 
</html>

i wówczas gulpfile.js zawiera coś takiego:

var inject = require('gulp-inject'); 

gulp.src('./src/index.html') 
    .pipe(inject(gulp.src('./config.css'), {name: 'styles'})) 
    .pipe(inject(gulp.src('./config.js'), {name: 'scripts'})) 
    .pipe(gulp.dest('./dist'));

Źródło

2015-09-20 13:55:18

Gulp nie można wstrzykiwać css i js jednocześnie

Odpowiedz

Powiązane problemy