Pregledaj postaje sve više održivo rješenje za razvoj skripti JS i predlažući sintaksu po uzoru na onu Node.js. Kompajlirajte skripte s Pregledaj Jednostavan je. Tijekom razvoja, korištenje Gledajte omogućuje kompajliranje datoteka u hodu. Unatoč tome, kada želite integrirati svoju kompilaciju s drugim zadacima Gutljaj (poput kompajliranja datoteka Manje), nailazite na problem: kako koristiti bdjeti istodobno s gutljaj-gledati. Odgovorite u ovom članku!

Sommaire

Koristite Gulp i Browserify – razina 0

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

Utiliser Gutljaj et Pregledaj je prilično jednostavan. Možete koristiti Browserify API ili ići jednostavnije i upotrijebiti gulp-browserify koji će vam omogućiti jednostavno kompajliranje datoteka.

const gutljaj = zahtijevati('gutljaj');
const preglednik= zahtijevati('gulp-browserify');
gutljaj.zadatak('js', funkcija() {
gutljaj.src('src/*.js', { čitati: lažan })
.pipe(browserify())
.cijev(gulp.dest('./izgraditi/'))
});

Problem na koji brzo naiđete je da ćete morati analizirati sve datoteke da biste radili na svojim datotekama i ponovno ih kompajlirali u hodu. Ovo je jako skupo. Pregledaj će morati učitati sve vaše datoteke, ali i sve ovisnosti koje koristite. Što je vaš projekt veći, vrijeme će brže prolaziti. Dodatno, ako koristite transformira Comme Babelify vremena će rasti još brže (popis svih dodataka dostupnih putem Babela). Također popis svih Browserify transformira.

Prije nego što vam pokažem konačno rješenje, evo kako bi rješenje izgledalo s klasičnim gutljaj-gledati.

gutljaj.zadatak("Gledati", funkcija () {
gutljaj.gledaj(“./src/*.js”, ["js"]).mi("promijeniti", funkcija(događaj) {
konzola.log(`Datoteka ${event.path} je ${event.type}`);
});
});

Uz ovo rješenje, svaki put kada promijenite jednu od svojih datoteka, pokreće se cijela kompilacija.

Gledajte

Gledajte čini učinkovitim kompajliranje datoteka Pregledaj. Zadržat će u memoriji rezultat kompilacije svake datoteke (sve datoteke povezane s vašom datotekom kao što su ovisnosti...).

Kada se datoteka ažurira, ona ažurira upravo izmijenjeni otisak datoteke i generira a snop bez analiziranja svih vaših ovisnosti.

Koristite Gulp, Browserify i Watchify – razina ∞

Instaliranje ovisnosti Node.js

Možete ih instalirati pomoću Yarna (ako ste stvarno u toku 🙂)!

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

U suprotnom, koristite dobri stari NPM 🙉

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

gulpfile.js

"stroga uporaba";
const preglednik= zahtijevati(“browserify”),
tampon = zahtijevati("vinil pufer"),
gutljaj = zahtijevati("gutljaj"),
put = zahtijevati("staza"),
izvor = zahtijevati(“vinyl-source-stream”),
korisnik = zahtijevati(“gut-util”),
promatrati = zahtijevati(“watchify”),
src = {
js: “./src/main.js”
},
odredište = {
js: "./izgraditi/"
};
pustiti bundler;
funkcija snopovi(profil) {
if (paket === undefiniran) {
if (profil === "Gledati") {
bundler = watchify(browserify(src.js));
} drugo {
bundler = browserify(src.js);
}
}
paket();
}
funkcija snop() {
pustiti početak = novi Datum().getTime(),
_ = skupljač
.paket()
.mi("greška", util.log.bind(util, "Pogreška Browserify"))
.cijev(izvor(“main.js”))
.pipe(buffer())
.pipe(gulp.dest(dest.js)),
vrijeme= novi Datum().getTime() – početak;
util.log("[browserify] ponovno grupiranje je trajalo" , use.colors.cyan(`${vrijeme} ms`), util.colors.grey(`(${src.js})`));
povratak _;
}
gutljaj.zadatak("js", bundles.bind(nula));
gutljaj.zadatak("Gledati", funkcija () {
paketi ("Gledati");
bundler.on("Ažuriraj", bundle.bind(nula));
});
gutljaj.zadatak("zadano", ["Gledati", "js"]);

Ovdje imate krajnje pojednostavljen, ali funkcionalan primjer. Ovaj kod bi se mogao dodatno pojednostaviti, ali vam pokazuje skicu koda koji treba proizvesti za rukovanje a vruće ponovno punjenje učinkovita.

Kako bih vam olakšao zadatak, dostavljam vam arhivu s a guplfile.js potpuniji, koji obrađuje kompilaciju datoteka JavaScript s Babel (i još memorijskih poput ES2015) ali i datoteke Manje dok upravljate profilima poput développement sa ili bez gledati ali isto tako proizvodnja sa smanjivanjem!

Zaključak

Sasvim je moguće koristiti Pregledaj učinkovito sa Gutljaj pod uvjetom da igrate s API. To vas tjera da malo skrenete s utabane staze i radite bez dodataka Gutljaj koje obično koristimo.