使用wiredep注入自定义CSS

Question

我需要注入自定义CSS文件，每次创建后，被编译后，吞咽-少。因此，我尝试使用wiredep的自定义配置，但没有成功。我将标签从“bower:css”更改为“定制:css”，具体到我的自定义任务。bower:css用于默认的wiredep注入仍然存在。但是在运行myinjection任务之后，即使没有错误地运行任务，也不会注入任何内容。另一件奇怪的事情是，当我运行我的任务时，由wiredep (默认)注入的文件会消失。我错过了什么？

我的文件结构是这样的：

|---app 
    |---styles
        |---***
        *.css
    *.html
    .custom.json

我不确定我是否真的需要一个类似于bower.json的文件，但我自己创建了custom.json

{
  "name": "custom",
  "version": "0.0.1",
  "main": [
    "app/styles/**/*.css",
    "app/scripts/**/*.js //pretend to inject custom js later
  ]
}

gulpfile.js中的任务如下：

    gulp.task('myinject', function () {
    var myinject = require('wiredep').stream;

    var combined = Combine (
        gulp.src('app/*.html'),
        myinject({
            directory: 'app',
            bowerJson: require('./custom.json'),
            dependencies: false,
            html: 
            {
              block: /(([ \t]*)<!--\s*custom:*(\S*)\s*-->)(\n|\r|.)*?(<!--\s*endcustom\s*-->)/gi,
              detect: {
                js: /<script.*src=['"](.+)['"]>/gi,
                css: /<link.*href=['"](.+)['"]/gi
              },
              replace: {
                js: '<script src="{{filePath}}"></script>',
                css: '<link rel="stylesheet" href="{{filePath}}" />'
              }
            }
        }),
        gulp.dest('app')
    );
    combined.on('error', function(err) {
        console.warn(err.message);
    });

    return combined;
});

提前感谢

Answer 1

我有一个类似的问题，我解决了与大口注射，而不是有线。当我需要包含第三方依赖项时，Wiredep对我很好(例如，具有在bower.json中声明的有效主文件的bower包或与目录同名的文件)。然而，当您只想包含一个特定的文件(例如，只有html5 5的main.css -样板)，吞咽注入要简单得多。以下是该文档的摘录：

gulp.task('index', function () {
  var target = gulp.src('./src/index.html');
  var sources = gulp.src(['./src/**/*.js', './src/**/*.css'], {read: false});

   return target.pipe(inject(sources))
    .pipe(gulp.dest('./src'));
});