Gulp,Wiredep和Bower依赖
我想调整一个gulpfile.js并将我的bower_components/
文件夹更改为app/bower_components/
。
我更新.bowerrc
的目录,所以现在每次我做一个bower install
它将使用正确的一个:
{ "directory": "app/bower_components" }
现在, gulp-wiredep
如何在我的主Sass文件中写入正确的Sasspath位置?
例如, gulp-wiredep
在我的main.scss
文件中,在// bower: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
任务的一些configuration:
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')); });
但我不知道如何configuration,以做我所需要的,我找不到任何文件。
我知道,如果我手动将sass文件中的path更改为"app/bower_components/bootstrap-sass-official/assets/stylesheets/_bootstrap.scss"
,那么"app/bower_components/bootstrap-sass-official/assets/stylesheets/_bootstrap.scss"
gulp serve
将起作用,但只要我安装了一个bower组件会改变path到没有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的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'));
另外,请参阅他们的文档
而不是wiredep你可以使用bindep(安装typesnpm bindep或https://github.com/publicocean0/bindep )。 它允许创build具有可选子模块,资源映射,文件转换(例如较less文件)和自定义预处理的复杂项目。 在html中,你可以指定你想要的一个单独的组件里面的子模块,你可以过滤文件,预处理文件传递你的参数…在configuration中,你可以设置你想放置的资源,模板,转换器,本地依赖, ….