1***@qq.com
1***@qq.com
  • 发布:2024-07-18 18:32
  • 更新:2024-07-18 22:11
  • 阅读:230

zui-svg-icon自动生成icon

分类:uni-app

做了个监听文件改动的webpack插件,监听 /assets/svg-icons 下的文件改动,自动执行 npm run svgicon

就不用每次新增icon都跑一遍脚本

文件一: 根目录下创建:build/icon-watcher.js

const fs = require('fs');  
const path = require('path');  
const {  
    exec  
} = require('child_process');  

let timer = null;  

const watchDir = path.resolve(__dirname, '../assets/svg-icons');  
const projectRoot = path.resolve(__dirname, '../');  

class IconWatcherPlugin {  
    apply(compiler) {  
        compiler.hooks.afterEmit.tap('IconWatcherPlugin', () => {  
            console.log('zui-svg-icon 开始监听/assets/svg-icons文件改动')  
            fs.watch(watchDir, {  
                recursive: true  
            }, (eventType, filename) => {  
                if (filename) {  

                    if (timer) {  
                        clearTimeout(timer);  
                    }  
                    timer = setTimeout(() => {  
                        console.log(`zui-svg-icon 改动类型: ${eventType}`);  
                        console.log(`zui-svg-icon 文件名: ${filename}`);  
                        exec('npm run svgicon', {  
                            cwd: projectRoot  
                        }, (error, stdout, stderr) => {  
                            if (error) {  
                                console.error(`zui-svg-icon  exec error: ${error}`);  
                                console.error(`zui-svg-icon  stderr: ${stderr}`);  
                                return;  
                            }  
                            console.log(`zui-svg-icon stdout: ${stdout}`);  
                        });  
                    }, 500)  
                }  
            });  

        });  
    }  
}  

module.exports = IconWatcherPlugin;

vue.config.js中引入

javascript  

const IconWatcherPlugin = require('./build/icon-watcher');  

module.exports = {  
        // ....   
    configureWebpack: {  
        plugins: [new IconWatcherPlugin()],  
    }  
}

package.json中配置脚本

json  

{  

    "scripts": {  
        "svgicon": "node ./uni_modules/zui-svg-icon/tools/generate-svg-icon.js"  
    }  
}
1 关注 分享
Gozi

要回复文章请先登录注册

Gozi

Gozi

太赞了!
2024-07-18 22:11