web-dev-qa-db-ja.com

Gulp-Injectが機能しない

テスト用の簡単なGulpビルドプロセスのセットアップがあります。ドキュメントを何度も読みましたが、Gulp-injectで必要なスクリプトをindex.htmlファイルに挿入できないようです。

私のGulpファイルは次のようになります。

gulp.task('inject1', function() {
   return gulp.src('app/index.html')
        .pipe(inject(gulp.src('./app/scripts/app.js', {read : false}))) // Not necessary to read the files (will speed up things), we're only after their paths
        .pipe(gulp.dest("dist"));
});

gulp.task('inject2', function() {
    return gulp.src('app/scripts/**/*.js', {read : false}) // Not necessary to read the files (will speed up things), we're only after their paths
        .pipe(inject("./app/index.html"))
        .pipe(gulp.dest("./dist"));
});

これは私のIndex.htmlの一部です：

<!-- inject:js -->

<!-- endinject-->

これらは両方とも、githubのドキュメントからコピーされています。

これらのタスクのいずれかを実行すると、コンソールに「開始済み」「注入」「終了済み」「注入」と表示されます。

私の./distフォルダーにIndex.htmlファイルが作成されますが、jsファイルは挿入されません。

Srcとinjectプロパティをさまざまな方法で入力してみましたが、うまくいきませんでした。私が間違っていることについて何か考えはありますか？

buildgulpgulp-inject
12
Mike Fisher

まず、endinjectタグに間違いがあります。

<!-- endinject-->

する必要があります

<!-- endinject -->

このプラグインは私や他の人にとってさまざまな設定でうまく機能しているので、問題はおそらくあなたの設定にあります。ストリーミングを使用している場合、どのファイルをパイプでつなぐかわからないため、常にプラグインを使用して、どのファイルをパイプでつなぐかを正確に確認してください。 gulp-using の使用をお勧めします。これを試して、セットアップをデバッグしてください。

var debug = require('gulp-debug');

gulp.task('inject2', function() {
return gulp.src('app/scripts/**/*.js', {read : false})
    .pipe(debug())
    .pipe(inject("./app/index.html"))
    .pipe(gulp.dest("./dist"));
});

また、同じ方法を使用して、htmlファイルにも一致することを確認してください。それ以外は、正しいパスで適切なファイルを取得するためのパイピングを理解するまでは、試行錯誤です。

gulp-injectがファイルを挿入していない場合は、ファイルが正しくパイプされていないか、ターゲットのinjectが正しくないことを意味します。プラグインは機能し、私にとってはうまく機能します。

例workinggulpファイルを見る必要がある場合は、これをチェックしてください this gulpfile.js Gist

10
Gilad Peleg

次のコードでも同じ問題が発生しました。

    var injectSrc = gulp.src(['./public/css/*.css', '.public/js/*.js'], {read: false});
var injectOptions = {
    ignorePath: '/public'   
};
var options = {
    bowerJson: require('./bower.json'),
    directory: './public/lib',
    ignorePath: '../../public'
}

gulp.task('inject', function() {
    return gulp.src('./src/views/*.html')
            .pipe(debug())
            .pipe(wiredep(options))
            .pipe(debug())
            .pipe(inject(injectSrc, injectOptions))
            .pipe(debug())
            .pipe(gulp.dest('./src/views'));

});

私のindex.htmlには次のものがありました。

<!--bower:css-->
<!--endbower-->
<!--bower:js-->
<!--endbower-->
<!--inject:css-->
<!--endinject-->
<!--inject:js-->
<!--endinject-->

このリンクをクリックして、私のファイル構造を確認してください。 インジェクトはcssファイルを正しく作成していましたが、jsファイルは作成していませんでした。また、バウアーの依存関係は問題なく機能していました。

最後に、gulp.src（）に渡された配列で欠落している「/」を見つけました。それを修正した後：

var injectSrc = gulp.src(['./public/css/*.css', './public/js/*.js'], {read: false});

正しく動作します。

1
sxm1972