javascript - files - gulp uglify

¿Cómo se puede reiniciar Gulp con cada cambio de Gulpfile?

Question

Estoy desarrollando un Gulpfile . ¿Se puede reiniciar tan pronto como cambie? Lo estoy desarrollando en CoffeeScript. ¿Puede Gulp mirar Gulpfile.coffee para reiniciar cuando se guardan los cambios?

Answer 1

Aquí hay otra versión del código de recarga de @ CaioToOn que está más en línea con el procedimiento de tarea Gulp normal. Tampoco depende de yargs .

Requerir spawn e iniciar la variable de proceso (no se necesita yargs ):

var spawn = require(''child_process'').spawn;
var p;

La tarea predeterminada de gulp será el generador:

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''});
});

Tu tarea de vigilancia fue probablemente tu tarea de trago predeterminada. Cambie el nombre para watch y agregue un gulp.watch() para ver su archivo gulp y ejecutar la tarea default en los cambios:

gulp.task(''watch'', [''sass''], function () {
gulp.watch("scss/*.scss", [''sass'']);
gulp.watch(''gulpfile.js'', [''default'']);
});

Ahora, solo ejecuta gulp y se volverá a cargar automáticamente si cambias tu gulpfile.

Answer 2

Aquí hay una versión corta que es fácil de entender y que puede establecer como una tarea predeterminada, por lo que solo debe escribir "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'']);

Answer 3

Estaba recibiendo un montón de errores de EADDRINUSE con la solución en la respuesta de Caio Cunha. My gulpfile abre un servidor web local con connect y LiveReload . Parece que el nuevo proceso de trago coexiste brevemente con el antiguo antes de que se mate el proceso anterior, por lo que los puertos todavía están en uso por el proceso que pronto se va a morir.

Aquí hay una solución similar que soluciona el problema de coexistencia (basado principalmente en 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'']);
});

Eso funciona bastante bien, pero tiene un efecto secundario bastante serio: el último proceso de trago está desconectado de la terminal. Entonces, cuando sale gulp watch , todavía hay un proceso de trago huérfano. No he podido evitar ese problema, el proceso extra gulp puede eliminarse manualmente o simplemente guardar un error de sintaxis en gulpfile.js .

Answer 4

He estado lidiando con el mismo problema y la solución en mi caso fue muy simple. Dos cosas.

1. npm install nodemon -g (o localmente si lo prefieres)

2. ejecutar con cmd o crear una secuencia de comandos en paquetes como este:

   "dev": "nodemon --watch gulpfile.js --exec gulp"

3. El tipo simplemente npm run dev

--watch especifica el archivo que debe --watch . --exec dice ejecutar siguiente en línea y gulp es tu tarea predeterminada. Solo pase el argumento si desea una tarea que no sea la predeterminada.

Espero eso ayude.

EDITAR: Haciendo que sea elegante;) Ahora bien, aunque la primera parte debería lograr lo que buscabas, en mi configuración he necesitado agregar un poco más para que sea realmente amiga del usuario. Lo que yo quería era

1. Primero abre la página.
2. Busque cambios en gulpfile.js y reinicie gulp si hay alguno
3. Disfrútalo así que ten cuidado con los archivos, reconstruye y recarga en caliente

Si solo haces lo que dije en la primera parte, se abrirá la página cada vez. Para solucionarlo, crea una tarea de trago que abrirá la página. Me gusta esto :

gulp.task(''open'', function(){
return gulp
.src(config.buildDest + ''/index.html'')
.pipe(plugins.open({
uri: config.url
}));

Luego en mis tareas principales tengo:

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);
});

Luego, modifica tus scripts npm para

"dev": "gulp open & nodemon --watch gulpfile.js --watch webpack.config.js --exec gulp dev"

Te dará exactamente lo que quieres. Primero abre la página y luego solo mantén la recarga en vivo. Por cierto para livereload uso el que viene con connect que siempre usa el mismo puerto. Espero que te sirva, ¡disfrútalo!

