2016-06-25 55 views
1

我正在使用Gulp分别连接/缩小来自bower文件夹(使用main-bower-files)和src文件夹的所有JS/CSS文件。我使用一饮而尽的负载插件加载从的package.json以下依赖性(所有这些存在于node_modules):Gulp没有使用main-bower-files创建JS和CSS文件

"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" 
} 

这里是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']); 

咕嘟咕嘟不在控制台中提供任何错误,但是JS和CSS文件都没有被创建。

+0

'console.log(plugins.mainBowerFiles())'看看它是否返回空数组? – kaxi1993

+0

'plugins.mainBowerFiles()'正在按照预期返回文件路径数组。 –

回答

1

最终,这个问题缩小到gulp-filter没有返回任何文件。对于任何人谁试图类似的设置,我结束了使用mainBowerFiles过滤要达到相同的最终结果文件采取了略微备用路径:

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

嘿乍得,那么你怎么过滤其他文件呢?我尝试了你的方法,它为我工作,但它有点可怕 – moesphemie

1

我有相同的问题,原来的“大口 - 筛选器”是行不通的,因为这行:

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

它应该是以下几点:

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

同样应与CSS发生,它工作正常。