2020-4-22 seo達(dá)人
微信小程序的wxss
、阿里旗下淘寶、支付寶小程序的acss
等等語法很類似原生css,但是在web開發(fā)里用慣了動態(tài)css語言,再寫回原生css很不習(xí)慣,尤其是父子樣式的嵌套寫法非常繁瑣。
因此,我希望能有一個自動化構(gòu)建方案,能夠簡單地將scss轉(zhuǎn)換成小程序的樣式語言。
以前寫微信小程序的依賴庫時用過,使用gulp編譯,將源碼和編譯后的代碼分別放到src和dist兩個目錄。gulp會處理src下面的所有文件,將其中的scss轉(zhuǎn)換成css,并將其他所有文件原封不動挪到dist下相應(yīng)位置。
這里就不詳細(xì)說了,代碼參考Wux。
非常簡單直接,使用Webstorm
/IDEA
的File Watchers
功能實(shí)時轉(zhuǎn)換。
確保命令行輸入sass -v
能出現(xiàn)版本號,安裝過程略。
File Watchers
到插件市場上搜索并安裝(已安裝則跳過)
現(xiàn)在安裝完插件打開項(xiàng)目會自動彈出scss轉(zhuǎn)css的向?qū)?,方便了很多。但還需要做一些修改,配置如下:
首先要將生成文件的后綴名改掉,比如這里我的淘寶小程序就得是acss
。
其次,將Arguments改為:
$FileName$:$FileNameWithoutExtension$.acss --no-cache --sourcemap=none --default-encoding utf-8 --style expanded
如果不加--no-cache
,scss文件同目錄下會出現(xiàn)一個.sass-cache
目錄。
如果不加--sourcemap=none
, scss文件同目錄下會出現(xiàn)一個.map
文件。
如果不加--default-encoding utf-8
, scss文件如果有中文注釋轉(zhuǎn)換就會報錯。
style
可不加,這里用的是無縮進(jìn)和壓縮的風(fēng)格,反正小程序打包發(fā)布時還會壓,這里保持可讀性。
現(xiàn)在這個scss轉(zhuǎn)換是單獨(dú)作用于項(xiàng)目的,如果新建一個小程序項(xiàng)目,就需要重新添加(不建議設(shè)置成global,容易誤傷)。
注意到File Watchers
列表的右側(cè)操作欄下方有導(dǎo)入導(dǎo)出按鈕,可以將現(xiàn)在配好的設(shè)置導(dǎo)出保存,將來新建項(xiàng)目時只要導(dǎo)入一下就行了。
之后還有一個問題,如果我手動將編譯后的css(即wxss
或者acss
,下略)文件刪除,scss文件不改動的話,就不會重新編譯出css文件。
或者萬一監(jiān)聽失效或者不夠及時,css還有可能是舊的。
所以還需要一個命令,用來將整個目錄下的scss文件統(tǒng)一轉(zhuǎn)換,確保沒有遺漏和保持代碼。
不過我看了半天sass
和sass-convert
的文檔,沒有找到一個可用的寫法,能讓命令行遍歷指定目錄下的所有scss文件,將其轉(zhuǎn)換成css放到源文件所在目錄,并且將后綴名改為wxss
或者acss
。
所以遍歷這個行為只能交給nodejs來實(shí)現(xiàn),代碼如下:
創(chuàng)建編譯腳本build/scss-convert.js
:
var path = require("path") var fs = require("fs") const { exec } = require('child_process') const basePath = path.resolve(__dirname, '../') function mapDir(dir, callback, finish) {
fs.readdir(dir, function(err, files) { if (err) { console.error(err) return }
files.forEach((filename, index) => { let pathname = path.join(dir, filename)
fs.stat(pathname, (err, stats) => { // 讀取文件信息 if (err) { console.log('獲取文件stats失敗') return } if (stats.isDirectory()) {
mapDir(pathname, callback, finish)
} else if (stats.isFile()) { if (!['.scss'].includes(path.extname(pathname))) { return }
callback(pathname)
}
}) if (index === files.length - 1) {
finish && finish()
}
})
})
}
mapDir(
basePath, function (file) { const newFileWithoutExt = path.basename(file, '.scss') if (newFileWithoutExt.startsWith('_')) { return // 按照scss規(guī)則,下劃線開頭的文件不會生成css } // exec可以讓nodejs執(zhí)行外部命令 exec(`sass --no-cache --sourcemap=none --default-encoding utf-8 --style expanded ${file}:${newFileWithoutExt}.acss`, { cwd: path.dirname(file) // 不寫這個會導(dǎo)致生成的文件出現(xiàn)在根目錄 }, (err, stdout, stderr) => { if (err) { console.log(err) return } console.log(`stdout: ${stdout}`)
})
}, function() { // console.log('xxx文件目錄遍歷完了') }
)
在package.json
里添加一條script:
"scripts": { "scss": "node build/scss-convert",
},
藍(lán)藍(lán)設(shè)計的小編 http://m.sillybuy.com