Anscheinend aus heiterem Himmel, begann die Gulp -Verarbeitung, die ich für diese Seite eingerichtet hatte, einen Rennzustand. Ich würde meinen Beobachtungsbefehl ausführen, einige CSS ?ndern, und die Verarbeitung hinterlie? manchmal einige zus?tzliche Dateien, die w?hrend der Verarbeitung gereinigt werden sollten. Wie die Aufr?umarbeiten ereigneten sich, bevor die Dateien im Dateisystem gelandet sind (oder so ... ich bin nie wirklich auf den Grund gekommen).

Immer über die Besonderheiten dieses Fehlers. Ich dachte mir, ich würde es l?sen, indem ich Dinge für die Verwendung von Gulp 4.x anstelle von 3.x aufrüstete und Dinge im integrierten Befehl gulp.series ausführte, was ich für helfen würde (es tat es).

Gulp 4.x zu bekommen war für mich ein verdammter Reise, mit der ich ein Jahr lang aufgie?, dann den Kampf wieder entzündete und ihn letztendlich reparieren kann. Mein Problem war, dass Gulp 4 eine CLI -Version von 2.x ben?tigt, w?hrend Gulp 3 aus irgendeinem Grund eine 3.x -Version verwendet hat. Im Wesentlichen musste ich Versionen herabstufen , aber nachdem ich eine Milliarde Dinge dafür ausprobiert hatte, schien nichts zu funktionieren, als ob es eine Ghost -Version von CLI 3.x auf meiner Maschine gab.

Ich bin mir sicher, dass die Leute von Savvier Command Line dies schneller als ich vergr??ern k?nnen, aber es stellt sich heraus, dass der Befehlsbefehls-Gulp den Dateipfad enthüllt, an dem Gulp installiert ist, der enthüllt/usr/local/share/npm/bin/bin/gulp für mich und manuell von dort vor der Wiedereinstufung der letzten Version, die bei der Wiederherstellung von 2.2 Uhr gel?scht wurde.

Jetzt, da ich Gulp 4.x verwenden konnte, habe ich meine gulffile.js in kleinere Funktionen umschreibt, die jeweils in der Verantwortung isoliert sind. Ein Gro?teil davon ist ziemlich einzigartig für mein Setup auf dieser Seite, daher ist es nicht als Kesselplatte für die generische Verwendung gedacht. Ich ver?ffentlichen nur, weil es mir sicher hilfreich gewesen w?re, als ich es erstellt habe.

Dinge, die meine besondere Schluck tut

