成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

webpack構(gòu)建下?lián)Q膚功能的思路

sushi / 3028人閱讀

摘要:最近項目中要實(shí)現(xiàn)一個換膚的功能,大體想了下,記錄一下思路要實(shí)現(xiàn)換膚功能,目標(biāo)就是打包生成多份皮膚文件,需要哪個就用哪個打包生成多份皮膚文件因?yàn)轫椖渴鞘褂脴?gòu)建的,要想生成多份文件,就要在入口中配置多個入口文件,每個入口文件會提取出一個文件中整

source

最近項目中要實(shí)現(xiàn)一個換膚的功能,大體想了下,記錄一下思路

要實(shí)現(xiàn)換膚功能,目標(biāo)就是打包生成多份皮膚文件,需要哪個就用哪個

打包生成多份皮膚文件

因?yàn)轫椖渴鞘褂脀ebpack構(gòu)建的,要想生成多份css文件,就要在入口中配置多個入口文件,每個入口文件會提取出一個css文件

config.entry={
    app: ["./src/app.js"],
    defaultTheme: ["./src/theme.default.color.js"],
    orangeTheme:["./src/theme.orange.color.js"],
    blueTheme:["./src/theme.blue.color.js"],
}

app.js中

 import "./app.styl" //整個項目的樣式,在各種皮膚下都保持不變的那部分

theme.blue.color.js 藍(lán)色皮膚js文件

import "./theme/blue.styl" 

blue.styl 藍(lán)色皮膚

@require "./css/skinTheme/var.blue" //樣式變量,整體為藍(lán)色風(fēng)格的顏色值
@require "./css/skinTheme/theme.color" //提取出來的需要換膚的那部分樣式

如代碼所示,幾個主題js文件中只是單純的引入了相應(yīng)的皮膚樣式文件,這樣,webpack打包后就會生成幾個無用的js文件和一系列皮膚樣式文件

到這一步,就得到了需要的皮膚文件,但是需要注意的是,webpack會將生成的js、css路徑插入到模板html中,所以,我們打開構(gòu)建后生成index.html會看到


    
        
        
        
        
    
    
        
        
        
        
    
操作index.html

接下來就需要操作打包后的index.html,將多余的js引用刪掉,將皮膚路徑提取出來,然后將皮膚引用刪掉

也就是要改成這樣的文件

/build/index.html


    
        
        
    
    
        
    

可以寫這樣一個操作文件的函數(shù)

cssExtract.js

const DISTPATH = "build/index.html"
const cheerio = require("cheerio")
const fs = require("fs")
const chalk = require("chalk")
const prefix = ["defaultTheme", "orangeTheme", "blueTheme"]
const cssUrls = {}

