Зависимости Gulp, Wiredep и Bower

я хочу адаптировать gulpfile.js и изменить мой до app/bower_components/.

я обновил каталог в .bowerrc, так что теперь каждый раз, когда я делаю bower install он будет использовать правильный вариант:

{
  "directory": "app/bower_components"
}

, как gulp-wiredep напишите правильное местоположение пути Sass внутри моего основного файла Sass?

например, gulp-wiredep добавляет следующую строку в my , сразу после // bower:scss:

@import "bower_components/bootstrap-sass-official/assets/stylesheets/_bootstrap.scss";

это сейчас должно быть @import "app/bower_components/bootstrap-sass-official/assets/stylesheets/_bootstrap.scss";

как я могу изменить этот путь? Я считаю, что это некоторая конфигурация на wiredep задачи:

gulp.task('wiredep', function () {
  var wiredep = require('wiredep').stream;

  gulp.src('app/styles/*.scss')
    .pipe(wiredep({
      ignorePath: /^(../)+/
    }))
    .pipe(gulp.dest('app/styles'));

  gulp.src('app/*.html')
    .pipe(wiredep({
      exclude: ['bootstrap-sass-official'],
      ignorePath: /^(../)*../
    }))
    .pipe(gulp.dest('app'));
});

но я не знаю, как я могу настроить это, чтобы сделать то, что мне нужно, я не мог найти никакой документации об этом.

я знаю, что если я изменю вручную этот путь в моем файле sass на "app/bower_components/bootstrap-sass-official/assets/stylesheets/_bootstrap.scss", the gulp serve будет работать, но как только я установлю компонент bower, он изменит этот путь на тот, который без app/ в начале еще раз и это сломает задачу.

как это исправить?

сделано:

// inject bower components
gulp.task('wiredep', function () {
  var wiredep = require('wiredep').stream;

  gulp.src('app/styles/*.scss')
    .pipe(wiredep({

      fileTypes: {
        scss: {
          replace: {
            sass: '@import "app/{{filePath}}";',
            scss: '@import "app/{{filePath}}";'
          }
        }
      },

      ignorePath: /^(../)+/
    }))
    .pipe(gulp.dest('app/styles'));

  gulp.src('app/*.html')
    .pipe(wiredep({
      exclude: ['bootstrap-sass-official'],
      ignorePath: /^(../)*../
    }))
    .pipe(gulp.dest('app'));
});

2 ответов


можно использовать directory опция wiredep:

  gulp.src('app/styles/*.scss')
    .pipe(wiredep({
      directory: 'app/bower_components',
      fileTypes: {
        scss: {
          replace: {
            scss: '@import "src/app/{{filePath}}";'
          }
        }
      },
      ignorePath: /^(\.\.\/)+/
    }));

gulp.src('app/*.html')
    .pipe(wiredep({
      directory: 'app/bower_components',
      exclude: ['bootstrap-sass-official'],
      ignorePath: /^(\.\.\/)*\.\./
    }))
    .pipe(gulp.dest('app'));

Также см. документация


вместо wiredep вы можете использовать bindep (для установки типа НПМ bindep или https://github.com/publicocean0/bindep). Это позволяет создавать сложные проекты с дополнительным подмодулей , сопоставления ресурсов, конвертирование файлов(например меньше файлов) и пользовательские обработки. В html вы можете указать, какие подмодули внутри одного компонента bower вы хотите, вы можете фильтровать файлы, предварительно обрабатывать файлы, передающие ваши параметры... В конфигурации вы можете установить, где вы хотите поместить каждый тип ресурсов,шаблонов,преобразователей, локальных зависимостей,....