美文网首页
二、gulp+electron 自动更新

二、gulp+electron 自动更新

作者: 懒羊羊3号 | 来源:发表于2019-03-20 16:01 被阅读0次

    不用gulp

    electron-reload

    require('electron-reload')(__dirname); //引入
    //  createWindow加这一句
    mainWindow.loadUrl(`file://${__dirname}/index.html`);
    

    gulp

    1、必要依赖

    npm install --save-dev gulp //4.0.0
    npm install --save-dev gulp-watch //必须,不然只能监听一次变化
    npm install --save-dev electron-connect
    

    2、gulpfile.js

    const gulp = require('gulp')
    const watch = require('gulp-watch')
    const electron = require('electron-connect').server.create()
    
    gulp.task('watch:electron', function () {
      electron.start()
      watch(['./*.js'], electron.restart)
      watch(['./*.{html,js,css}'], electron.reload)
    })
    
    

    3、配置
    全局配置main.js

    const {app, BrowserWindow} = require('electron')
    const client = require('electron-connect').client  // 加这一行
    let mainWindow
    function createWindow () {
      mainWindow = new BrowserWindow({
        width: 800,
        height: 600,
        webPreferences: {
          nodeIntegration: true
        }
      })
      mainWindow.loadFile('index.html')
      mainWindow.on('closed', function () {
        mainWindow = null
      })
      client.create(mainWindow)  // 再加这一行
    }
    app.on('ready', createWindow)
    app.on('window-all-closed', function () {
      if (process.platform !== 'darwin') {
        app.quit()
      }
    })
    
    app.on('activate', function () {
      if (mainWindow === null) {
        createWindow()
      }
    })
    

    单独配置html

    require('electron-connect').client.create();
    

    4、启动

    gulp watch:electron
    

    gulp

    四种常见的匹配模式

    *.scss : * 号匹配当前目录任意文件,所以这里 *.scss 匹配当前目录下所有scss文件
    **/*.scss :匹配当前目录及其子目录下的所有scss文件。
    !not-me.scss :!号移除匹配的文件,这里将移除not-me.scss 
    *.+(scss|sass) :+号后面会跟着圆括号,里面的元素用|分割,匹配多个选项。这里将匹配scss和sass文件。
    

    相关文章

      网友评论

          本文标题:二、gulp+electron 自动更新

          本文链接:https://www.haomeiwen.com/subject/rqftvqtx.html