1

每次在 gulp-less 编译后创建自定义 CSS 文件时，我都需要注入它们。所以我尝试使用带有自定义配置的wiredep，但没有成功。我将标签从“bower:css”更改为“custom: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;
});

提前致谢

4

1 回答 1

2

我有一个类似的问题，我用gulp -inject而不是wiresep解决了。当我需要包含第三方依赖项（例如，在 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'));
});
于 2014-10-28T14:17:43.037 回答