wordpress 使用less 樣式無法及時重新整理

wordpress編寫style樣式時，無法及時重新整理頁面，因此特意記錄一番如何處理較好，網友的建議清除chrome快取，實時修改style攜帶的引數

有時候安裝了該外掛程式，導致大部分都快取了，因而需要刪除快取就可以了

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

由於使用的是拿官方文件進行修改的，因而很多都是自己寫的樣式，由於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也進行修改就可以了

前前後後整理了多種思路，堅持許久終於有了結果，雖然不是心中最好的，但好歹這條路通了，還是可以的

實現的大致三種方式

利用 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 = `$ $ style.css`
const cmd = 'start.sh'
exec(cmd, (err, stdout, stderr) => )

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": ,

依舊無法生效，總是無法進行關聯，先放棄了

本來是想利用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) 
gulp.task('lesscss', () => ),
less(),
gulp.dest('less/')
])combined.on('error', handleerror)
})gulp.task('wathcless', () => ),
less(),
gulp.dest(paths.distdir)
])combined.on('error', handleerror)
})watcher.on('change', event => 
})})// 執行多個任務
gulp.task('default', ['lesscss', 'wathcless'])

less某個檔案變了，卻並沒有引起其他引入檔案的變化，又得放棄，無奈的狠啊

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

package.json

"scripts": ,

執行命令

npm run dev // 可以一直監聽改變

同時利用vscode autoprefixer就可以解決相容問題，以及檔案變化，重新進行編譯，而我也在wordpress中測試成功了，算是暫時解決了吧

wordpress 使用less 樣式無法及時重新整理

less使用有感

less使用小結

Less 使用小結

wordpress 使用less 樣式無法及時重新整理

less使用有感

less使用小結

Less 使用小結

相關推薦