Question

我试图使用main bower files获取我的凉亭组件中的所有文件，并使用gulp-filter按类型过滤它们。当我过滤掉像这样的js文件时，它工作正常：

gulp.task('bower_js', function() {
  var jsFilter = gulpFilter('**/*.js');
  gulp.src(mainBowerFiles(), {base: './bower_components'})
    .pipe(jsFilter)
    .pipe(concat('vendor.js'))
    .pipe(gulp.dest('./_public/js'));
});

然而，为了更少的事情而执行类似的任务并不起作用（即没有任何事情通过过滤器）：

gulp.task('bower_css', function() {
  var lessFilter = gulpFilter('**/*.less');
  gulp.src(mainBowerFiles(), {base: './bower_components'})    
    .pipe(lessFilter)
     // .pipe(less()) commented to narrow down the problem
    .pipe(concat('app.css'))
    .pipe(gulp.dest('./_public/css'));
});

虽然如果我在没有任何过滤器的情况下运行mainBowerFiles，它会将.less个文件内容转储到我的目标文件夹中。

给出一个具体的例子..这是我的一个凉亭包的bower.json的相关部分：bootstrap：

  "main": [
    "less/bootstrap.less",
    "dist/css/bootstrap.css",
    "dist/js/bootstrap.js",
    "dist/fonts/glyphicons-halflings-regular.eot",
    "dist/fonts/glyphicons-halflings-regular.svg",
    "dist/fonts/glyphicons-halflings-regular.ttf",
    "dist/fonts/glyphicons-halflings-regular.woff"
  ],

bootstrap.less依次导入其他文件：

// Core variables and mixins
@import "variables.less";
@import "mixins.less";

// Reset and dependencies
@import "normalize.less";
@import "print.less";
..

等等。

任何想法？

Answer 1

我一直在尝试为SASS工作，但没有运气。直到我发现main-bower-files现在内置了filter option。它是一个正则表达式。尝试这样的事情，而不是使用gulp-filter：

gulp.task('bower_css', function() {
  var lessRegEx = (/.*\.less$/i);
  gulp.src(mainBowerFiles({filter: lessRegEx}), {base: './bower_components'})    
     // .pipe(less()) commented to narrow down the problem
    .pipe(concat('app.css'))
    .pipe(gulp.dest('./_public/css'));
});

Answer 2

遇到与fonts文件夹相同的问题，主要的bower文件（2.11.0）和gulp-filter（v3.0.1）的奇怪组合。 gulp-filter中的Issue #53看起来类似，解决方案选择为basedir选项。

main-bower-files + gulp-filter = not working

gulp.src(mainBowerFiles())
    .pipe(gulpFilter('**/fonts/*'))
    .pipe(gulp.dest('./demo/assets/fonts'));

main-bower-files + basedir + gulp-filter = working

gulp.src(mainBowerFiles(), {base: './'})
    .pipe(gulpFilter('**/fonts/*'))
    .pipe(gulp.dest('./demo/assets/fonts'));

使用filter = working

的main-bower文件

gulp.src(mainBowerFiles('**/fonts/*'))
    .pipe(gulp.dest('./demo/assets/fonts'));

简单的gulp.src + gulp-filter =工作

gulp.src('bower_components/**')
    .pipe(gulpFilter('**/fonts/*'))
    .pipe(gulp.dest('./demo/assets/fonts'));

为什么不是gulp-filter过滤掉我的凉亭包中较少的文件

2 个答案: