Je partage juste mon gulpfile

Apparemment à l'improviste, le traitement Gulp que j'avais mis en place pour ce site a commencé à avoir une condition de course. J'exécuterais ma commande de surveillance, je changerais certains CSS et le traitement laissait parfois des fichiers supplémentaires qui devaient être nettoyés pendant le traitement. Comme les tâches de nettoyage se sont produites avant que les fichiers n'atterrissent dans le système de fichiers (ou quelque chose… Je ne suis jamais vraiment arrivé au fond de celui-ci).

Peu importe les détails de ce bogue. J'ai pensé que je vais le résoudre en mettant à niveau les choses pour utiliser Gulp 4.x au lieu de 3.x, et en exécutant des choses dans la commande Gulp.Series intégrée, ce que je pensais aider (c'était le cas).

Obtenir Gulp 4.x Going a été un sacré voyage pour moi, m'impliquant d'abandonner pendant un an , puis raviver la lutte et finalement le faire réparer. Mon problème était que Gulp 4 nécessite une version CLI de 2.x tandis que Gulp 3, pour une raison quelconque, a utilisé une version 3.x. Essentiellement, j'avais besoin de rétrograder les versions, mais après avoir essayé un milliard de choses à faire, rien ne semblait fonctionner, comme s'il y avait une version fantôme de CLI 3.x sur ma machine.

Je suis sûr que les gens de la ligne de commande de Savvier auraient pu le faire couler plus rapidement que moi, mais il s'avère que l'exécution de la commande - V Gulp révélera le chemin du fichier de l'endroit où Gulp est installé qui a révélé / usr / local / share / npm / bin / gulp pour moi, et la supprimer manuellement.

Maintenant que je pouvais utiliser Gulp 4.x, j'ai réécrit mon gulpfile.js en fonctions plus petites, chacune assez isolée en responsabilité. Une grande partie de cela est assez unique à ma configuration sur ce site, donc ce n'est pas censé être un passe-partout pour l'utilisation générique. Je publie juste parce que cela aurait certainement été utile pour moi de faire référence au fur et à mesure que je la créais.

Choses que fait mon gulpfile particulier

• Exécute un serveur Web (Browsersync) pour l'injection de style et la refonte automatique
• Exécute un observateur de fichiers (fonctionnalité Gulp native) pour exécuter les bonnes tâches sur les bons fichiers et faire les choses ci-dessus
• Traitement CSS
  • Sass> Autoprefixer> minifant
  • Break Stylesheet Cache des modèles (par exemple
  • Mettre Style.css au bon endroit pour un thème WordPress et nettoyer les fichiers nécessaires uniquement pendant le traitement
• Traitement JavaScript
  • Babel> concaténate> minifant
  • Brisez le cache du navigateur pour le s
  • Nettoyez des fichiers inutilisés créés dans le traitement
• Traitement SVG
  • Faire un sprite SVG (un bloc de S
  • Nommez-le comme un fichier sprite.php (donc il peut être inclus PHP dans un modèle) et le mettre dans un endroit spécifique
• Traitement PHP
  • Mettez à jour l'appel Ajax dans le javascript pour cache-bust lorsque les annonces changent

Vidage de code!

 const gulp = require ("gulp"),
  BrowseSync = 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-contrat"),
  renom = require ("gulp-ramen"),
  remplacer = require ("gulp-replace"),
  svgSymbols = require ("gulp-svg-symbols"),,
  svgmin = require ("gulp-svgmin");

const paths = {
  Styles: {
    src: ["./scss/*.scss", "./art-direction/*.scss"],
    dest: "./css/"
  },
  scripts: {
    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"]
  },
  ADS: {
    src: "./ads/*.php"
  }
};

/ * Styles * /
fonction Dostyles (fait) {
  return gulp.series (style, moveMainstyle, DeleteoldMainstyle, Done => {
    cachebust ("./ header.php", "./");
    fait();
  })(fait);
}

Function Style () {
  Retour Gulp
    .src (chemins.styles.src)
    .Pipe (sass ())
    .on ("erreur", sass.logerror)
    .Pipe (PostCSS ([autoprefixer (), cssnano ()]))
    .Pipe (gulp.dest (chers.styles.dest))
    .Pipe (BrowSersync.Stream ());
}

fonction moveMainStyle () {
  return gulp.src ("./ css / style.css"). tuyau (gulp.dest ("./"));
}

fonction deleteoldmainstyle () {
  return del ("./ css / style.css");
}
/ * Styles finaux * /

/ * Scripts * /
fonction doscripts (fait) {
  Retour Gulp.Series (
    préprocessjs,
    concatjs,
    minifyjs,
    Deletearfactjs,
    recharger,
    fait => {
      Cachebust ("./ Parts / Footer-Scripts.php", "./parts/");
      fait();
    }
  )(fait);
}

fonction preprocessjs () {
  Retour Gulp
    .src (paths.scripts.src)
    .tuyau(
      babel ({
        Presets: ["@ babel / env"],
        Plugins: ["@ babel / plugin-proposal-class-properties"]]
      })
    )
    .Pipe (gulp.dest ("./ js / babel /"));
}

fonction concatjs () {
  Retour Gulp
    .src ([
      "js / libs / jquery.lazy.js",
      "js / libs / jquery.fitvides.js",
      "js / libs / jquery.resizable.js",
      "JS / Libs / Prism.js",
      "js / babel / halthing-fixes.js",
      "JS / Babel / Global.js"
    ])
    .Pipe (Concat ("Global-Concat.js"))
    .Pipe (gulp.dest ("./ js / concat /"));
}

fonction minifyjs () {
  Retour Gulp
    .src (["./ js / babel / *. js", "./js/concat/*.js"])
    .tuyau(
      minify ({
        ext: {
          src: ".js",
          min: ".min.js"
        }
      })
    )
    .Pipe (gulp.dest (paths.scripts.dest));
}

fonction deletearfactjs () {
  retourne del ([
    "./js/babel",
    "./js/concat",
    "./js/min/*.js",
    "! ./ JS / min / *. min.js"
  ]));
}
/ * Terminer les scripts * /