• Führen Sie einen Webserver (BrowserSync) für Style-Injektion und automatische Aufregung aus
• Führt einen Dateibeobachter (native Gulp -Funktion) aus, um die richtigen Aufgaben auf den richtigen Dateien auszuführen und die oben genannten Dinge zu erledigen
• CSS -Verarbeitung
  • SASS> Autoprefixer> Minify
  • Break Stylesheet -Cache aus den Vorlagen (zB
  • Setzen Sie Style.css an der richtigen Stelle für ein WordPress -Thema und reinigen Sie Dateien, die nur w?hrend der Verarbeitung ben?tigt werden
• JavaScript -Verarbeitung
  • Babel> verkettet> Minify
  • Browser -Cache für das <script> s brechen</script>
  • R?umen Sie nicht verwendete Dateien auf, die in der Verarbeitung erstellt wurden
• SVG -Verarbeitung
  • Machen Sie ein SVG Sprite (einen Block von s
  • Nennen Sie es als Sprite.php-Datei (so kann sie in eine Vorlage php eingeleitet werden) und setzen Sie sie an einen spezifischen Ort ein
• PHP -Verarbeitung
  • Aktualisieren Sie den AJAX-Aufruf im JavaScript auf Cache-Bust, wenn sich die Anzeigen ?ndern

Code Dump!

 const gulp = erfordern ("gulp"),
  browsersync = required ("browsersync"). create (),
  sass = erfordern ("Gulp-Sass"),
  postcss = required ("gulp-postcss"),
  autoprefixer = required ("autoprefixer"),
  cssnano = fordert ("cssnano"),
  del = erfordern ("del"),
  babel = erfordern ("Gulp-Babel"),
  minify = fordert ("gulp-minify"),
  concat = fordert ("Gulp-Concat"),
  umbenennen = require ("gulp-rename"),
  ersetzen = erfordern ("Gulp-Replace"),
  svgsymbols = erfordern ("gulp-svg-symbols"),
  svgmin = required ("gulp-svgmin");

const paths = {
  Stile: {
    src: ["./scss/*.scss", "./art- direction/*.scss"],
    Ziel: "./css/"
  },
  Skripte: {
    src: ["./js/*.js", "./js/libs/*.js", "! ./ JS/min/*. JS"],
    Ziel: "./js/min"
  },
  svg: {
    SRC: "./icons/*.svg"
  },
  Php: {
    SRC: ["./*.php", "./ads/*.php", "./art-direction/*.php", "./parts/**/*.php"]
  },
  Anzeigen: {
    SRC: "./ads/*.php"
  }
};

/ * Styles */
Funktionsdostylierungen (fertig) {
  return gulp.series (style, movemainstyle, deleteoldmainstyle, done => {
    CacheBust ("./ Header.php", "./");
    Erledigt();
  })(Erledigt);
}

Funktionsstil () {
  Gulp zurückgeben
    .src (paths.styles.src)
    .Pipe (Sass ())
    .on ("Fehler", sass.logerError)
    .pipe (postcss ([autoprefixer (), cssnano ()]))
    .pipe (gulp.dest (paths.styles.dest))
    .pipe (browsersync.stream ());
}

Funktion MovemainStyle () {
  return gulp.src ("./ CSS/style.css"). Pipe (gulp.dest ("./"));
}

Funktion DeleteoldMainstyle () {
  return del ("./ CSS/style.css");
}
/ * Endstile */

/ * Skripte */
Funktion Doscripts (Done) {
  Gulp.Series zurückgeben (
    PrecoessJs,
    Ecatjs,
    Minifyjs,
    deleteartifactjs,
    neu laden,
    fone => {
      CacheBust ("./ Teile/footer-scripts.php", "./parts/");
      Erledigt();
    }
  )(Erledigt);
}

Funktion precessjs () {
  Gulp zurückgeben
    .src (paths.scripts.src)
    .Rohr(
      Babel ({{
        Voreinstellungen: ["@babel/env"],
        Plugins: ["@Babel/Plugin-Proposal-Class-Properties"]
      })
    )
    .Pipe (gulp.dest ("./ JS/Babel/"));
}

Funktion concatjs () {
  Gulp zurückgeben
    .src ([
      "js/libs/jquery.lazy.js",
      "js/libs/jquery.fitvids.js",
      "js/libs/jQuery.Resizable.js",
      "js/libs/prism.js",
      "JS/Babel/Hervorhebung-fixes.js",
      "JS/Babel/Global.js"
    ]))
    .pipe (concat ("global-concat.js"))
    .pipe (gulp.dest ("./ JS/concat/"));
}

Funktion minifyjs () {
  Gulp zurückgeben
    .src (["./ JS/Babel/*. Js", "./js/concat/*.js"]))
    .Rohr(
      minify ({{
        ext: {
          src: ".js",
          min: ".min.js"
        }
      })
    )
    .pipe (gulp.dest (paths.scripts.dest));
}

Funktion Deleteartifactjs () {
  return del ([[
    "./js/babel",
    "./js/concat",
    "./js/min/*.js",
    "! ./ JS/min/*. min.js"
  ]);
}
/ * Endskripte *///

/ * Svg */
Funktion dosvg () {
  Gulp zurückgeben
    .src (paths.svg.src)
    .Pipe (svgmin ())
    .Rohr(
      svgsymbols ({{
        Vorlagen: ["Standard-SVG"],
        svgattrs: {
          Breite: 0,
          H?he: 0,
          Anzeige: "Keine"
        }
      })
    )
    .pipe (umbenennen ("icons/Sprite/icons.php"))
    .Pipe (gulp.dest ("./"));
}
/ * Ende SVG *//

/ * Generische Dinge */
Funktion cacheBust (SRC, dest) {
  var cbstring = new Date (). GetTime ();
  Gulp zurückgeben
    .src (SRC)
    .Rohr(
      ersetzen ( /cache_bust = \ d /g, function () {
        return "cache_bust =" cbstring;
      })
    )
    .pipe (gulp.dest (dest));
}

Funktion Reload (Done) {
  browsersync.reload ();
  Erledigt();
}

Funktion watch () {
  browsersync.init ({{
    Proxy: "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/");
    Erledigt();
  });
}

gulp.task ("Standard", Watch);

Probleme / Fragen

• Der schlimmste Teil ist, dass es den Cache nicht sehr intelligent bricht. Wenn sich CSS ?ndert, wird der Cache auf allen Stylesheets unterbrochen, nicht nur die relevanten.
• Ich würde wahrscheinlich nur SVG -Symbole mit PHP include () s in der Zukunft anstatt mit Spriting zu tun.
• Der SVG -Prozessor bricht, wenn die ursprünglichen SVGs Breite und H?henattribute haben, was falsch erscheint.
• W?re Schlupfver?nderung ein Geschwindigkeitsschub? Wie in sehen Sie sich nur Dateien an, die sich anstelle aller Dateien ge?ndert haben? Oder ist es nicht mehr notwendig?
• Sollte ich Gulp auf gulpFile.js ?nderungen neu starten?
• Sicher w?re sch?n, wenn alle Libs, die ich verwendet habe, ES6-kompatibel w?ren, damit ich Sachen importieren k?nnte, anstatt manuell verkettet zu müssen.

Immer so viel mehr, was getan werden kann. Im Idealfall würde ich diese ganze Seite nur offen ge?ffnet, ich bin nur noch nicht dorthin gekommen.

Das obige ist der detaillierte Inhalt vonIch teile nur meine Schluckfile. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!