私のgulpfileを共有するだけです

一見青から一見、私がこのサイトのために設定した膨らみの処理は、人種状態になり始めました。 Watchコマンドを実行し、CSSを変更します。処理により、処理中にクリーンアップすることを意図した追加のファイルが残ります。ファイルがファイルシステムに配置される前にクリーンアップタスクが発生したように（または何か...私は実際にその底にたどり着くことはありませんでした）。

そのバグの詳細について決して気にしないでください。 3.xの代わりにGulp 4.xを使用するようにアップグレードし、組み込みのGulp.Seriesコマンドで物事を実行することで、それを解決しようとしました。

Gulp 4.xを取得することは、私にとっての旅のことであり、 1年間あきらめ、闘争を再燃させ、最終的にそれを修正することを伴いました。私の問題は、Gulp 4には2.xのCLIバージョンが必要であり、Gulp 3は何らかの理由で3.xバージョンを使用したことです。基本的にバージョンをダウングレードする必要がありましたが、それを行うために10億のことを試みた後、私のマシンにCLI 3.xのゴーストバージョンがあったように、何も機能しないように見えました。

Savvier Command-lineの人々は私よりも速くこれを逃れることができたと確信していますが、Command -V Gulpを実行していることがわかります。

Gulp 4.xを使用できるようになったので、gulpfile.jsをより小さな関数に書き直しました。これの多くは、このサイトでの私のセットアップにかなりユニークなので、一般的な使用法のためのボイラープレートになることを意図したものではありません。私はそれを作成していたときに私が参照するのに役立つだろうから、私はただ公開しています。

私の特定のgulpfileがしていること

• スタイルインジェクションと自動再洗浄のためにWebサーバー（browsersync）を実行します
• 適切なファイルで適切なタスクを実行し、上記のことを実行するために、ファイルウォッチャー（ネイティブGulp機能）を実行します
• CSS処理
  • sass> autoprefixer> minify
  • テンプレートからスタイルシートキャッシュを破壊します（eg
  • WordPressテーマに適した場所にstyle.cssを適切な場所に置き、処理中にのみ必要なファイルをクリーンアップします
• JavaScript処理
  • Babel> concatenate> Minify
  • <script> sのブラウザキャッシュを破壊します</script>
  • 処理で作成された未使用ファイルをクリーンアップします
• SVG処理
  • SVGスプライトを作成します（ sのブロック
  • sprite.phpファイル（テンプレートにphp-cludedを含むことができる）として名前を付けて、どこかに具体的に配置します
• PHP処理
  • 広告が変更されたときにJavaScriptのAJAXコールをキャッシュバストに更新します

コードダンプ！

 const gulp = require（ "gulp"）、
  browsersync = require（ "browser-sync"）。create（）、
  sass = require（ "gulp-sass"）、
  postcss = require（ "gulp-postcss"）、
  autoprefixer = require（ "autoprefixer"）、
  cssnano = require（ "cssnano"）、
  del = require（ "del"）、
  babel = require（ "gulp-babel"）、
  minify = require（ "gulp-minify"）、
  concat = require（ "gulp-concat"）、
  rename = require（ "gulp-rename"）、
  交換= require（ "gulp-replace"）、
  svgsymbols = require（ "gulp-svg-symbols"）、
  svgmin = require（ "gulp-svgmin"）;

const paths = {
  スタイル：{
    src：["./scs/*.scss"、 "./art-direction/*.scss"]、
    dest： "./css/"
  }、
  スクリプト：{
    src：["./js/*.js"、 "./js/libs/*.js"、 "！./ js/min/*。js"]、
    dest： "./js/min"
  }、
  SVG：{
    src： "./icons/*.svg"
  }、
  php：{
    src：["./* .php"、 "./ads/*.php"、 "./art-direction/*.php"、 "./parts/**/*.php"]]
  }、
  広告：{
    src： "./ads/*.php"
  }
};

/ * styles */
関数dostyles（done）{
  return gulp.series（style、movemainstyle、deleteoldmainstyle、done => {
    cachebust（ "./ header.php"、 "./"）;
    終わり（）;
  }）（終わり）;
}

function style（）{
  Gulpを返します
    .src（paths.styles.src）
    .pipe（sass（））
    .on（ "error"、sass.logerror）
    .pipe（postcss（[autoprefixer（）、cssnano（）]））
    .pipe（gulp.dest（paths.styles.dest））
    .pipe（browsersync.stream（））;
}

