wordpress 使用less 樣式沒法及時刷新

wordpress 樣式沒法及時刷新

wordpress編寫style樣式時，沒法及時刷新頁面，所以特地記錄一番如何處理較好，網友的建議清除Chrome緩存，實時修改style攜帶的參數

折騰之旅開啓

• 緩存

  因爲緩存問題，會致使瀏覽器再也不去請求css，而是直接拿緩存裏的，於是只須要讓瀏覽器一直覺得是新的文件便可，添加後綴時間戳無疑是最好的

  // wordpress version 5.04
  **functions.php**
  wp_enqueue_style( 'twentynineteen-style', get_stylesheet_uri(), array(), wp_get_theme()->get( 'Version' ));
  <!-- 修改成 -->
  /**
   * strtotime('2019-04-15') 能夠改成 time() 可是那樣每次請求都會從新更新，如果到了正式環境，其實只要第一次請求最新，後期都用緩存就好，於是建議使用 strtotime
   */
  wp_enqueue_style( 'twentynineteen-style', get_stylesheet_uri(), array(), strtotime('2019-04-15'));

• WP Super Cache 緩存插件

有時候安裝了該插件，致使大部分都緩存了，於是須要刪除緩存就能夠了

• 清除瀏覽器緩存

使用上述問題都沒有解決個人問題，才發現個人更本不是這類問題

issue less

因爲使用的是拿官方文檔進行修改的，於是不少都是本身寫的樣式，因爲style.css是惟一的，只有一個css,都是把其餘樣式進行合併在一塊兒，這樣能夠減小請求，於是在使用less進行編寫時就出了一個很意外的問題

code

style.less

// normalize
@import './less/normalize.less';

// reset
@import './less/reset.less';

// globel
@import './less/globel.less';

// index
@import './less/index.less';
....

大體就是這樣的，而我修改的是期中一個文件globel.less，每次更新都沒有，及時在頁面中顯示想要的樣式，才發現原來是用了less的緣故.在使用less時，因爲又引入其餘less文件，致使在style.less沒法監聽其餘less文件是否修改，於是如今思考如何在less文件進行修改時，style.less也進行修改就能夠了

• 參考的資料
  • watch api
  • gulp
  • 問題與我相同
  • gulp的使用
  • gulp 報錯處理
  • @import
  • less import
  • less-watch-compiler

探索之旅

前先後後整理了多種思路，堅持許久終於有告終果，雖然不是心中最好的，但好歹這條路通了，仍是能夠的

實現的大體三種方式

• nodemon 來監聽文件執行系統命令
• gulp 利用對應的插件進行操做
• less-watch-compiler less的一個插件（這個真是無意插柳柳成蔭，卻成了解決當前 問題的關鍵）

nodemon code

利用 node 的 child_process 來執行系統命令，同時利用 nodemon 來監聽文件變化

code

index.js

// 
const exec = require('child_process').exec
const path = require('path')

// const cmd = 'node_modules/less/bin/lessc less/style.less style.css'
// const cmd = `${path.join(__dirname + 'node_modules\//less\/bin\/lessc')} ${path.join(__dirname + 'less\/style.less')} style.css`
const cmd = 'start.sh'
exec(cmd, (err, stdout, stderr) => {
  console.log(err)
})

nodemon.json

...
"watch": ["less", "index.js"], // 須要監聽的文件
...

start.sh

node_modules/less/bin/lessc less/style.less style.css

老是哪裏缺點，由於至關於監聽多個了。index.js 和 less變化，各自行動，沒法在 less變化，同時執行index.js ，改配置

nodemon.json
...
 "events": {
    "start": "start.sh",
    "restart": "start.sh"
  },

依舊沒法生效，老是沒法進行關聯，先放棄了

• 注意
  • window沒法直接經過運行命令，須要週轉一下 說明

gulp

原本是想利用gulp-less-changed這個插件來進行處理，可花費最長的時間，卻並無什麼用

code

const gulp = require('gulp');

const lessChanged = require('gulp-less-changed');
const less = require('gulp-less');

const autoprefixer = require('gulp-autoprefixer')
const watchPath = require('gulp-watch-path')
const gutil = require('gulp-util')
// 避免錯誤時中止
const combiner = require('stream-combiner2')

const handleError = function (err) {
  const colors = gutil.colors;
  console.log('\n')
  gutil.log(colors.red('Error!'))
  gutil.log('fileName: ' + colors.red(err.fileName))
  gutil.log('lineNumber: ' + colors.red(err.lineNumber))
  gutil.log('message: ' + err.message)
  gutil.log('plugin: ' + colors.yellow(err.plugin))
}

gulp.task('lesscss', () => {
  const combined = combiner.obj([
    gulp.src('less/*.less'),
    lessChanged(),
    autoprefixer({
      browsers: 'last 2 versions'
    }),
    less(),
    gulp.dest('less/')
  ])
  combined.on('error', handleError)
})

gulp.task('wathcless', () => {
  const watcher = gulp.watch('less/*.less', event => {
    const paths = watchPath(event, 'less/', 'less/')
    gutil.log(gutil.colors.green(event.type) + ' ' + paths.srcPath)
    gutil.log('Dist' + paths.distPath)
    const combined = combiner.obj([
      gulp.src(paths.srcPath),
      lessChanged(),
      autoprefixer({
        browsers: 'last 2 versions'
      }),
      less(),
      gulp.dest(paths.distDir)
    ])
    combined.on('error', handleError)
  })
  watcher.on('change', event => {
    console.log('file' + event.path + 'was' + event.type)
    if (event.type === 'changed') {
      gulp.src(['less/style.less'])
      .pipe(lessChanged())
      .pipe(less())
      .pipe(gulp.dest('dist/style.css'))
    }
  })
})
// 執行多個任務
gulp.task('default', ['lesscss', 'wathcless'])

less某個文件變了，卻並無引發其餘引入文件的變化，又得放棄，無奈的狠啊

less-watch-compiler

這個使用起來至關簡單，有點相似nodemon，只是別人已經用不一樣的解決了上述的問題

package.json

"scripts": {
    "dev": "less-watch-compiler src dist style.less"
  },

執行命令

npm run dev // 能夠一直監聽改變

同時利用 vscode autoprefixer 就能夠解決兼容問題，以及文件變化，從新進行編譯，而我也在wordpress中測試成功了，算是暫時解決了吧

總結

• 耗費好長時間纔算解決，仍是要多瞭解挺好的
• window的命令執行確實有弊端，有點hold不住了
• gulp雖然有點日薄西山，可是確實有其獨到之處，學起來比webpack快多了，想一想webpack一臉...
• 後期還得想一想 gulp這個解決方案，避免有人作出來了，只是沒有找到了而已