Gulp erstellt keine JS- und CSS-Dateien mit Main-Bower-Dateien

Question

Ich benutze Gulp zum Verketten/Minimieren aller JS/CSS-Dateien aus dem bower-Ordner (mit Main-Bower-Dateien) bzw. src-Ordner. Ich bin mit großen Schluck-Last-Plugins die folgenden Abhängigkeiten von package.json zu laden (die alle in node_modules existieren):

"dependencies": { 
    "gulp": "^3.9.1", 
    "gulp-concat": "^2.6.0", 
    "gulp-filter": "^4.0.0", 
    "gulp-load-plugins": "^1.2.4", 
    "gulp-rename": "^1.2.2", 
    "gulp-uglify": "^1.5.3", 
    "main-bower-files": "^2.13.1" 
} 

Hier ist die gulpfile.js:

// Include Gulp 
var gulp = require('gulp'); 

var src = 'src/'; 
var dest = 'public/'; 

// Include plugins 
var plugins = require("gulp-load-plugins")({ 
    pattern: ['gulp-*', 'gulp.*', 'main-bower-files'], 
    replaceString: /\bgulp[\-.]/ 
}); 

//Concat + Minify JS 
gulp.task('js', function() { 

var jsFiles = ['/src/js/*']; 

gulp.src(plugins.mainBowerFiles().concat(jsFiles)) 
    .pipe(plugins.filter('*.js')) 
    .pipe(plugins.concat('main.js')) 
    .pipe(plugins.uglify()) 
    .pipe(gulp.dest('public/js')); 

}); 
//Concat + Minify CSS 
gulp.task('css', function() { 

var cssFiles = ['src/css/*']; 

gulp.src(plugins.mainBowerFiles().concat(cssFiles)) 
    .pipe(plugins.filter('*.css')) 
    .pipe(plugins.concat('main.min.css')) 
    .pipe(plugins.uglify()) 
    .pipe(gulp.dest(dest + 'css')); 

}); 

// Default Task 
gulp.task('default', ['js','css']); 

Gulp ist nicht Fehler in der Konsole, aber weder die JS- noch die CSS-Datei wird erstellt.

Answer 1

Letztendlich beschränkte sich das Problem auf den gulp-filter, der keine Dateien zurückgab. Für alle, die ein ähnliches Setup versucht, wurde ich durch die Verwendung mainBowerFiles einen etwas anderen Pfad aufzunehmen, um die Dateien zu filtern, die das gleiche Endergebnis erreicht:

// Include Gulp 
var gulp = require('gulp'); 

// Include plugins 
var plugins = require("gulp-load-plugins")({ 
    pattern: ['gulp-*', 'gulp.*', 'main-bower-files'], 
    replaceString: /\bgulp[\-.]/ 
}); 


var src = 'src/'; 
var dest = 'public/'; 


//Concat + Minify JS 
gulp.task('test', function() { 

console.log(plugins); 

}); 


//Concat + Minify JS 
gulp.task('js', function() { 

var jsFiles = ['src/js/*']; 

gulp.src(plugins.mainBowerFiles('**/*.js').concat(jsFiles)) 
    .pipe(plugins.concat('main.min.js')) 
    .pipe(plugins.uglify()) 
    .pipe(gulp.dest(dest + 'js')); 

}); 

gulp.task('css', function() { 

    var cssFiles = ['src/css/*']; 

    gulp.src(plugins.mainBowerFiles('**/*.css', { 
     overrides: { 
      bootstrap: { 
       main: [ 
        './dist/css/bootstrap.min.css' 
       ] 
      } 
     } 
    }).concat(cssFiles)) 
    .pipe(plugins.concat('main.min.css')) 
    .pipe(plugins.cleanCss()) 
    .pipe(gulp.dest(dest + 'css')); 

}); 


// Default Task 
gulp.task('default', ['js','css']); 

Answer 2

hatte ich genau das gleiche Problem und stellt sich heraus, die ‚großen Schluck -filter‘funktionierte nicht wegen dieser Zeile:

.pipe(plugins.filter('*.js')) 

es wird folgendes sein sollte:

.pipe(plugins.filter('**/*.js')) 

Das gleiche mit dem CSS passieren sollte und es funktioniert gut.