Ich teile nur meine Schluckfile

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!