Gulpfileが変更されるたびにGulpを再起動するにはどうすればよいですか？
Gulpfileを開発しています。変更後すぐに再起動することはできますか？ CoffeeScriptで開発しています。 Gulp watch Gulpfile.coffee変更が保存されたときに再起動するには？
taskを作成して、gulp.watch ために gulpfile.jsそして単純に spawn別のgulp child_process 。
var gulp = require('gulp'),
argv = require('yargs').argv, // for args parsing
spawn = require('child_process').spawn;
gulp.task('log', function() {
console.log('CSSs has been changed');
});
gulp.task('watching-task', function() {
gulp.watch('*.css', ['log']);
});
gulp.task('auto-reload', function() {
var p;
gulp.watch('gulpfile.js', spawnChildren);
spawnChildren();
function spawnChildren(e) {
// kill previous spawned process
if(p) { p.kill(); }
// `spawn` a child `gulp` process linked to the parent `stdio`
p = spawn('gulp', [argv.task], {stdio: 'inherit'});
}
});
再起動が必要になったら実行する「メインタスク」を受け入れるために、 yargs を使用しました。したがって、これを実行するには、次のように呼び出します。
gulp auto-reload --task watching-task
テストするには、touch gulpfile.jsまたはtouch a.cssログを表示します。
gulper を作成しました。これは、gulpfileの変更時にgulpを再起動するgulp.js cliラッパーです。
Gulpをgulperに単純に置き換えることができます。
$ gulper <task-name>
この目的のために小さなシェルスクリプトを使用します。これはWindowsでも機能します。
押す Ctrl+Cスクリプトを停止します。
// gulpfile.js
gulp.task('watch', function() {
gulp.watch('gulpfile.js', process.exit);
});
Bash Shellスクリプト：
# watch.sh
while true; do
gulp watch;
done;
Windowsバージョン：watch.bat
@echo off
:label
cmd /c gulp watch
goto label
私はCaio Cunhaの答えのソリューションでEADDRINUSEエラーの束を受け取っていました。 gulpfileは connect および LiveReload でローカルWebサーバーを開きます。古いプロセスが強制終了される前に、新しいgulpプロセスが古いプロセスと短時間共存するように見えるため、ポートはまもなくダイプロセスに使用されます。
共存問題を回避する同様のソリューションを次に示します（主に this に基づいています）：
var gulp = require('gulp');
var spawn = require('child_process').spawn;
gulp.task('gulp-reload', function() {
spawn('gulp', ['watch'], {stdio: 'inherit'});
process.exit();
});
gulp.task('watch', function() {
gulp.watch('gulpfile.js', ['gulp-reload']);
});
これはかなりうまく機能しますが、かなり深刻な副作用が1つあります。最後のgulpプロセスは端末から切断されます。したがって、gulp watchが終了しても、孤立したgulpプロセスはまだ実行中です。私はその問題を回避することができませんでした、余分なgulpプロセスを手動で強制終了するか、構文エラーをgulpfile.jsに保存するだけです。
これに対する別の解決策は、require.cache。
var gulp = require('gulp');
var __filenameTasks = ['lint', 'css', 'jade'];
var watcher = gulp.watch(__filename).once('change', function(){
watcher.end(); // we haven't re-required the file yet
// so is the old watcher
delete require.cache[__filename];
require(__filename);
process.nextTick(function(){
gulp.start(__filenameTasks);
});
});
これは非常に古い質問であることは知っていますが、これはGoogleのトップコメントなので、非常に関連性があります。
ソースgulpfile.jsが使用中のディレクトリとは異なるディレクトリにある場合の簡単な方法を次に示します。 （これは重要です！）gulpモジュール gulp-newer および gulp-data を使用します。
var gulp = require('gulp' )
, data = require('gulp-data' )
, newer = require('gulp-newer' )
, child_process = require('child_process')
;
gulp.task( 'gulpfile.js' , function() {
return gulp.src( 'sources/gulpfile.js' ) // source
.pipe( newer( '.' ) ) // check
.pipe( gulp.dest( '.' ) ) // write
.pipe( data( function(file) { // reboot
console.log('gulpfile.js changed! Restarting gulp...') ;
var t , args = process.argv ;
while ( args.shift().substr(-4) !== 'gulp' ) { t=args; }
child_process.spawn( 'gulp' , args , { stdio: 'inherit' } ) ;
return process.exit() ;
} ) )
;
} ) ;
それはこのように動作します：
- トリック1：gulp-newerは、ソースファイルが現在のものより新しい場合にのみ、次のパイプを実行します。このようにして、リブートループがないことを確認します。
- whileループは、コマンド文字列からgulpコマンドを含むすべてを削除し、引数を渡すことができます。
- child_process.spawnは、新しいgulpプロセスを生成し、入力出力とエラーを親にパイプします。
- トリック2：process.exitは、現在のプロセスを強制終了します。ただし、子プロセスが終了するまで、プロセスは終了するまで待機します。
パイプに再起動機能を挿入する方法は他にもたくさんあります。とにかく、すべてのgulpファイルでgulp-dataを使用しています。独自の解決策をコメントしてください。 :)
Nodemonをグローバルにインストールします：npm i -g nodemon
そして、.bashrc（または.bash_profileまたは.profile）にエイリアスを追加します：
alias gulp='nodemon --watch gulpfile.js --watch gulpfile.babel.js --quiet --exitcrash --exec gulp'
これは、ファイルgulpfile.jsおよびgulpfile.babel.jsの変更を監視します。 （ Google を参照）
PS。これは、無限のタスク（watchなど）には役立ちますが、単一の実行タスクには役立ちません。つまり、監視を使用しているため、gulpタスクが完了した後でも処理を続行します。 ;）
このコードを試してください（win32プラットフォームのみ）
gulp.task('default', ['less', 'scripts', 'watch'], function(){
gulp.watch('./gulpfile.js').once('change' ,function(){
var p;
var childProcess = require('child_process');
if(process.platform === 'win32'){
if(p){
childProcess.exec('taskkill /PID' + p.id + ' /T /F', function(){});
p.kill();
}else{
p = childProcess.spawn(process.argv[0],[process.argv[1]],{stdio: 'inherit'});
}
}
});
});
Visual Studioタスクランナーでも機能するWindowsの優れたソリューション。
/// <binding ProjectOpened='auto-watchdog' />
const spawn = require('child-proc').spawn,
configPaths = ['Gulpconfig.js', 'bundleconfig.js'];
gulp.task('watchdog', function () {
// TODO: add other watches here
gulp.watch(configPaths, function () {
process.exit(0);
});
});
gulp.task('auto-watchdog', function () {
let p = null;
gulp.watch(configPaths, spawnChildren);
spawnChildren();
function spawnChildren() {
const args = ['watchdog', '--color'];
// kill previous spawned process
if (p) {
// You might want to trigger a build as well
args.unshift('build');
setTimeout(function () {
p.kill();
}, 1000);
}
// `spawn` a child `gulp` process linked to the parent `stdio`
p = spawn('gulp', args, { stdio: 'inherit' });
}
});
他の回答と比較した主な変更点：
- Child_processがWindowsで失敗するため、child-procを使用します。
- Windowsではgulp呼び出しがバッチスクリプトにラップされるため、ウォッチドッグはファイルの変更時に終了します。バッチスクリプトを強制終了しても、gulp自体は強制終了されず、時間の経過とともに複数のウォッチが生成されます。
- 変更時にビルド：通常、gulpfileの変更もプロジェクトの再構築を保証します。
これは、通常のGulpタスクプロシージャに沿った@CaioToOnのリロードコードの別のバージョンです。また、yargsにも依存しません。
生成を要求し、プロセス変数を初期化します（yargsは不要です）：
_var spawn = require('child_process').spawn;
var p;
_デフォルトのgulpタスクはスポーナーです：
_gulp.task('default', function() {
if(p) { p.kill(); }
// Note: The 'watch' is the new name of your normally-default gulp task. Substitute if needed.
p = spawn('gulp', ['watch'], {stdio: 'inherit'});
});
_監視タスクはおそらくデフォルトのgulpタスクでした。名前をwatchに変更し、gulpfileを監視するためのgulp.watch()を追加し、変更に対してdefaultタスクを実行します。
_gulp.task('watch', ['sass'], function () {
gulp.watch("scss/*.scss", ['sass']);
gulp.watch('gulpfile.js', ['default']);
});
_さて、gulpを実行するだけで、gulpfileを変更すると自動的にリロードされます！
私は同じ問題に取り組んできましたが、私の場合の解決策は実際には非常に簡単でした。二つのこと。
npm install nodemon -g（または必要に応じてローカル）cmdで実行するか、次のようなパッケージにスクリプトを作成します。
"dev": "nodemon --watch gulpfile.js --exec gulp"ちょうどタイプ
npm run dev
--watchは、監視するファイルを指定します。 --execは、次の行で実行することを示し、gulpはデフォルトのタスクです。デフォルト以外のタスクが必要な場合は、引数を渡すだけです。
それが役に立てば幸い。
編集：それを派手に;;さて、最初の部分はあなたが望んでいたものを達成するはずですが、私のセットアップでは、本当にユーザーフレンドにするためにもう少し追加する必要がありました。私が欲しかったのは
- 最初にページを開きます。
- Gulpfile.jsの変更を探し、存在する場合はgulpを再起動します
- それを飲み込んで、ファイルに目を向け、再構築し、ホットリロードする
最初の部分で述べたことだけを行うと、毎回ページが開きます。修正するには、ページを開くgulpタスクを作成します。このような ：
gulp.task('open', function(){
return gulp
.src(config.buildDest + '/index.html')
.pipe(plugins.open({
uri: config.url
}));
次に、私の主なタスクで私が持っています：
gulp.task('default', ['dev-open']);
gulp.task('dev-open', function(done){
plugins.sequence('build', 'connect', 'open', 'watch', done);
});
gulp.task('dev', function(done){
plugins.sequence('build', 'connect', 'watch', done);
});
次に、npmスクリプトを変更して
"dev": "gulp open & nodemon --watch gulpfile.js --watch webpack.config.js --exec gulp dev"
まさにあなたが望むものを提供します。最初にページを開き、ライブリロードを続けます。ライブリロードの場合、私は常に同じポートを使用する接続に付属しているものを使用します。お役に立てば幸いです！
Gulp-restartをインストールする
_npm install gulp-restart_
このコードはあなたのために働きます。
var gulp = require('gulp'); var restart = require('gulp-restart');
gulp.task('watch', function() { gulp.watch(['gulpfile.js'], restart); })
gulpfile.jsで変更を行うとgulpが再起動します
これは、「gulp」と入力するだけでデフォルトのタスクとして設定できることを理解しやすい短いバージョンです。
gulp.task('watch', function() {
const restartingGulpProcessCmd = 'while true; do gulp watch2 --colors; done;';
const restartingGulpProcess = require('child_process').exec(restartingGulpProcessCmd);
restartingGulpProcess.stdout.pipe(process.stdout);
restartingGulpProcess.stderr.pipe(process.stderr);
});
gulp.task('watch2', function() {
gulp.watch(['config/**.js', 'webpack.config.js', './gulpfile.js'],
() => {
console.log('Config file changed. Quitting so gulp can be restarted.');
process.exit();
});
// Add your other watch and build commands here
}
gulp.task('default', ['watch']);