2015-09-16 15 views
6

पर CSS और JS इंजेक्षन नहीं कर सकते मैं निम्नलिखित कोडGulp एक ही समय

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

मैं निम्न पंक्ति टिप्पणी // अगर .pipe($.inject(gulp.src(config.css)))

तब मेरे को चलाने के लिए कोशिश कर रहा हूँ। जेएस फाइलें इंजेक्ट करती हैं अन्यथा वे नहीं करते हैं, जो मैं समझता हूं कि यह इंजेक्शन समानांतर में होता है।

मैं क्या गलत कर रहा हूं?

+0

आप एक सरल 'gulp.src' क्यों उपयोग नहीं कर सकते। और क्या आप समझा सकते हैं कि '$ .inject' क्या करता है? –

+0

$ .inject gulp-inject के समान है, मेरे पास "gulp-load-plugins" स्थापित है जो var $ = आवश्यकता ('gulp-load-plugins') ({lazy: true}) में सभी मॉड्यूल लोड करता है; // gulp प्लगइन्स fetches – eugenekgn

उत्तर

6

gulp-inject केवल फाइलों का एक सेट इंजेक्ट करेगा, जब आप इसे कॉल करते समय पुराने सेट को नए सेट के साथ बदल देंगे। समस्या को हल करने के दो तरीके हैं।

1) gulp-inject गीथब पेज से: event-stream प्लगइन का उपयोग फ़ाइल नामों (.css और .js) की दो धाराओं को एक ही स्ट्रीम में जोड़ने के लिए करें जिसे आप इंजेक्ट करते हैं।

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) एक वैकल्पिक समाधान है जो अपने वर्तमान कोड संगठन बेहतर अनुरूप बन इंजेक्षन करने के लिए दो अलग-अलग स्थानों को परिभाषित करने के gulp-injectname पैरामीटर का उपयोग करने के लिए है। इस प्रकार आप इस प्रकार से हैडर फ़ाइल है:

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

और फिर अपने gulpfile.js की तरह कुछ में शामिल हैं:

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