Gulp：テンプレートからHTMLを作成して挿入する

Question

私は、テンプレートから改訂されたソースを挿入してfile.html.tplというHTMLを作成しています。

だから私は、次のいcss.html.tplあります

<!-- common:css --> 
<!-- endinject --> 

<!-- vendor:css --> 
<!-- endinject --> 

<!-- custom:css --> 
<!-- endinject --> 

と.html.tplファイルの同期は、その後、.htmlをでテンプレートを作成することを読んで、この機能を使用します

exports.createHTMLfromTemplate = function (distDir, templateFileNames) { 
    for(var i = 0; i < templateFileNames.length; i++) { 
    var file = templateFileNames[i]; 
    var tplData = fs.readFileSync(path.join(__dirname, file)); 
    var distPath = path.join(distDir, file.slice(0, -4)); // remove .tpl 

    fs.writeFile(distPath, tplData, function (err) { 
     if (err) log(exports.error(err)); 
    }); 

    } 
}; 

し、我々はinjecするそれらのコメントと準備 .htmlファイルを持っている必要がありますtを実行すると、改訂されたファイルが挿入されます。

gulp.task('inject-js', function() { 
    var distPath = path.join(__dirname, paths.baseSrc) 
    helper.createHTMLfromTemplate(distPath, 'js.html.tpl') 
    var injected = gulp.src(distPath + 'js.html'); 

    _.each(jsTasks, function (task) { 
    var injector = task.filename.substr(0, task.filename.length - 3); 
    var gulpSrc = gulp.src(task.paths.dest + injector + '*.js', {read: false}); 
    injected 
     .pipe($gulp.inject(gulpSrc, {name: injector})) 
    }); 

    return injected 
    .pipe(gulp.dest(paths.baseSrc)) 
    .on('error', helper.handleError); 
}); 

js.htmlでの結果は以下の通りです：

<!-- common:css --> 
<link rel="stylesheet" href="/static/dist/common-fee68d20.css"> 
<!-- endinject --> 

<!-- vendor:css --> 
<link rel="stylesheet" href="/static/dist/vendor-7cd25cb9.css"> 
<!-- endinject --> 

<!-- custom:css --> 
<!-- endinject --> 

あなたが見ることができるように、私はベイグラント（VM）の内部で、この一口を実行した場合、それは、いくつかのコメントに注入しないであろうバガスの外で走っているとき、例えば局所麻を使用して、適切に注入する。

なぜですか？ :)

Answer 1

全開示：私は多分、我々はそれを絞り込むことができます

ベイグラントを使用していません。 gulp-inject与えられたグロブパス上の作品とは：

は、ソースファイルのストリームを受け取り、文字列に各ファイルを変換し、 は、ターゲットストリーム ファイル内のプレースホルダに変換された各文字列を挿入します。

注射が行われていない場合は、私が最初に注射する必要があるファイルが見つからないということです。

gulp-debugのようなものを使用して、実際に注入する必要があるファイルが実際にパイプストリームに入るかどうか試してみてください。

迷惑メール環境でローカルの開発環境と同じパスにマッピングするのではなく、ソース管理からファイルを取得している場合、動作するはずです。そうしないと、ビニールパスが正しいディレクトリに解決されないことがあります。

困惑部分は動作するが、部分的にしか作用しない部分である。パスの問題ではなく、revedファイルを使用している場合は、<!-- custom:css -->を生成するタスクが原因となる可能性があります。それはもっと理にかなっています。

注：グッ-噴射v4.0.0のように、NodeJSのV4以上が必要であるグッ、注入から

EDIT

---

音符。 ノードの古いバージョンのgulp-injectを使用するには、特定のバージョンをインストールします。npm install gulp-inject @ 3。

これは問題ではないと思われる理由はありませんが、あなたのローカルおよびVM環境でNodeバージョン番号をクロスチェックする場合にだけです。