Sfogliare sta diventando sempre più una valida soluzione per lo sviluppo di script JS e proponendo una sintassi modellata su quella di Node.js. Compila gli script con Sfogliare È semplice. Durante gli sviluppi, l'uso di Guarda ti permette di compilare i file al volo. Nonostante ciò, quando vuoi integrare la tua compilation con altre attività Sorso (come la compilazione di file Di meno), ti imbatti in un problema: come utilizzare watchify allo stesso tempo gulp-watch. Rispondi in questo articolo!

sommario

Usa Gulp e Browserify – Livello 0

Name: Agence Web Tremplin Numérique
Price range: $$$

utiliser Sorso et Sfogliare è abbastanza semplice. Puoi utilizzare l'API Browserify o semplificare e utilizzare gulp-browserify che ti consentirà di compilare facilmente i tuoi file.

const sorso= richiedere('sorso');
const browserify= richiedere('gulp-browserify');
gulp.task('js', function() {
gulp.src('src/*.js', { read: falso })
.pipe(browserify())
.pipe(gulp.dest('./costruire/'))
});

Il problema che incontri rapidamente è che per lavorare sui tuoi file e farli ricompilare al volo, dovrai analizzare tutti i file. Questo è molto costoso. Sfogliare dovrà caricare tutti i tuoi file ma anche tutte le dipendenze che usi. Più grande diventa il tuo progetto, più veloce passerà il tempo. Inoltre, se usi trasforma come Babelificare i tempi aumenteranno ancora più velocemente (Elenco di tutti i plugin disponibili tramite Babel). Anche l'elenco di tutti Browserify si trasforma.

Prima di mostrarti la soluzione finale, ecco come sarebbe una soluzione con il classico gulp-watch.

gulp.task("orologio", function () {
gulp.guarda(“./src/*.js”, ["js"]).Noi("modifica", function(evento) {
consolle.tronco d'albero(`File ${evento.percorso} è stata ${event.tipo}`);
});
});

Con questa soluzione, ogni volta che modifichi uno dei tuoi file, viene lanciata un'intera compilation.

Guarda

Guarda rende efficiente la compilazione dei file con Sfogliare. Manterrà in memoria il risultato della compilazione di ogni file (tutti i file collegati al tuo file come le dipendenze...).

Quando un file viene aggiornato, aggiorna l'impronta digitale del file appena modificato e genera un file fascio senza analizzare tutte le tue dipendenze.

Usa Gulp, Browserify e Watchify – Livello ∞

Installazione delle dipendenze Node.js

Puoi installarli con Yarn (se sei davvero aggiornato 🙂)!

1	$ filato add browserify gulp vinyl-buffer vinyl-source-stream watchify –dev

Altrimenti, stai usando il buon vecchio NPM 🙉

1	$ npm install browserify gulp vinyl-buffer vinyl-source-stream watchify --save-dev

gulpfile.js

"uso rigoroso";
const browserify= richiedere("navigare"),
tampone = richiedere("tampone in vinile"),
sorso= richiedere("sorso"),
percorso = richiedere("sentiero"),
fonte = richiedere("flusso-sorgente-vinile"),
utente = richiedere("gulp-util"),
guarda = richiedere("guardare"),
sorgente = {
js: "./src/main.js"
},
destinazione = {
js: "./costruire/"
};
lasciare impacchettatore;
function pachetti sconto(tuo profilo) {
if (fascio === undefined) {
if (profilo === "orologio") {
bundler = watchify(browserify(src.js));
} altro {
bundler = browserify(src.js);
}
}
fascio();
}
function fascio() {
lasciare inizio = nuovi Data().prendi tempo(),
_ = impacchettatore
.fascio()
.Noi("Errore", util.log.bind(util, "Errore di navigazione"))
.pipe(fonte("principale.js"))
.pipe(buffer())
.pipe(gulp.dest(dest.js)),
tempo= nuovi Data().getTime() – inizio;
util.log("[browserify] il raggruppamento ha preso" , usa.colori.ciano(`${time} ms`), util.colors.grey(`(${src.js})`));
ritorno _;
}
gulp.task("js", fasci.bind(nullo));
gulp.task("orologio", function () {
gruppi("orologio");
bundler.on("Aggiornare", bundle.bind(nullo));
});
gulp.task("predefinito", ["orologio", "js"])?

Ecco un esempio estremamente semplificato ma funzionale. Questo codice potrebbe essere ulteriormente semplificato ma mostra uno schizzo del codice da produrre per gestire a ricarica a caldo efficace.

Per semplificare il tuo compito, ti fornisco un archivio con a guplfile.js più completo, che gestisce la compilazione dei file JavaScript con Babele (e alcuni preset come ES2015) ma anche file Di meno durante la gestione di profili come sviluppo con o senza orologio ma anche produzione con minificazione!

Conclusione

È del tutto possibile da usare Sfogliare efficacemente con Sorso a condizione di giocare con API. Questo ti costringe ad andare un po' fuori dai sentieri battuti e fare a meno dei plugin Sorso che usiamo abitualmente.