我想调整gulpfile.js并将bower_components/
文件夹更改为app/bower_components/
。
我更新了.bowerrc
中的目录,所以现在每次我做bower install
它都会使用正确的目录:
{
"directory": "app/bower_components"
}
现在,gulp-wiredep
如何在我的主Sass文件中写出正确的Sass路径位置?
例如,gulp-wiredep
在我main.scss
文件中添加以下行,就在// 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"
,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'));
});
答案 0 :(得分:3)
您可以使用wiredep的directory
选项:
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'));
答案 1 :(得分:0)
替代wiredep您可以使用bindep(对于安装类型npm bindep或https://github.com/publicocean0/bindep)。它允许使用可选子模块,资源映射,文件转换(例如更少文件)和自定义预处理来创建复杂项目。 在html中你可以指定你想要的单个bower组件中的子模块,你可以过滤文件,预处理传递你的参数的文件...... 在配置中,您可以设置放置每种类型的资源,模板,转换器,本地依赖项等的位置....