Browserify qed issir dejjem aktar soluzzjoni vijabbli għall-iżvilupp ta' skripts JS u tipproponi sintassi mmudellata fuq dik ta’ Node.js. Ikkompila skripts ma Browserify Huwa sempliċi. Matul l-iżviluppi, l-użu ta Watchify jippermettilek tiġbor fajls fuq il-fly. Minkejja dan, meta trid tintegra l-kumpilazzjoni tiegħek ma 'kompiti oħra Gulp (bħall-kumpilazzjoni tal-fajls inqas), tiffaċċja problema: kif tuża watchify fl-istess ħin bħala gulp-għassa. Tweġiba f'dan l-artikolu!

sommarju

Uża Gulp u Browserify - Livell 0

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

Utilizzatur Gulp et Browserify huwa pjuttost sempliċi. Tista 'tuża l-API Browserify jew tmur aktar sempliċi u tuża gulp-browserify li jippermettilek li tikkompila l-fajls tiegħek faċilment.

const gulp= jeħtieġu('gulp');
const browserify= jeħtieġu('gulp-browserify');
gulp.task('js', funzjoni() {
gulp.src('src/*.js', { taqra: falza })
.pipe(browserify())
.pipe(gulp.dest('./build/'))
});

Il-problema li tiltaqa 'malajr hija li biex taħdem fuq il-fajls tiegħek u jkollokhom ikkumpilati mill-ġdid fuq il-fly, ser ikollok teżamina l-fajls kollha. Dan huwa għali ħafna. Browserify se jkollu jgħabbi l-fajls kollha tiegħek iżda wkoll id-dipendenzi kollha li tuża. Iktar ma jkun kbir il-proġett tiegħek, iktar ikun mgħaġġel iż-żmien. Barra minn hekk, jekk tuża jittrasforma kif Babelify il-ħinijiet se jintefħu saħansitra aktar malajr (Lista tal-plugins kollha disponibbli permezz ta’ Babel). Ukoll il-lista ta 'kulħadd Browserify jittrasforma.

Qabel ma nurik is-soluzzjoni finali, hawn kif tkun soluzzjoni bil-klassika gulp-għassa.

gulp.task("għassa", funzjoni () {
gulp.watch(“./src/*.js”["js"]).aħna("bidla", funzjoni(avveniment) {
console.zokk maqtugħ(`Fajl ${event.path} kien ${event.type}`);
});
});

B'din is-soluzzjoni, kull darba li tibdel wieħed mill-fajls tiegħek, titnieda kumpilazzjoni sħiħa.

Watchify

Watchify jagħmilha effiċjenti biex tiġbor il-fajls tiegħek Browserify. Se żżomm fil-memorja r-riżultat tal-kumpilazzjoni ta 'kull fajl (il-fajls kollha marbuta mal-fajl tiegħek bħal dipendenzi...).

Meta fajl jiġi aġġornat, jaġġorna l-marki tas-swaba' tal-fajl li għadu kemm ġie modifikat u jiġġenera a qatta mingħajr parsing tad-dipendenzi kollha tiegħek.

Uża Gulp, Browserify u Watchify – Livell ∞

Installazzjoni tad-dipendenzi Node.js

Tista' tinstallahom bil-Ħjut (jekk int verament aġġornat 🙂)!

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

Inkella, qed tuża NPM antik tajjeb 🙉

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

gulpfile.js

"użu strett";
const browserify= jeħtieġu("browserify"),
buffer = jeħtieġu("buffer tal-vinil"),
gulp= jeħtieġu("gulp"),
mogħdija = jeħtieġu("mogħdija"),
sors= jeħtieġu("vinil-sors-fluss"),
utent = jeħtieġu("gulp-util"),
watchify= jeħtieġu("għassa"),
src = {
js: “./src/main.js”
},
destinazzjoni = {
js: “./build/”
};
let bundler;
funzjoni qatet(profil) {
if (qatta === undefined) {
if (profil === "għassa") {
bundler = watchify (browserify (src.js));
} inkella {
bundler = browserify (src.js);
}
}
gozz();
}
funzjoni qatta() {
let tibda = ġdid data().getTime(),
_ = bundler
.bundle()
.aħna("żball", util.log.bind(util, "Żball Ibbrawżja"))
.pipe(sors(“main.js”))
.pipe(buffer())
.pipe(gulp.dest(dest.js)),
ħin = ġdid data().getTime() – tibda;
util.log("[browserify] rebundle ħa" , use.colors.cyan(`${time} ms`), util.colors.grey(`(${src.js})`));
ritorn _;
}
gulp.task("js", bundles.bind(null));
gulp.task("għassa", funzjoni () {
gzuz ("għassa");
bundler.on(“aġġornament”, bundle.bind(null));
});
gulp.task("default"["għassa", "js"]);

Hawnhekk għandek eżempju estremament simplifikat iżda funzjonali. Dan il-kodiċi jista 'jiġi ssimplifikat aktar iżda jurik abbozz tal-kodiċi li għandek tipproduċi biex timmaniġġa a reload sħun effettiva.

Biex nissimplifika l-kompitu tiegħek, jien nipprovdulek arkivju b'a guplfile.js aktar kompluta, li tieħu ħsieb il-kumpilazzjoni tal-fajls JavaScript ma Babel (u xi wħud presets bħal ES2015) iżda wkoll fajls inqas filwaqt li timmaniġġja profili simili Développement bi jew mingħajr watch imma anke produzzjoni b'minifikazzjoni!

konklużjoni

Huwa pjuttost possibbli li tużah Browserify effettivament ma Gulp sakemm tilgħab bihom API. Dan iġiegħlek tmur ftit 'il barra mit-triq imsawta u tagħmel mingħajr plugins Gulp li normalment nużaw.