Question

我需要在每次编译后通过gulp-less编译自定义CSS文件。所以我尝试使用带有自定义配置的wiredep，但没有成功。我将标签从'bower：css'更改为'custom：css'，特别是我的自定义任务。 bower：默认的wiredep注入的css仍然存在。但是在运行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

我遇到了类似的问题，我使用 gulp-inject 而不是 wiredep 解决了这个问题。当我需要包含第三方依赖项（例如bower.json中声明的有效主文件或与目录同名的文件的bower包）时，Wiredep可以正常工作。但是，如果您只想包含一个特定文件（例如只包含html5-boilerplate的main.css），那么 gulp-inject 就会简单得多。以下是doc的摘录：

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

使用wiredep注入自定义CSS

1 个答案: