35

gulp パイプラインを構築しようとしています。CSS を挿入してindex.html(これは正常に動作します)、ソースから他のすべてのリンクを取得しindex.htmlて、出力されたバージョンでそれらを置き換えたいと考えています。

置換するテンプレート化されたセクションにHTML コメントが含まれている場合useref、呼び出しが出力をマングリングしていることに気付きました(以下の行の例を参照してください)。コードで示すのが最も簡単です:COMMENT

index.html（ソースファイル）

<!-- build:css styles/app.css-->
<!--COMMENT-->
<link rel="stylesheet" href="/.tmp/styles.css">
<!-- endbuild -->

gulpfile.js仕事

gulp.task('optimizeReplace', function () {
    var assets = $.useref.assets({ searchPath: './' });

    return gulp
        .src('./src/client/index.html')
        .pipe(assets)
        .pipe(assets.restore())
        .pipe($.useref())  //THIS IS THE PROBLEM LINE; IF INJECT IS NOT RUN FIRST IT IS MANGLED
        .pipe(gulp.dest('./wwwroot/'));
});

出力 ( index.html)

</style>
<link rel="stylesheet" href="styles/lib.css">
<link rel="stylesheet" href="styles/app.css-->" <!--COMMENT>
</head>

<body>
  <div>

問題は HTML の方が見やすいのですが、COMMENTHTML コメントはタグの末尾半分が失われているため、それ以降はすべてコメントと見なされます。

置換セクション内にコメントを入れたい理由は、そのコメントが実際にはgulp-injectステートメントであり、useref. 問題の原因となっている単純な HTML コメントに単純化しました。

これは問題を引き起こす行です:.pipe($.useref())

参考までに、 Pluralsightに関する John Papa のコースに従っています。彼はこの正確なメカニズムを使用して CSS を挿入し、それらを置き換えます – ( inject:cssHTML コメント区切り文字は の後に壊れていますuseref):

<!-- build:css styles/app.css-->
<!-- inject:css -->
<link rel="stylesheet" href="/.tmp/styles.css">
<!-- endinject -->
<!-- endbuild -->

useref()テンプレートを正しいリンクに置き換え、 HTML コメントはそのままにしておくにはどうすればよいですか?

ありがとう。

4

4 に答える 4

0

置換セクション内にコメントを入れたい理由は、コメントが実際には、use-ref を実行する前に他の参照を注入する gulp-inject ステートメントであるためです。

コメントの代わりに他のタグを使って同じことをしてもらえませんか? data-たとえば、現在コメント テキストに保存している値を含む属性セットを持つタグを使用できます。

于 2016-12-05T15:47:02.427 に答える
0

IE 条件付きコメントを保持する gulp-userref の代わりに node-userref を試すことができます

<!-- build:js scripts/combined.js   -->
<!--[if lt IE 9]>
<script type="text/javascript" src="scripts/this.js"></script>
<script type="text/javascript" src="scripts/that.js"></script>
<![endif]-->
<!-- endbuild -->

結果は

<!--[if lt IE 9]>
<script src="scripts/combined.js"></script>
<![endif]-->

または、次のようにビルド コードからコメントを外してみてください。

<!--COMMENT-->
<!-- build:css styles/app.css-->
<link rel="stylesheet" href="/.tmp/styles.css">
<!-- endbuild -->
于 2016-07-28T02:26:32.553 に答える