web-dev-qa-db-ja.com

gulp-userefが置換セクションのコメントで機能しないように見えるのはなぜですか？

Gulpパイプラインを構築しようとしています– index.htmlにCSSを挿入し（これは正常に機能します）、ソースindex.htmlから他のすべてのリンクを取得して、出力バージョンに置き換えます。

useref 呼び出しが出力ifをマングリングしていることに気付きました。置換するテンプレートセクションにはHTMLコメント（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で見やすくなりますが、COMMENT HTMLコメントはタグの最後の半分を失うため、コメントであると見なされた後はすべてです。

置換セクション内にコメントを入れたい理由は、コメントが実際には gulp-inject ステートメントであり、userefを実行する前に他の参照を挿入するためです。私はそれを単純なHTMLコメントに単純化して問題を引き起こしました。

これが問題の原因となる行です：.pipe($.useref())

参考までに私はフォローしています John PapaのPluralsightに関するコース 彼はこの正確なメカニズムを使用してCSSを挿入し、それらを置き換えます–（inject:cssHTMLコメント区切り文字はuserefの後にマングルされます）：

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

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

ありがとう。

javascriptgulpgulp-useref
35
Rodney

理由はバージョン変更チェックのドキュメントです https://www.npmjs.com/package/gulp-useref ここに例があります：

gulp.task（ 'optimize'、['templateCache'、 'images']、function（）{
 
 var templateCache = config.temp + config.templateCache.files; 
 
 return gulp 
。src（config.index）
 .pipe（$。plumber（））
 .pipe（$。inject（gulp.src（templateCache。 、{read：false}、{starttag： ''}）））
 .pipe（$。useref（{searchPath： './'}））
 .pipe（gulp.dest（ config.build））; 
}）;

それが役に立てば幸い

1
Pedro Lescano

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

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

0
Adam

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

<!-- 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 -->
0
Vince

コメントは削除されますが、例外があります。 IE条件付きコメントは保持されるため、そこでリクエストを行うか、プルリクエストを記述して、それが受け入れられるかどうかを確認できます。リポジトリは次のとおりです。

https://github.com/digisfera/useref

0
jonkemp