関数movemainStyle（）{
  return gulp.src（ "./ css/style.css"）。pipe（gulp.dest（ "./"））;
}

関数DeleteOldMainStyle（）{
  return del（ "./ css/style.css"）;
}
/ *スタイルの終了 */

/ *スクリプト */
関数doscripts（done）{
  gulp.seriesを返します（
    preprocessjs、
    concatjs、
    minifyjs、
    deleteartifactjs、
    リロード、
    done => {
      cachebust（ "./ parts/footer-scripts.php"、 "./parts/"）;
      終わり（）;
    }
  ）（終わり）;
}

関数preprocessjs（）{
  Gulpを返します
    .src（paths.scripts.src）
    。パイプ（
      バベル（{
        プリセット：["@babel/env"]、
        プラグイン：["@babel/plugin-proposal-class-properties"]]
      }）
    ））
    .pipe（gulp.dest（ "./ js/babel/"））;
}

関数concatjs（）{
  Gulpを返します
    .src（[
      「JS/libs/jquery.lazy.js」、
      「JS/libs/jquery.fitvids.js」、
      「JS/libs/jquery.resizable.js」、
      「JS/LIBS/PRISM.JS」、
      「JS/Babel/Highlighting-fixes.js」、
      「JS/Babel/Global.js」
    ]））
    .pipe（concat（ "global-concat.js"））
    .pipe（gulp.dest（ "./ js/concat/"））;
}

function minifyjs（）{
  Gulpを返します
    .src（["./ js/babel/*。js"、 "./js/concat/*.js"]））
    。パイプ（
      マイニー（{
        ext：{
          src： ".js"、
          min： ".min.js"
        }
      }）
    ））
    .pipe（gulp.dest（paths.scripts.dest））;
}

関数deleteartifactjs（）{
  delを返します（[
    「./js/babel」、
    「./js/concat」、
    "./js/min/*.js"、
    「！./ js/min/*。min.js」
  ]）;
}
/ *スクリプトを終了 */

/ * svg */
function dosvg（）{
  Gulpを返します
    .src（paths.svg.src）
    .pipe（svgmin（））
    。パイプ（
      svgsymbols（{
        テンプレート：["default-svg"]、
        svgattrs：{
          幅：0、
          高さ：0、
          ディスプレイ：「なし」
        }
      }）
    ））
    .pipe（rename（ "icons/sprite/icons.php"））
    .pipe（gulp.dest（ "./"））;
}
/ * svgを終了 */

/ *一般的なもの */
関数cachebust（src、dest）{
  var cbstring = new date（）。getTime（）;
  Gulpを返します
    .src（src）
    。パイプ（
      交換（ /cache_bust = \ d /g、function（）{
        "cache_bust =" cbstringを返します。
      }）
    ））
    .pipe（gulp.dest（dest））;
}

function reload（done）{
  browsersync.reload（）;
  終わり（）;
}

functionwatch（）{
  browsersync.init（{
    プロキシ：「csstricks.local」
  }）;
  gulp.watch（paths.styles.src、dostyles）;
  gulp.watch（paths.scripts.src、doscripts）;
  gulp.watch（paths.svg.src、dosvg）;
  gulp.watch（paths.php.src、reload）;
  gulp.watch（paths.ads.src、done => {
    cachebust（ "./ js/global.js"、 "./js/"）;
    終わり（）;
  }）;
}

gulp.task（ "default"、watch）;

問題 /質問

• 最悪の部分は、キャッシュをあまりインテリジェントに壊さないことです。 CSSが変更されると、関連するものだけでなく、すべてのスタイルシートでキャッシュが破損します。
• 私はおそらく、スプリングに対処するのではなく、将来の（）sを含むSVGアイコンをインラインにするだけでしょう。
• SVGプロセッサは、元のSVGに幅と高さの属性がある場合に破損しますが、これは間違っているようです。
• Gulp-changedはスピードブーストでしょうか？同様に、すべてのファイルの代わりに変更されたファイルのみを見ていますか？それとももう必要ではありませんか？
• gulpfile.jsの変更でgulpを再起動する必要がありますか？
• 私が使用したすべてのLIBがES6互換性がある場合、手動で連結する必要があるのではなく、物をインポートできる場合は確かにいいでしょう。

常にできることはもっとたくさんあります。理想的には、このサイト全体をオープンソースするだけです。まだそこに着いていません。

以上が私のgulpfileを共有するだけですの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。