32

私は次のことに苦労しています：

私の gulpfile.js は、すべての .less をコンパイルし、縮小して、すべての CSS を ./dist/all.min.css に連結します。

HTML ファイルを書き直し、すべてのスタイル タグを削除して、縮小された CSS をロードするスタイル タグを 1 つだけ挿入する方法はありますか?

4

3 に答える 3

49

これを処理する最善の方法は、最初から HTML インジェクターの 1 つを使用することです。gulp-injectこれまでのところ、ある程度の成功を収めています。

プロジェクトにgulp-injectを追加します。

npm i --save-dev gulp-inject

次のようなフォルダ レイアウトがあるとします。

  • 建てる/
  • ソース/
    • index.html
    • 以下/
      • メインレス
    • js/
      • app.js

HTML には、CSS または JS ファイルを挿入する場所 (両方のヘッド、または CSS のヘッドと JS ファイルのボディの直前) を含める必要があります。

<!-- inject:css -->
<!-- any *.css files among your sources will go here as: <link rel="stylesheet" href="FILE"> -->
<!-- endinject -->

<!-- inject:js -->
<!-- any *.js files among your sources will go here as: <script src="FILE"></script> -->
<!-- endinject -->

次に、gulpfile は次のようになります。

gulp.task('build-styles', function() {
    // the return is important!
    return gulp.src('src/less/main.less')
            .pipe(less())
            .pipe(gulp.dest('build'));
});


gulp.task('build-js', function() {
    // the return is important if you want proper dependencies!
    return gulp.src('src/js/**/*.js')
            // lint, process, whatever
            .pipe(gulp.dest('build'));
});

gulp.task('build-html', function() {
    // We src all files under build
    return gulp.src('build/**/*.*')
            // and inject them into the HTML
            .pipe(inject('src/index.html', {
                        addRootSlash: false,  // ensures proper relative paths
                        ignorePath: '/build/' // ensures proper relative paths
                    }))
            .pipe(gulp.dest('build'));
});

gulp.task('build', ['build-styles', 'build-js'], function(cb) {
    gulp.run('build-html', cb);
});

gulp.task('default', ['build'], function() {
    gulp.watch('src/**/*.less', function() {
        gulp.run('build-styles');
    });
    gulp.watch(['build/**/*.*','!build/index.html', 'src/index.html'], function() {
        gulp.run('build-html');
    });
});

gulp-watchこれは単なる大まかなアイデアであり、インクリメンタル ビルドを使用してさらに多くのことができますが、ここで重要なのは、ビルドディレクトリを監視して HTML ファイルをいつ再構築するかを選択し、srcディレクトリを監視して他のすべてのことを確認することです。

ノート：

これには多くの賛成票が寄せられているため、 以外にも参照置換を行うプラグインがいくつかありますgulp-inject。それらを見て、特に使用していない場合は、それらのいずれかがより適しているかどうかを確認することをお勧めしますgulp-rev。

同様のことを行う 2 つの CDN ライブラリもありますが、CDN リソース用です。

于 2014-01-21T04:26:21.970 に答える
4

ビルド中に書き直したいですか？ソース コード内のすべての CSS リンクを all.min.css への単一のリンクに置き換えてみませんか? とにかく、gulp-replaceプラグインを使用して、ビルド中にファイル内の文字列を検索および置換できます。これは、見てみる別のサンプルプロジェクトです。

Web アプリ ボイラープレート- LESSスタイル シートとGulp.jsビルド システム拡張された HTML5 ボイラープレート フロントエンド Web アプリケーション テンプレート

于 2014-01-12T16:30:45.983 に答える