function extractCss() {
    fs.readFile(DISTPATH, "utf8", (err, data) => {
        if (err) {
            throw err
        }
        const $ = cheerio.load(data)
        /**
         * 刪除所有主題css,相關(guān)鏈接保存在window.cssUrls中
         */
        $("link").each((index, item) => {
            const href = $(item).attr("href")
            for (const val of prefix) {
                if (href.indexOf(val) !== -1) {
                    cssUrls[val] = href
                    $(item).remove()
                }
            }
        })
        /**
         * 刪除無用的js
         */
        $("script").each((index, item) => {
            const src = $(item).attr("src")
            for (const val of prefix) {
                if (src && src.indexOf(val) !== -1) {
                    $(item).remove()
                }
            }
        })
 
        //插入行內(nèi)js
        $("base").after(``)

        fs.writeFile(DISTPATH, $.html(), err => {
            if (err) {
                throw err
            }
            console.log(chalk.cyan("extract css url complete.
"))
        })
    })
}
extractCss()
最后

到這里,運(yùn)行 webpack && node cssExtract.js,index.html就變成上面期望的那樣,我們得要了皮膚文件的一個mapping,并保存在window.cssUrls中,接下來,通過切換按鈕的方式切換皮膚還是什么其他的就可以自由發(fā)揮了.

需要說明的是,換膚功能的重點(diǎn)是對樣式的重構(gòu),將需要換膚的所有樣式提取到一起,通過變量來設(shè)置不同的主題

文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址:http://systransis.cn/yun/90018.html

相關(guān)文章

  • webpack構(gòu)建換膚功能思路

    摘要:最近項目中要實(shí)現(xiàn)一個換膚的功能,大體想了下,記錄一下思路要實(shí)現(xiàn)換膚功能,目標(biāo)就是打包生成多份皮膚文件,需要哪個就用哪個打包生成多份皮膚文件因?yàn)轫椖渴鞘褂脴?gòu)建的,要想生成多份文件,就要在入口中配置多個入口文件,每個入口文件會提取出一個文件中整 source 最近項目中要實(shí)現(xiàn)一個換膚的功能,大體想了下,記錄一下思路 要實(shí)現(xiàn)換膚功能,目標(biāo)就是打包生成多份皮膚文件,需要哪個就用哪個 打包生成多...

    Andrman 評論0 收藏0
  • webpack構(gòu)建換膚功能思路

    摘要:最近項目中要實(shí)現(xiàn)一個換膚的功能,大體想了下,記錄一下思路要實(shí)現(xiàn)換膚功能,目標(biāo)就是打包生成多份皮膚文件,需要哪個就用哪個打包生成多份皮膚文件因?yàn)轫椖渴鞘褂脴?gòu)建的,要想生成多份文件,就要在入口中配置多個入口文件,每個入口文件會提取出一個文件中整 source 最近項目中要實(shí)現(xiàn)一個換膚的功能,大體想了下,記錄一下思路 要實(shí)現(xiàn)換膚功能,目標(biāo)就是打包生成多份皮膚文件,需要哪個就用哪個 打包生成多...

    Alan 評論0 收藏0
  • 手摸手,帶你用vue擼后臺 系列三(實(shí)戰(zhàn)篇)

    摘要:社區(qū)的認(rèn)可目前已經(jīng)是相關(guān)最多的開源項目了,體現(xiàn)出了社區(qū)對其的認(rèn)可。監(jiān)聽事件手動維護(hù)列表這樣我們就簡單的完成了拖拽排序。 完整項目地址:vue-element-admin 系類文章一:手摸手,帶你用vue擼后臺 系列一(基礎(chǔ)篇)系類文章二:手摸手,帶你用vue擼后臺 系列二(登錄權(quán)限篇)系類文章三:手摸手,帶你用vue擼后臺 系列三(實(shí)戰(zhàn)篇)系類文章四:手摸手,帶你用vue擼后臺 系列...

    Channe 評論0 收藏0
  • 手摸手,帶你用vue擼后臺 系列三(實(shí)戰(zhàn)篇)

    摘要:社區(qū)的認(rèn)可目前已經(jīng)是相關(guān)最多的開源項目了,體現(xiàn)出了社區(qū)對其的認(rèn)可。監(jiān)聽事件手動維護(hù)列表這樣我們就簡單的完成了拖拽排序。 完整項目地址:vue-element-admin 系類文章一:手摸手,帶你用vue擼后臺 系列一(基礎(chǔ)篇)系類文章二:手摸手,帶你用vue擼后臺 系列二(登錄權(quán)限篇)系類文章三:手摸手,帶你用vue擼后臺 系列三(實(shí)戰(zhàn)篇)系類文章四:手摸手,帶你用vue擼后臺 系列...

    zgbgx 評論0 收藏0
  • vue+iview+less 實(shí)現(xiàn)換膚功能

    摘要:項目搭建用的,框架選擇的首先安裝支持然后去文件夾下的文件中,添加對的支持準(zhǔn)備工作做好了,開始換膚新建一個文件夾,在里面新建一個文件定義一個方法,寫上需要的顏色參數(shù)如圖文件夾下再新建一個存放各類主題的文件,里面根據(jù)自己需求定義各類主題 項目搭建用的vue—cli,css框架選擇的iview1、首先安裝less支持 npm install --save-dev less-loader le...

    LancerComet 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<