Grunt-injector 忽略来自 bower 依赖的 css 文件

Posted

技术标签:

【中文标题】Grunt-injector 忽略来自 bower 依赖的 css 文件【英文标题】:Grunt-injector ignore css file from bower dependency 【发布时间】:2015-06-16 10:27:27 【问题描述】:

我在一个新项目中使用 grunt-injector。它设置为将所有 bower 依赖项添加到 index.html 文件中。

我的依赖项中有离子,我只将它用于 javascript 文件而不是 css。所以我希望 grunt-injector 不要在我的项目中添加离子 css 文件。

这是我的配置:

injector: 
  options: 
    addRootSlash: false,
    ignorePath: 'app/',
    bowerPrefix: 'bower',
  ,
  bowerDependencies: 
    files: 
     'app/index.html': ['bower.json'],
  

我可以通过修改 ionic/bower.json 来做到这一点:

"main": [
  //"css/ionic.css",
  "fonts/*",
  "js/ionic.js",
  "js/ionic-angular.js"
]

当然,我不想那样做

【问题讨论】:

【参考方案1】:

可能会有所帮助,但我发现 gulp-injector 只是在编译 <!-- bower:css --> ... <!-- endbower --> 之间的所有 CSS 文件

另一个任务是负责读取我的bower文件并编辑index.html,它是wiredep plugin。

因此,如果您像我一样使用了已经准备好的脚手架,请查找此任务(此处为 gulp):

gulp.task('wiredep', function() 
    log('Wiring the bower dependencies into the html');

    var wiredep = require('wiredep').stream;
    var index = paths.client + 'index.html';

    return gulp.src(index)
        .pipe(wiredep(
            directory: './bower_components/',
            bowerJson: require('./bower.json'),
            exclude: ['bower_components/foundation/css/foundation.css',
                        'bower_components/toastr/toastr.css'],
            ignorePath: '../..' // bower files will be relative to the root
        ))
        .pipe(gulp.dest(paths.client));
);

通过定义排除,您将强制它忽略此类文件,而不在凉亭中编辑您的包:D

【讨论】:

以上是关于Grunt-injector 忽略来自 bower 依赖的 css 文件的主要内容,如果未能解决你的问题,请参考以下文章

Mac安装Bower

如何使用 bower_components 中已安装的软件包更新 bower.json

Bower 使用

如何更改 Bower 的默认组件文件夹?

是否可以将 yarn 视为替代 bower 和 npm 的可行选择?

卸载使用不同版本的 npm 安装的 bower