Seolah -olah keluar dari biru, pemprosesan Teluk yang saya buat untuk laman web ini mula mempunyai keadaan perlumbaan. Saya akan menjalankan perintah jam tangan saya, menukar beberapa CSS, dan pemprosesan kadang -kadang akan meninggalkan beberapa fail tambahan yang dimaksudkan untuk dibersihkan semasa pemprosesan. Seperti tugas pembersihan berlaku sebelum fail mendarat di dalam sistem fail (atau sesuatu ... Saya tidak pernah sampai ke bahagian bawahnya).

Nevermind tentang spesifikasi pepijat itu. Saya fikir saya akan menyelesaikannya dengan menaik taraf perkara untuk menggunakan Gulp 4.x dan bukannya 3.x, dan menjalankan perkara-perkara dalam perintah Gulp.Series terbina dalam, yang saya fikir akan membantu (ia dilakukan).

Mendapatkan Gulp 4.x pergi adalah satu perjalanan untuk saya, yang melibatkan saya menyerah selama setahun , kemudian menunaikan perjuangan dan akhirnya mendapatkannya tetap. Masalah saya ialah Gulp 4 memerlukan versi CLI 2.x manakala Gulp 3, atas sebab apa pun, menggunakan versi 3.x. Pada dasarnya saya perlu menurunkan versi, tetapi selepas mencuba satu bilion perkara untuk melakukan itu, tidak ada yang kelihatan berfungsi, seperti terdapat versi hantu CLI 3.x pada mesin saya.

Saya pasti orang-orang baris perintah yang lebih bijak dapat menghisapnya lebih cepat daripada saya, tetapi ternyata perintah berjalan -v Gulp akan mendedahkan laluan fail di mana Gulp dipasang yang diturunkan/usr/local/share/npm/bin/gulp untuk saya, dan memadamkannya secara manual dari sana sebelum memasukkan semula versi terakhir yang bekerja.

Sekarang saya boleh menggunakan Gulp 4.x, saya menulis semula gulpfile.js saya ke dalam fungsi yang lebih kecil, masing-masing cukup terpencil dalam tanggungjawab. Kebanyakan ini cukup unik untuk persediaan saya di laman web ini, jadi ia tidak dimaksudkan untuk menjadi beberapa boilerplate untuk penggunaan generik. Saya hanya menerbitkan kerana pastinya akan membantu saya untuk merujuk ketika saya menciptanya.

Perkara yang saya lakukan

