Electron & Gulp 환경에서 Watch하고 LiveReload 느낌을 할 때 빠졌기 때문에 메모
환경
package.json{
...
"scripts": {
"start": "gulp start",
"build": "gulp build"
},
"devDependencies": {
...
"electron-connect": "^0.6.3",
"gulp": "^4.0.0",
"gulp-plumber": "^1.2.1",
"gulp-useref": "^3.1.6",
},
"dependencies": {
"npm": "^6.5.0",
"electron": "^4.0.0",
...
}
}
dependencies 와 devDependencies 의 정리가 되어 있지 않기 때문에 구분적으로 정확하다고는 할 수 없습니다... 
Babel, SCSS/SASS, 파일 번들 등은 webpack입니다.
모두 webpack에서 시종하고 싶었지만, 여러가지로 Gulp로 빌드등의 태스크 관리는 하게 되었습니다.
또한 Electron의 기동·리로드등의 처리는 electron-connect를 사용했습니다.
첫 번째 구현 (제대로 작동하지 않음)
Gulp에는 watch라는 파일의 상태를 감시하고 변경이 발생하면 전달된 처리를 하는 메소드가 준비되어 있습니다.
그래서이 watch 메서드를 사용하여 다음과 같은 코드를 작성했습니다.
gulpfile.jsconst gulp = require('gulp');
const useref = require('gulp-useref');
const electron = require('electron-connect').server.create();
// ...略...
gulp.task('build', gulp.series( gulp.parallel(
'compile-js',
'compile-styles',
'compile-renderer'
)));
gulp.task('start', gulp.series('build', () => {
electron.start();
gulp.watch(['src/scripts/main/**/*.js'], gulp.series('compile-js', electron.restart()));
gulp.watch(['src/styles/**/*.{scss,sass}'], gulp.series('compile-styles', electron.reload()));
gulp.watch(['src/**/*.html'], gulp.series('compile-renderer', electron.reload()));
}));
electron.start()에서 Electron을 시작하고 reload()에서 렌더러 프로세스를 다시 시작합니다.restart() 재부팅, 같은 느낌입니다.
index.html<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hello!</title>
<!-- build:remove -->
<!-- Connect to server process -->
<script>require('electron-connect').client.create()</script>
<!-- end:build -->
</head>
<body>
<!-- ...略... -->
</body>
</html>
Electron에 사용되는 HTML 파일.
이것이 잘 작동하지 않습니다.
이것으로 제대로 움직이지 않았습니다.
구체적으로는, 한번은 변경을 검지해 줍니다만, 2번째 이후, 각각의 watch 태스크가 제대로 움직여 주지 않는다... 라고 하는 것입니다.
첫 번째 index.html 업데이트는 감지하지만 두 번째는 감지하지 않습니다 ... 같은 느낌.
해결됨
로그는 붙일 수 없습니다만, 잘 보면electron.reload나 electron.resart의 태스크의 finished의 출력이 되어 있지 않다... 라고 하는 것을 알았습니다.
이마에 주름을 잡고 영어 Docs를 읽는 등 다양한 시도
electron.reload 또는 electron.resart의 종료가 제대로되었는지 여부가 Gulp 측이 감지되지 않았습니다.
= Gulp에게는 그들이 여전히 움직이고있을 것입니다 (실제로 끝났습니다).
= 새로운 파일 감지가 수행되지 않음
라는 것이 아닐까 가설을 세웠습니다.
Gulp 의 사양으로서는 callback 를 돌려주면 좋다 (= 반대로 아무것도 돌아오지 않으면 처리중이라고 간주된다) 라고 하는 것이 Docs 를 열심히 해독한 결과 해석할 수 있었으므로, 전부 익명 함수로 둘러싸고 callback 를 돌려 해 주면 좋을 텐데...? 라고 생각해,
gulpfile.jsgulp.watch(['src/scripts/main/**/*.js'], gulp.series('compile-js',
done => {
electron.restart();
done();
}
));
gulp.watch(['src/styles/**/*.{scss,sass}'], gulp.series('compile-styles',
done => {
electron.reload();
done();
}
));
gulp.watch(['src/**/*.html'], gulp.series('compile-renderer',
done => {
electron.reload();
done();
}
));
이것에 의해 제대로 움직이게 되었습니다.
영어이지만 뭐든지 Docs를 읽는 것은 귀찮아서는 안 된다는 것을 알았던 일건이었습니다.
Reference
이 문제에 관하여(Electron & Gulp 환경에서 Watch하고 LiveReload 느낌을 할 때 빠졌기 때문에 메모), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/YuSan19/items/62a04deaf667eff763e9
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
{
...
"scripts": {
"start": "gulp start",
"build": "gulp build"
},
"devDependencies": {
...
"electron-connect": "^0.6.3",
"gulp": "^4.0.0",
"gulp-plumber": "^1.2.1",
"gulp-useref": "^3.1.6",
},
"dependencies": {
"npm": "^6.5.0",
"electron": "^4.0.0",
...
}
}
Gulp에는
watch라는 파일의 상태를 감시하고 변경이 발생하면 전달된 처리를 하는 메소드가 준비되어 있습니다.그래서이
watch 메서드를 사용하여 다음과 같은 코드를 작성했습니다.gulpfile.js
const gulp = require('gulp');
const useref = require('gulp-useref');
const electron = require('electron-connect').server.create();
// ...略...
gulp.task('build', gulp.series( gulp.parallel(
'compile-js',
'compile-styles',
'compile-renderer'
)));
gulp.task('start', gulp.series('build', () => {
electron.start();
gulp.watch(['src/scripts/main/**/*.js'], gulp.series('compile-js', electron.restart()));
gulp.watch(['src/styles/**/*.{scss,sass}'], gulp.series('compile-styles', electron.reload()));
gulp.watch(['src/**/*.html'], gulp.series('compile-renderer', electron.reload()));
}));
electron.start()에서 Electron을 시작하고 reload()에서 렌더러 프로세스를 다시 시작합니다.restart() 재부팅, 같은 느낌입니다.index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hello!</title>
<!-- build:remove -->
<!-- Connect to server process -->
<script>require('electron-connect').client.create()</script>
<!-- end:build -->
</head>
<body>
<!-- ...略... -->
</body>
</html>
Electron에 사용되는 HTML 파일.
이것이 잘 작동하지 않습니다.
이것으로 제대로 움직이지 않았습니다.
구체적으로는, 한번은 변경을 검지해 줍니다만, 2번째 이후, 각각의 watch 태스크가 제대로 움직여 주지 않는다... 라고 하는 것입니다.
첫 번째 index.html 업데이트는 감지하지만 두 번째는 감지하지 않습니다 ... 같은 느낌.
해결됨
로그는 붙일 수 없습니다만, 잘 보면electron.reload나 electron.resart의 태스크의 finished의 출력이 되어 있지 않다... 라고 하는 것을 알았습니다.
이마에 주름을 잡고 영어 Docs를 읽는 등 다양한 시도
electron.reload 또는 electron.resart의 종료가 제대로되었는지 여부가 Gulp 측이 감지되지 않았습니다.
= Gulp에게는 그들이 여전히 움직이고있을 것입니다 (실제로 끝났습니다).
= 새로운 파일 감지가 수행되지 않음
라는 것이 아닐까 가설을 세웠습니다.
Gulp 의 사양으로서는 callback 를 돌려주면 좋다 (= 반대로 아무것도 돌아오지 않으면 처리중이라고 간주된다) 라고 하는 것이 Docs 를 열심히 해독한 결과 해석할 수 있었으므로, 전부 익명 함수로 둘러싸고 callback 를 돌려 해 주면 좋을 텐데...? 라고 생각해,
gulpfile.jsgulp.watch(['src/scripts/main/**/*.js'], gulp.series('compile-js',
done => {
electron.restart();
done();
}
));
gulp.watch(['src/styles/**/*.{scss,sass}'], gulp.series('compile-styles',
done => {
electron.reload();
done();
}
));
gulp.watch(['src/**/*.html'], gulp.series('compile-renderer',
done => {
electron.reload();
done();
}
));
이것에 의해 제대로 움직이게 되었습니다.
영어이지만 뭐든지 Docs를 읽는 것은 귀찮아서는 안 된다는 것을 알았던 일건이었습니다.
Reference
이 문제에 관하여(Electron & Gulp 환경에서 Watch하고 LiveReload 느낌을 할 때 빠졌기 때문에 메모), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/YuSan19/items/62a04deaf667eff763e9
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
로그는 붙일 수 없습니다만, 잘 보면
electron.reload나 electron.resart의 태스크의 finished의 출력이 되어 있지 않다... 라고 하는 것을 알았습니다.이마에 주름을 잡고 영어 Docs를 읽는 등 다양한 시도
electron.reload 또는 electron.resart의 종료가 제대로되었는지 여부가 Gulp 측이 감지되지 않았습니다.= Gulp에게는 그들이 여전히 움직이고있을 것입니다 (실제로 끝났습니다).
= 새로운 파일 감지가 수행되지 않음
라는 것이 아닐까 가설을 세웠습니다.
Gulp 의 사양으로서는 callback 를 돌려주면 좋다 (= 반대로 아무것도 돌아오지 않으면 처리중이라고 간주된다) 라고 하는 것이 Docs 를 열심히 해독한 결과 해석할 수 있었으므로, 전부 익명 함수로 둘러싸고 callback 를 돌려 해 주면 좋을 텐데...? 라고 생각해,
gulpfile.js
gulp.watch(['src/scripts/main/**/*.js'], gulp.series('compile-js',
done => {
electron.restart();
done();
}
));
gulp.watch(['src/styles/**/*.{scss,sass}'], gulp.series('compile-styles',
done => {
electron.reload();
done();
}
));
gulp.watch(['src/**/*.html'], gulp.series('compile-renderer',
done => {
electron.reload();
done();
}
));
이것에 의해 제대로 움직이게 되었습니다.
영어이지만 뭐든지 Docs를 읽는 것은 귀찮아서는 안 된다는 것을 알았던 일건이었습니다.
Reference
이 문제에 관하여(Electron & Gulp 환경에서 Watch하고 LiveReload 느낌을 할 때 빠졌기 때문에 메모), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/YuSan19/items/62a04deaf667eff763e9텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
