web-dev-qa-db-ja.com

gulp-minified CSSを使用するようにHTMLを書き換える方法はありますか

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

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

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

concatenationminifygulpgulp-less
31
dlaxar

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

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

npm i --save-dev gulp-inject

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

  • ビルド/
  • src /
    • index.html
    • もっと少なく/
      • main.less
    • 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を使用するとさらに多くのことができますが、ここで重要なのはbuildHTMLファイルを再構築するタイミングを選択するディレクトリ。srcディレクトリでその他すべてを監視します。

注意：

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

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

49
OverZealous

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

Webアプリの定型文- [〜＃〜] less [ 〜＃〜] スタイルシートおよび Gulp.js ビルドシステム。

4
Konstantin Tarkus

gulp-smoosher も参照してください。例：

index.html

<html>
    <head>
        <!-- smoosh -->
        <link rel='stylesheet' href='styles.css'>
        <!-- endsmoosh -->
    </head>

styles.css

body {
    background: red;
}

Gulpfile.js

gulp.task('default', function () {
    gulp.src('index.html')
        .pipe(smoosher())
        .pipe(gulp.dest('dist'));
});

dist/index.html

<html>
    <head>
        <style>body {
            background: red;
        }</style>
    </head>
0
Gabriel Florit