Gulp kann nicht css und js zugleich injizieren

Ich versuche, den folgenden CodeGulp kann nicht css und js zugleich injizieren

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

// wenn ich kommentieren Sie die folgende Zeile .pipe($.inject(gulp.src(config.css)))

meine Dann zu laufen. js files bekommen injizieren, sonst tun sie es nicht, von dem was ich verstehe, geschieht diese Injektion parallel.

Was mache ich falsch?

Quelle

2015-09-16 eugenekgn

Warum können Sie nicht ein einfaches 'gulp.src' verwenden. Und kannst du erklären, was '$ .inject' macht? –

$ .inject ist dasselbe wie gulp-inject, ich habe "gulp-load-plugins" installiert, die alle Module in var $ = require laden ('gulp-load-plugins') ({faul: true}); // holt Schluck Plugins – eugenekgn

gulp-inject wird nur eine Gruppe von Dateien injizieren, wobei bei jedem Aufruf die alte Gruppe durch die neue Gruppe ersetzt wird. Es gibt zwei Möglichkeiten, das Problem zu lösen.

1) Von der gulp-inject github-Seite: Verwenden Sie das event-stream-Plugin, um die beiden Dateinamenströme (.css und .js) in einem einzigen Stream zu kombinieren, den Sie zum injizieren übergeben.

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) Eine alternative Lösung, die Ihre aktuelle Code Organisation anpassen kann besser ist, die gulp-injectname Parameter zu verwenden, um zwei verschiedene Orte zu definieren zu injizieren. So haben Sie eine Header-Datei wie folgt aus:

<!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>

und dann gulpfile.js enthält so etwas wie:

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

Quelle

2015-09-20 13:55:18

Gulp kann nicht css und js zugleich injizieren

Antwort

Verwandte Themen