Answer 5

Instalar gulp-restart

npm install gulp-restart

Este código funcionará para ti.

var gulp = require(''gulp''); var restart = require(''gulp-restart'');

gulp.task(''watch'', function() { gulp.watch([''gulpfile.js''], restart); })

se reiniciará gulp donde haces cambios en el archivo gulpfile.js

Answer 6

Instalar nodemon globalmente: npm i -g nodemon

Y agregue su .bashrc (o .bash_profile o .profile) un alias:

alias gulp=''nodemon --watch gulpfile.js --watch gulpfile.babel.js --quiet --exitcrash --exec gulp''

Esto vigilará los cambios de archivo gulpfile.js y gulpfile.babel.js. (ver Google )

PS Esto puede ser útil para tareas sin fin (como watch ) pero no para tareas de ejecución única. Me refiero a que usa reloj, por lo que continuará el proceso incluso después de que termine la tarea de gulp. ;)

Answer 7

Otra solución para esto es actualizar el 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);
});
});

Answer 8

Puede crear una task que gulp.watch para gulpfile.js y simplemente spawn otro trago 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 para aceptar la ''tarea principal'' para ejecutar una vez que necesitamos reiniciar. Entonces, para ejecutar esto, llamarías:

gulp auto-reload --task watching-task

Y para probar, llame a touch gulpfile.js o touch a.css para ver los registros.

Answer 9

Sé que esta es una pregunta muy antigua, pero es un comentario importante en Google, por lo que sigue siendo muy relevante.

Esta es una forma más sencilla, si su fuente gulpfile.js está en un directorio diferente al que está en uso. (¡Eso es importante!) Utiliza los módulos gulp-newer y 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() ;
} ) )
;
} ) ;

Funciona así:

• Truco 1: gulp-newer solo ejecuta las siguientes canalizaciones, si el archivo de origen es más nuevo que el actual. De esta forma nos aseguramos de que no haya reinicio de bucle.
• El ciclo while elimina todo antes e incluye el comando gulp de la cadena de comandos, por lo que podemos pasar por cualquier argumento.
• child_process.spawn genera un nuevo proceso de trago, una salida de entrada de tubería y un error para el padre.
• Truco 2: process.exit mata el proceso actual. Sin embargo, el proceso esperará hasta que finalice el proceso secundario.

Hay muchas otras formas de insertar la función de reinicio en las tuberías. Por casualidad, uso gulp-data en cada uno de mis gulpfiles de todos modos. Siéntase libre de comentar su propia solución. :)

Answer 10

Una buena solución para Windows, que también funciona bien con el programador de tareas de Visual Studio.

/// <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'' });
}
});

Principales cambios en comparación con otras respuestas:

• Utiliza child-proc porque child_process falla en Windows.
• El watchdog se abandona a sí mismo en los cambios de archivos porque en Windows la llamada gulp está envuelta en un script por lotes. La eliminación de la secuencia de comandos por lotes no mataría al mismo trago, por lo que se generarán múltiples relojes a lo largo del tiempo.
• Construir sobre el cambio: por lo general, un cambio de gulpfile también garantiza la reconstrucción del proyecto.

Answer 11

Yo uso un pequeño script de shell para este propósito. Esto también funciona en Windows.

Presione Ctrl+C para detener el script.

// gulpfile.js
gulp.task(''watch'', function() {
gulp.watch(''gulpfile.js'', process.exit);
});

Script de shell Bash:

# watch.sh
while true; do
gulp watch;
done;

Versión de Windows: watch.bat

@echo off
:label
cmd /c gulp watch
goto label

Answer 12

prueba este código (solo la plataforma 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''});
}
}
});
});

Answer 13

gulper que es gulp.js cli wrapper para reiniciar gulp en gulpfile change.

Puedes simplemente reemplazar el trago con gulper.

$ gulper <task-name>