• Menjalankan pelayan web (BrowserSync) untuk suntikan gaya dan auto-rfreshing
• Menjalankan pemerhati fail (ciri gulp asli) untuk menjalankan tugas yang betul pada fail yang betul dan melakukan perkara di atas
• Pemprosesan CSS
  • Sass> autoprefixer> minify
  • Cache Cache Stylesheet dari Templat (misalnya
  • Letakkan gaya.css di tempat yang betul untuk tema WordPress dan membersihkan fail hanya diperlukan semasa pemprosesan
• Pemprosesan JavaScript
  • Babel> concatenate> minify
  • Cache penyemak imbas untuk s
  • Bersihkan fail yang tidak digunakan yang dibuat dalam pemprosesan
• Pemprosesan SVG
  • Buat sprite svg (blok s
  • Namakannya sebagai fail sprite.php (jadi ia boleh dipasang php dalam templat) dan meletakkannya di tempat yang spesifik
• Pemprosesan PHP
  • Kemas kini Panggilan Ajax di JavaScript ke Cache-bust apabila iklan berubah

Kod Dump!

 const gulp = memerlukan ("gulp"),
  BrowserSync = memerlukan ("penyemak imbas-sync"). Buat (),
  sass = memerlukan ("gulp-sass"),
  postcss = memerlukan ("gulp-postcss"),
  AutoPrefixer = memerlukan ("AutoPrefixer"),
  cssnano = memerlukan ("cssnano"),
  del = memerlukan ("del"),
  Babel = memerlukan ("Gulp-Babel"),
  minify = memerlukan ("Gulp-Minify"),
  concat = memerlukan ("gulp-concat"),
  Namakan semula = Memerlukan ("Gulp-Praame"),
  menggantikan = memerlukan ("Gulp-Replace"),
  svgsymbols = memerlukan ("gulp-svg-simbol"),
  svgmin = memerlukan ("gulp-svgmin");

Const Paths = {
  Gaya: {
    src: ["./scss/*.scss", "./art-direction/*.scss"],
    Dest: "./css/"
  },
  Skrip: {
    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"]
  },
  Iklan: {
    SRC: "./ads/*.php"
  }
};

/ * Gaya */
fungsi dostyles (selesai) {
  Kembali Gulp.Series (Gaya, MoveMainStyle, DeleteoldMainStyle, Selesai => {
    cacheBust ("./ header.php", "./");
    dilakukan ();
  }) (selesai);
}

gaya fungsi () {
  kembali gulp
    .src (paths.styles.src)
    .pipe (sass ())
    .on ("ralat", sass.logerror)
    .pipe (postcss ([autoprefixer (), cssnano ()]))
    .pipe (gulp.dest (paths.styles.dest))
    .pipe (browserSync.stream ());
}

fungsi MoveMainStyle () {
  kembali gulp.src ("./ css/style.css"). Pipa (gulp.dest ("./"));
}

fungsi DeleteoldMainStyle () {
  kembali del ("./ css/style.css");
}
/ * Gaya akhir */

/ * Skrip */
fungsi doskrip (dilakukan) {
  kembali gulp.series (
    preprocessjs,
    concatjs,
    Minifyjs,
    deleteartifactjs,
    Muat semula,
    selesai => {
      cacheBust ("./ Bahagian/footer-scripts.php", "./parts/");
      dilakukan ();
    }
  ) (selesai);
}

fungsi preprocessjs () {
  kembali gulp
    .src (paths.scripts.src)
    .pipe (
      babel ({
        Pratetap: ["@babel/env"],
        Plugin: ["@babel/plugin-proposal-class-properties"]
      })
    )
    .pipe (gulp.dest ("./ js/babel/"));
}

fungsi concatjs () {
  kembali gulp
    .src ([
      "JS/libs/jQuery.lazy.js",
      "JS/libs/jQuery.fitvids.js",
      "JS/libs/jQuery.resizable.js",
      "JS/libs/prism.js",
      "js/babel/sorotan-fix.js",
      "JS/Babel/Global.js"
    ])
    .pipe (concat ("global-concat.js"))
    .pipe (gulp.dest ("./ js/concat/"));
}

fungsi minifyjs () {
  kembali gulp
    .src (["./ js/babel/*. js", "./js/concat/*.js"])
    .pipe (
      minify ({
        ext: {
          SRC: ".js",
          min: ".min.js"
        }
      })
    )
    .pipe (gulp.dest (paths.scripts.dest));
}

fungsi deleteartifactjs () {
  kembali del ([
    "./js/babel",
    "./js/concat",
    "./js/min/*.js",
    "! ./ js/min/*. min.js"
  ]);
}
/ * Skrip akhir */

/ * Svg */
fungsi dosvg () {
  kembali gulp
    .src (paths.svg.src)
    .pipe (svgmin ())
    .pipe (
      svgsymbols ({
        Templat: ["lalai-svg"],
        svgattrs: {
          Lebar: 0,
          Ketinggian: 0,
          Paparan: "Tiada"
        }
      })
    )
    .PIPE (Namakan semula ("Ikon/Sprite/Icons.php"))
    .pipe (gulp.dest ("./"));
}
/ * Akhir svg */

/ * Perkara generik */
fungsi cachebust (src, dest) {
  var cbstring = tarikh baru () gettime ();
  kembali gulp
    .SRC (SRC)
    .pipe (
      ganti ( /cache_bust = \ d /g, fungsi () {
        kembali "cache_bust =" cbstring;
      })
    )
    .pipe (gulp.dest (dest));
}

fungsi tambah nilai (dilakukan) {
  browserSync.reload ();
  dilakukan ();
}

fungsi menonton () {
  BrowserSync.init ({
    Proksi: "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, tambah nilai);
  gulp.watch (paths.ads.src, selesai => {
    cacheBust ("./ js/global.js", "./js/");
    dilakukan ();
  });
}

gulp.task ("lalai", menonton);

Masalah / soalan

• Bahagian yang paling teruk ialah ia tidak memecahkan cache dengan bijak. Apabila CSS berubah, ia memecahkan cache pada semua stylesheets, bukan hanya yang relevan.
• Saya mungkin hanya selaras ikon SVG dengan PHP termasuk () s pada masa akan datang dan bukannya berurusan dengan spriting.
• Pemproses SVG memecahkan jika SVG asal mempunyai atribut lebar dan ketinggian, yang nampaknya salah.
• Adakah berubah-ubah menjadi rangsangan kelajuan? Seperti dalam, hanya melihat fail yang telah berubah dan bukannya semua fail? Atau tidak perlu lagi?
• Sekiranya saya memulakan semula Gulp pada perubahan gulpfile.js?
• Pasti akan menjadi baik jika semua lib yang saya gunakan adalah bersesuaian ES6 supaya saya dapat mengimport barangan daripada harus bersekutu secara manual.

Sentiasa lebih banyak lagi yang boleh dilakukan. Sebaik-baiknya, saya hanya membuka sumber laman web ini, saya belum sampai di sana lagi.

Atas ialah kandungan terperinci Hanya berkongsi gulpfile saya. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!