我想调整gulpfile.js并将我的bower_components /文件夹更改为app / bower_components /.
我更新了.bowerrc中的目录,所以现在每次我做一个bower安装它将使用正确的:
{ "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服务将会起作用,但是一旦我安装了一个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')); });
解决方法
您可以使用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'));
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。