Зависимости 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 вы хотите, вы можете фильтровать файлы, предварительно обрабатывать файлы, передающие ваши параметры... В конфигурации вы можете установить, где вы хотите поместить каждый тип ресурсов,шаблонов,преобразователей, локальных зависимостей,....