/ * Svg * /
fonction dosvg () {
  Retour Gulp
    .src (chers.svg.src)
    .Pipe (svgmin ())
    .tuyau(
      svgSymbols ({
        Modèles: ["Default-Svg"],
        svgattrs: {
          Largeur: 0,
          hauteur: 0,
          Affichage: "Aucun"
        }
      })
    )
    .Pipe (renommer ("icons / sprite / icons.php"))
    .Pipe (gulp.dest ("./"));
}
/ * End svg * /

/ * Des choses génériques * /
fonction cachebust (src, dest) {
  var cbstring = new Date (). getTime ();
  Retour Gulp
    .SRC (SRC)
    .tuyau(
      remplacer (/ cache_bust = \ d / g, function () {
        return "cache_bust =" cbstring;
      })
    )
    .Pipe (gulp.dest (dest));
}

Fonction Reload (Done) {
  Browsersync.Reload ();
  fait();
}

Function Watch () {
  Browsersync.Init ({
    Proxy: "csstricks.local"
  });
  gulp.watch (chemins.styles.src, dostyles);
  gulp.watch (paths.scripts.src, doscripts);
  gulp.watch (paths.svg.src, dosvg);
  gulp.watch (paths.php.src, rechargement);
  gulp.watch (paths.ads.src, fait => {
    cachebust ("./ js / global.js", "./js/");
    fait();
  });
}

gulp.task ("par défaut", montre);

Problèmes / questions

• Le pire, c'est qu'il ne casse pas très intelligemment le cache. Lorsque CSS change, il brise le cache sur tous les feuilles de style, pas seulement les pertinents.
• Je contenais probablement simplement des icônes SVG avec PHP incluent () S à l'avenir plutôt que de gérer le spring.
• Le processeur SVG se casse si les SVG d'origine ont des attributs de largeur et de hauteur, ce qui semble mal.
• Gulp a-t-il changé une augmentation de la vitesse? Comme dans, en regardant uniquement des fichiers qui ont changé au lieu de tous les fichiers? Ou n'est-ce pas nécessaire?
• Dois-je redémarrer Gulp sur Gulpfile.js change?
• Bien sûr, serait bien si toutes les LIB que j'ai utilisées étaient compatibles ES6 afin que je puisse importer des choses plutôt que d'avoir à concaténer manuellement.

Toujours beaucoup plus que cela peut être fait. Idéalement, je venais d'ouvrir sur tout ce site, je n'y suis pas encore arrivé.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!