关于electron:Superset如何快速创建看板CSS模板

在 superset0.3.6 的看板，在新增和编辑时，是能够间接增加 css 款式去管制整个看板页面任意元素的款式。或者在治理菜单 –css 模板增加相应 css 模板，而后编辑看板时间接抉择利用 css 模板。
这个性能的确是香，这能够实现不必批改一句源代码就将看板的格调、款式齐全扭转，比方如下这样：

但说实话，间接在看板的款式编辑弹窗里写款式，切实是太苦楚了，或者说这 ** 齐全承受不了呀！
痛点如下：

• 实时预览成果太差 – 须要先保留，而后试下成果，而后持续编辑看板，抉择编辑 CSS 模板，再接着写，如此往返；
• 没有代码提醒；
• 不能够应用 css 预处理语言；

这是简略分享，我是应用应用 gulp+electron 解决这些问题的。

我的项目初始化

mkdir theme_editor
cd theme_editor
npm init -y

应用 electron 加载页面注入 css

装置 electron, 下载 electron 会须要一点工夫，可尝试应用cnpm

npm install electron -D

根目录下增加 main.js

const {app, BrowserWindow} = require('electron')

// 创立 electron window 
function createWindow () {
  const win = new BrowserWindow({
    webPreferences: {
      // 开启开发工具，不便调试
      devTools: true
    }
  })
  // superset web 服务地址
  // 倡议应用生产地址，本地就能够不须要启动 superset 后端服务了
  const url = 'http://127.0.0.1:5000'
  // 这个是要插入 css 款式文件的页面门路
  // 并不需要所有页面都插入 css 款式
  // 所有的看板页面都插入 css 款式
  const insertCssPath = new RegExp('/superset/dashboard/')
  // 如果是在本地 superset 的服务
  // 可间接把 css 文件放在 superset 我的项目的 superset/static/assets 目录下，而后如下应用
  // 如果是加载的生产地址，则可应用 IIS 或者 Nginx 搭建一个本地 web 服务，返回 css 文件
  // 间接如：http://localhost:8080/style/theme.css, 应用
  const cssUrl = '/static/assets/theme.css'

  // 加载页面
  win.loadURL(url)

  // 监听页面筹备实现，插入款式
  win.webContents.on('dom-ready', () => {let webUrl = win.webContents.getURL()
    
    if (insertCssPath.test(webUrl)) {
      // 如果是须要插入款式文件
      // 执行 js 代码往以后页面插入款式文件
      win.webContents.executeJavaScript(`
        const link = document.createElement('link');
        link.setAttribute('type','text/css');
        link.setAttribute('rel','stylesheet');
        link.setAttribute('href','${cssUrl}');
        document.head.appendChild(link);`
      )

      return false
    }

  })

}

app.whenReady().then(createWindow)

package.json 增加一个脚本，批改 main 属性：

{
  "name": "theme_editor",
  "version": "1.0.0",
  "description": "","main":"main.js","scripts": {"test":"echo \"Error: no test specified\" && exit 1","start":"electron ."},"keywords": [],"author":"",
  "license": "ISC",
  "devDependencies": {"electron": "^10.1.2"}
}

在 superset 我的项目，superset/static/assets 目录下增加 theme.css

#app {
  height: 100%;
  overflow: hidden;
  background: linear-gradient(180deg, #3F4685 0%, #222648 100%);
}

而后，跑起 superset 前后端服务。当前目录执行命令

npm run start

如果一切正常，下面命令会弹出一个 electron 窗口，加载 superset 的 web 服务，登陆后关上任意一个看板，看板的背景会变成 theme 文件设置成的色彩，如下：

这里有几个须要强调留神的中央：

1. loadURL 的 URL 请依据理论状况配置(本地也可能并非 5000 端口)，倡议应用线上服务；
2. 对于 css 文件的门路，应用 superset 才可间接放在 superset/static 目录下，如何应用线上地址，须要在本地搭建 web 服务来拜访 css 文件地址；
3. 如果应用 superset 服务加载 css 文件，会有缓存，须要在开发者工具的 network 中禁用缓存(Disable cache);
4. electron 窗口中应用；

以上，咱们就实现了如何应用 electron 实现能够在本人喜爱的编辑器中，编辑款式了。但还是有以下问题：

