Compartiendo mi Gulpfile | Programar Plus

0

Aparentemente, de la nada, el procesamiento de Gulp que había configurado para este sitio comenzó a tener una condición de carrera. Yo ejecutaría mi watch comando, cambiar algo de CSS, y el procesamiento a veces dejaría algunos archivos adicionales que debían limpiarse durante el procesamiento. Como las tareas de limpieza ocurrieron antes de que los archivos aterrizaran en el sistema de archivos (o algo … realmente nunca llegué al fondo).

No importa los detalles de ese error. Pensé que lo resolvería actualizando las cosas para usar Gulp 4.x en lugar de 3.xy ejecutando las cosas en el gulp.series comando, que pensé que ayudaría (lo hizo).

Poner en marcha Gulp 4.x fue un gran viaje para mí, que me implicó darme por vencido durante un año, luego reavivar la lucha y finalmente arreglarlo. Mi problema fue que Gulp 4 requiere una versión CLI de 2.x mientras que Gulp 3, por el motivo que sea, usó una versión 3.x. Básicamente, necesitaba degradar las versiones, pero después de intentar mil millones de cosas para hacerlo, nada parecía funcionar, como si hubiera una versión fantasma de CLI 3.x en mi máquina.

Estoy seguro de que la gente más inteligente en la línea de comandos podría haber descubierto esto más rápido que yo, pero resulta que se está ejecutando command -v gulp revelará la ruta del archivo donde está instalado Gulp que reveló /usr/local/share/npm/bin/gulp para mí, y eliminarlo manualmente desde allí antes de volver a instalar la última versión funcionó para volver a la 2.x.

Ahora que podía usar Gulp 4.x, reescribí mi gulpfile.js en funciones más pequeñas, cada una de ellas bastante aislada en responsabilidad. Mucho de esto es bastante único en mi configuración en este sitio, por lo que no está destinado a ser un modelo estándar para uso genérico. Solo estoy publicando porque ciertamente me hubiera sido útil hacer referencia mientras lo estaba creando.

Cosas que hace mi Gulpfile particular

  • Ejecuta un servidor web (Browsersync) para inyección de estilo y actualización automática
  • Ejecuta un observador de archivos (función nativa de Gulp) para ejecutar las tareas correctas en los archivos correctos y hacer las cosas anteriores
  • Procesamiento CSS
    • Sass> Autoprefixer> Minificar
    • Romper el caché de la hoja de estilo de las plantillas (p. Ej. <link href="https://css-tricks.com/just-sharing-my-gulpfile/style.css?BREAK_CACHE">
    • Coloque style.css en el lugar correcto para un tema de WordPress y limpie los archivos que solo son necesarios durante el procesamiento
  • Procesamiento de JavaScript
    • Babel> Concatenar> Minificar
    • Romper la caché del navegador para <script>s
    • Limpiar archivos no utilizados creados en procesamiento
  • Procesamiento SVG
    • Haz un sprite SVG (un bloque de <symbol>s
    • Nómbrelo como un archivo sprite.php (para que pueda incluirse en PHP en una plantilla) y colóquelo en algún lugar específico
  • Procesamiento PHP
    • Actualice la llamada de Ajax en JavaScript a cache-bust cuando cambien los anuncios

Volcado de código!

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"),
  replace = 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 */
function doStyles(done) {
  return gulp.series(style, moveMainStyle, deleteOldMainStyle, done => {
    cacheBust("./header.php", "./");
    done();
  })(done);
}

function style() {
  return gulp
    .src(paths.styles.src)
    .pipe(sass())
    .on("error", sass.logError)
    .pipe(postcss([autoprefixer(), cssnano()]))
    .pipe(gulp.dest(paths.styles.dest))
    .pipe(browserSync.stream());
}

function moveMainStyle() {
  return gulp.src("./css/style.css").pipe(gulp.dest("./"));
}

function deleteOldMainStyle() {
  return del("./css/style.css");
}
/* END STYLES */

/* SCRIPTS */
function doScripts(done) {
  return gulp.series(
    preprocessJs,
    concatJs,
    minifyJs,
    deleteArtifactJs,
    reload,
    done => {
      cacheBust("./parts/footer-scripts.php", "./parts/");
      done();
    }
  )(done);
}

function preprocessJs() {
  return gulp
    .src(paths.scripts.src)
    .pipe(
      babel({
        presets: ["@babel/env"],
        plugins: ["@babel/plugin-proposal-class-properties"]
      })
    )
    .pipe(gulp.dest("./js/babel/"));
}

function concatJs() {
  return 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() {
  return gulp
    .src(["./js/babel/*.js", "./js/concat/*.js"])
    .pipe(
      minify({
        ext: {
          src: ".js",
          min: ".min.js"
        }
      })
    )
    .pipe(gulp.dest(paths.scripts.dest));
}

function deleteArtifactJs() {
  return del([
    "./js/babel",
    "./js/concat",
    "./js/min/*.js",
    "!./js/min/*.min.js"
  ]);
}
/* END SCRIPTS */

/* SVG */
function doSvg() {
  return gulp
    .src(paths.svg.src)
    .pipe(svgmin())
    .pipe(
      svgSymbols({
        templates: ["default-svg"],
        svgAttrs: {
          width: 0,
          height: 0,
          display: "none"
        }
      })
    )
    .pipe(rename("icons/sprite/icons.php"))
    .pipe(gulp.dest("./"));
}
/* END SVG */

/* GENERIC THINGS */
function cacheBust(src, dest) {
  var cbString = new Date().getTime();
  return gulp
    .src(src)
    .pipe(
      replace(/cache_bust=d+/g, function() {
        return "cache_bust=" + cbString;
      })
    )
    .pipe(gulp.dest(dest));
}

function reload(done) {
  browserSync.reload();
  done();
}

function 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/");
    done();
  });
}

gulp.task("default", watch);

Problemas / Preguntas

  • La peor parte es que no rompe el caché de forma muy inteligente. Cuando CSS cambia, rompe la caché en todas las hojas de estilo, no solo en las relevantes.
  • Probablemente solo usaría íconos SVG en línea con PHP include()s en el futuro en lugar de lidiar con el espíritu.
  • El procesador SVG se rompe si los SVG originales se han width y height atributos, lo que parece incorrecto.
  • ¿Tragar-cambiado sería un aumento de velocidad? Como en, ¿solo mira los archivos que han cambiado en lugar de todos los archivos? ¿O ya no es necesario?
  • ¿Debería reiniciar gulp en los cambios de gulpfile.js?
  • Seguro que sería bueno si todas las bibliotecas que utilicé fueran compatibles con ES6 para poder import cosas en lugar de tener que concatenar manualmente.

Siempre se puede hacer mucho más. Idealmente, simplemente abriría el código abierto de todo este sitio, simplemente no he llegado allí todavía.

(Visited 5 times, 1 visits today)