二、gulp+electron 自动更新

不用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文件。