1. 尽管预览比之前好了，但每次批改后还是要 ctrl+ r 去刷新，没有做到主动刷新。
2. 如果我想应用 CSS 预编译语言呢？

接下来，用 gulp 解决下面两个问题。

应用 gulp 联合 electron-connect 实现主动刷新

装置相干依赖：

npm install gulp gulp-cli electron-connect -D

增加 gulpfile.js:

const {watch, task} = require('gulp');
const elecConnect = require('electron-connect').server.create(); 

// 款式批改应用 electron-connect 刷新，electron 窗体
function reload (cb) {elecConnect.reload()
  cb()}

task('watch', function () {elecConnect.start()
  watch(['./theme.css'], reload)
})

同时，在 main.js 中应用 connect：

// 批改 main.js, 在第二行引入 connect
const client = require('electron-connect').client
...
// 在 win.loadURL(url)后增加
client.create(win)

在以后指标下增加 theme.css，起个 IIS 服务指向theme_editor，** 我这里端口是88, 所以须要把main.js 的cssUrl值批改为http://localhost:88/theme.css

// main.js
...
const cssUrl = 'http://localhost:88/theme.css'
...

最初，当前目录执行命令：

npx gulp watch

如果这里没出问题，那么，你批改 theme.css 后，electron-connec t 就会主动把 electron 窗口以后的页面刷新一下。这里我碰到一个问题，提醒 electron 不存在，删除 node_modules 再从新 install 一次解决。这里还有一点要留神下，如果 npm 版本小于 5.2，是无奈应用 npx, 要么降级 node 版本，要么全局装置gulp-cli 而后间接跑 gulp watch。
好了，到目前为止，咱们又解决了一个主动刷新的需要。上面，咱们来实现一下预处理。

应用 gulp-less 实现预处理

装置gulp-less, 如果想应用其它css 预编译语言，能够装置相干的gulp 插件

npm install gulp-less -D

批改 gulpfile.js

const {watch, task, dest, src, series} = require('gulp')
const elecConnect = require('electron-connect').server.create() 
const less = require('gulp-less')


// 款式批改应用 electron-connect 刷新，electron 窗体
function reload (cb) {elecConnect.reload()
  cb()}

// 编译 less
function lessCompier () {return src('./*.less')
  .pipe(less())
  .pipe(dest('./'))
}

task('watch', function () {elecConnect.start()
  series(lessCompier)()
  // 批改为监听 less 扭转
  watch(['./theme.less'], series(lessCompier, reload))
})

增加 theme.less

#app{
  height: 100%;
  overflow: hidden;
  background: linear-gradient(180deg, #3F4685 0%, #222648 100%);
}

再次运行npx gulp watch, 这时，只有你批改theme.less, 页面也会主动刷新了。

其它

到这里，咱们的需要曾经切实。但仍然还有几个不完满的中央，比方每次启动 electron 咱们都须要从新登录下，能够这样解决下：

// 在 main.js 的 dom-ready 事件的回调函数外面
// 判断下如果是进行了登录页面，主动输出明码并登陆
if (/\/login\/$/.test(webUrl)) {win.webContents.insertCSS('html, body { background-color: #f00;}')
  // 上面输出你零碎的用户名，明码
  win.webContents.executeJavaScript(`
    $("#username")[0].value="admin";
    $("#password")[0].value="123456";
    $("form[name=login]")[0].submit();
  `, true)
  .then(() => {console.log('login success')
  })
  .catch(err => {console.log('login Error:', err)
  })
  return false
}

如果感觉，心愿每次都间接登陆，并跳转到具体看板，咱们能够粥在 main.js 的 dom-ready 事件的回调函数前面增加代码：

// href 填入指定 url
win.webContents.executeJavaScript(`location.href="http://127.0.0.1:5000/superset/dashboard/births/"`)

以上，残缺代码: theme-editor。

有时，咱们想做的可能更简单，比方对小图片转 base64, 对于未转base64 的图片心愿能够主动输入到指定目录并在 css 文件中做替换，压缩 css代码，打包前先压缩图片等等，这些 gulp 都有相应的插件去实现。相应能够看 theme-editor,dev 分支的 gulpfile 文件。