只是分享我的墨西哥灣-css教學-PHP中文網

首頁

web前端

css教學

只是分享我的墨西哥灣

Jennifer Aniston

Apr 13, 2025 am 10:00 AM

只是分享我的墨西哥灣

我為這個網站設置的毛毛工程似乎是藍色的，開始有種族條件。我會運行手錶命令，更改一些CSS，並且處理有時會留下一些額外的文件，這些文件本來可以在處理過程中清理。就像清理任務發生在降落在文件系統中的文件之前（或者……我從來沒有真正到達底部）。

關於該錯誤的細節，沒關係。我認為我會通過升級物品使用Gulp 4.x而不是3.x並在內置Gulp.Series命令中運行物品來解決它，我認為這會有所幫助（確實如此）。

對我來說，吞噬4.x是一段旅程，涉及我放棄一年，然後重新點擊鬥爭並最終將其修復。我的麻煩是Gulp 4需要2.x的CLI版本，而Gulp 3出於何種原因使用3.x版本。從本質上講，我需要降級版本，但是在嘗試了十億件事做到這一點之後，似乎沒有什麼用，就像我的機器上有一個幽靈版CLI 3.x一樣。

我敢肯定，Savvier命令行的人本來可以比我更快地解決這個問題，但是事實證明，運行命令-v Gulp會揭示gulp安裝位置的文件路徑，該文件揭示了/usr/usr/local/local/share/npm/npm/npm/bin/gulp，並從那里手動刪除它，然後重新設置最後版本，以使我在最新的版本中獲得最新的版本，從而使我獲得了最新後退的2.x。

現在，我可以使用Gulp 4.x，我將Gulpfile.js重新歸為較小的功能，每個功能都相當孤立。這是我在此站點上的設置非常獨特的，因此，這並不是要成為通用用法的一些樣板。我只是出版，因為當我創建它時，它肯定對我有幫助。

我的特殊倉庫做的事情

運行Web服務器（browsersync）以進行樣式註入和自動恢復
運行一個文件觀察器（本機Gulp功能），用於在正確的文件上運行正確的任務並執行上述操作
CSS處理
- SASS>自動改裝器>縮小
- 從模板中折斷樣式表緩存（例如
- 將style.css放在WordPress主題的正確位置，並清理僅在處理過程中需要的文件
JavaScript處理
- babel>連接>縮小
- 打破<script> s的瀏覽器緩存</script>
- 清理處理中創建的未使用的文件
SVG處理
- 製作一個SVG Sprite（ s的塊
- 將其命名為sprite.php文件（因此可以在模板中包含php）並將其放置在特定的位置
PHP處理
- 當廣告更改時，將JavaScript中的Ajax調用更新為緩存障礙

代碼轉儲！

 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”），
  重命名= require（“ Gulp-rename”），
  替換= require（“ Gulp-Replace”），
  svgsymbols = require（“ gulp-svg-symbols”），
  svgmin = require（“ gulp-svgmin”）;

const路徑= {
  樣式：{
    src：[“ ./scs/do.scss”，“ ./art-direction/the.scss”]，
    dest：“ ./css/”
  }，，
  腳本：{
    src：[。
    dest：“ ./js/min”
  }，，
  SVG：{
    src：“ ./icons/* .svg”
  }，，
  PHP：{
    src：[。
  }，，
  廣告：{
    SRC：“ ./ads/* .php”
  }
};

/ *樣式 */
功能dostyles（完成）{
  返回Gulp.Series（樣式，MoveMainStyle，DeleteoldMainStyle，Done => {
    cachebust（“ ./ header.php”，“ ./”）;
    完畢（）;
  }）（完畢）;
}

功能樣式（）{
  返回Gulp
    .src（paths.Styles.src）
    .pipe（sass（））
    .on（“錯誤”，sass.logerror）
    。
    .pipe（gulp.dest（paths.styles.dest））
    .pipe（browsersync.stream（））;
}

函數movemainStyle（）{
  返回gulp.src（“ ./ css/style.css”）。管道（gulp.dest（“ ./”））;
}

函數deleteoldMainStyle（）{
  返回del（“ ./ css/style.css”）;
}
/ *結束樣式 */

/ *腳本 */
功能doscripts（完成）{
  返回海灣系列（
    預處理，
    concatjs，
    minifyjs，
    deleteartifactjs，
    重新加載，
    完成=> {
      cachebust（“ ./ parts/footer-scripts.php”，“ ./parts/”）;
      完畢（）;
    }
  ）（完畢）;
}

功能PrepRocessjs（）{
  返回Gulp
    .src（paths.scripts.src）
    。管道（
      babel（{
        預設：[“@@babel/env”]，
        插件：[“@babel/plugin-proposal-class-properties”]
      }））
    ）
    .pipe（gulp.dest（“ ./ js/babel/”））;
}

函數concatjs（）{
  返回Gulp
    .src（[
      “ JS/libs/jquery.lazy.js”，
      “ js/libs/jquery.fitvids.js”，
      “ JS/libs/jquery.resizable.js”，
      “ JS/libs/prism.js”，
      “ JS/babel/imhimighting-fixes.js”，
      “ JS/babel/global.js”
    ）））
    .pipe（Concat（“ Global-Concat.js”））
    .pipe（gulp.dest（“ ./ js/concat/”））;
}

功能minifyjs（）{
  返回Gulp
    .src（[[“ ./ js/babel/*。JS”，“。
    。管道（
      縮小（{
        分機：{
          SRC：“ .js”，
          最低：“ .min.js”
        }
      }））
    ）
    .pipe（gulp.dest（paths.scripts.dest））;
}

函數deleteartifactjs（）{
  返回del（[
    “ ./js/babel”，
    “ ./js/concat”，
    “ ./js/min/*.js”，
    “！./ js/min/*。最小
  ）;
}
/ *結束腳本 */

/ * SVG */
函數dosvg（）{
  返回Gulp
    .src（paths.svg.src）
    .pipe（svgmin（））
    。管道（
      svgsymbols（{
        模板：[“ default-svg”]，
        svgattrs：{
          寬度：0，
          身高：0，
          顯示：“無”
        }
      }））
    ）
    。
    .pipe（gulp.dest（“ ./”））;
}
/ *結束SVG */

/ *通用事物 */
函數cachebust（src，dest）{
  var cbString = new Date（）。 getTime（）;
  返回Gulp
    .SRC（SRC）
    。管道（
      替換（ /cache_bust = \ d /g，function（）{
        返回“ cache_bust =” cbString;
      }））
    ）
    .pipe（gulp.dest（dest））;
}

功能重新加載（完成）{
  browsersync.reload（）;
  完畢（）;
}

函數觀察（）{
  browsersync.init（{
    代理：“ 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/”）;
    完畢（）;
  }）;
}

gulp.task（“默認”，手錶）;