1

gulp-less でコンパイルされた後に作成されるたびに、カスタム CSS ファイルを挿入する必要があります。そのため、カスタム構成でwiredepを使用しようとしましたが、成功しませんでした. タグを「bower:css」から「custom:css」に、具体的にはカスタム タスクに変更しました。デフォルトのwiredepインジェクション用のbower:cssはまだ残っています。しかし、タスクを実行した後myinjection、エラーなしでタスクを実行しても何も注入されません。もう1つの奇妙なことは、タスクを実行すると、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ではなくwireepで解決した同様の問題がありました。Wiredep は、サードパーティの依存関係を含める必要がある場合にうまく機能します (例: bower.json で宣言された有効なメイン ファイルを含む bower パッケージ、またはディレクトリと同じ名前のファイル)。ただし、特定のファイル (例: 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 に答える