css - 使用 wiredep 注入(inject)自定义 CSS

Question

每次由 gulp-less 编译后创建自定义 CSS 文件时，我都需要注入(inject)它们。所以我尝试将 wiredep 与自定义配置一起使用，但没有成功。我将标签从“bower:css”更改为“custom:css”，特别是我的自定义任务。默认 wiredep 注入(inject)的 bower:css 仍然存在。但是在运行 myinjection 任务后，即使没有错误地运行任务，也不会注入(inject)任何东西。另一件奇怪的事情是，当我运行我的任务时，wiredep(默认)注入(inject)的文件消失了。我缺少什么？

基本上我的文件结构是这样的:

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

我不确定我是否真的需要类似于 bower.json 的文件，但我制作了 may own 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

我有一个类似的问题，我用 gulp-inject 解决了 而不是 wiredep。当我需要包含第三方依赖项(例如，带有在 bower.json 中声明的有效主文件或与目录同名的文件的 bower 包)时，Wiredep 可以正常工作。然而，当你只想包含一个特定的文件时(例如，只有 html5-boilerplate 的 main.css)gulp-inject 要简单得多。这是文档的摘录:

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'));
});