Gulp - Ngwa eji arụ ọrụ na-egbu mgbu na mmepe


Gulp bụ obere ngwa ọrụ na-arụ ọrụ ugboro ugboro. Ọrụ ndị ahụ na-emegharị ugboro ugboro na-achịkọtakarị CSS, faịlụ JavaScript ma ọ bụ isi mgbe ị na-eji usoro na-emetụta faịlụ Javascript/CSS na-abụghị ọkọlọtọ, ị ga-achọ iji ngwá ọrụ akpaaka na-ejide faịlụ ndị ahụ, chịkọta ha ọnụ ma chịkọta ihe niile ka ihe nchọgharị gị wee nwee ike ịghọta ngwa ngwa. ya.

Gulp bara uru maka ịmegharị ọrụ ndị a:

  • Na-achịkọta faịlụ JS na CSS
  • Ibe ihe nchọgharị na-enye ume ọhụrụ mgbe ị na-echekwa faịlụ
  • Mee otu nnwale
  • Ntụle koodu
  • Na-edegharị faịlụ gbanwegharịrị gaa na ndekọ aha ebumnuche

Ka idobe faịlụ niile ịchọrọ ịmepụta faịlụ gulp, mepụta ngwa akpaaka gị ma ọ bụ rụọ ọrụ akpaaka, ịkwesịrị ịmepụta faịlụ ngwugwu.json. Faịlụ n'ụzọ bụ isi nwere nkọwa nke ihe dị n'ime ọrụ gị, ihe dabere na ị chọrọ iji mee ka ọrụ gị rụọ ọrụ.

N'ime nkuzi a, ị ga-amụta ka esi etinye Gulp na ka esi akpaaka ụfọdụ ọrụ dị mkpa maka ọrụ gị. Anyị ga-eji npm - nke na-anọchi anya njikwa ngwugwu node. Ejiri Node.js tinye ya, ma ị nwere ike ịlele ma ị tinyelarị Nodejs na npm na:

# node --version
# npm --version

Ọ bụrụ na i tinyebeghị ya na sistemụ gị, ana m akwado gị ka ịlele nkuzi: Wụnye Nodejs kacha ọhụrụ na NPM Version na Linux Systems.

Otu esi etinye Gulp na Linux

Enwere ike mezue ntinye nke gulp-cli na npm site na iji iwu a.

# npm install --global gulp-cli

Ọ bụrụ na ịchọrọ ịwụnye modul gulp na mpaghara (maka ọrụ ugbu a naanị), ịnwere ike iji ntuziaka dị n'okpuru:

Mepụta ndekọ aha ọrụ wee gaa na ya:

# mkdir myproject
# cd myproject

Na-esote, jiri iwu a ka ịmalite ọrụ gị:

# npm init

Mgbe ịmechara iwu a dị n'elu, a ga-ajụ gị ọtụtụ ajụjụ iji nye ọrụ gị aha, nkọwa ụdị na ndị ọzọ. N'ikpeazụ kwado ozi niile ị nyere:

Ugbu a, anyị nwere ike tinye ngwugwu gulp na ọrụ anyị site na:

# npm install --save-dev gulp

Nhọrọ --save-dev na-agwa npm ka imelite faịlụ ngwungwu.json na ndabere ọhụrụ.

Rịba ama na a ga-edozi ihe ndabere n'oge mmepe, ebe ndabere n'oge oge ịgba ọsọ. Ebe ọ bụ na gulp bụ ngwá ọrụ na-enyere anyị aka na mmepe, ọ dị mkpa ka edozi ya n'oge mmepe.

Ugbu a, ka anyị mepụta gulpfile. A ga-ahụ ọrụ ndị anyị chọrọ ịrụ na faịlụ ahụ. A na-ebunye ya na-akpaghị aka mgbe ị na-eji iwu gulp. Iji ndezi ederede, mepụta faịlụ akpọrọ gulpfile.js. Maka ebumnuche nkuzi a, anyị ga-emepụta ule dị mfe.

Ị nwere ike itinye koodu a na gulpfile.js gị:

var gulp = require('gulp');

gulp.task('hello', function(done) {
        console.log('Hello world!');
        done();
});

Chekwaa faịlụ ma ugbu a gbalịa iji:

# gulp hello

Ị ga-ahụ nsonaazụ ndị a:

Nke a bụ ihe koodu dị n'elu na-eme:

  • var gulp = chọrọ ('gulp'); – na-ebubata modul gulp.
  • gulp.task('hello', function(emela) {- kọwapụta ọrụ ga-adị site na ahịrị iwu.
  • console.log ('Ndewo ụwa!'); – na-ebipụta naanị \Hellow Ụwa! na ihuenyo.
  • emere(); – anyị na-eji ọrụ ịkpọghachite a iji kụziere gulp na ọrụ anyị agwụla.

N'ezie nke a dị n'elu bụ naanị ihe atụ iji gosi ka esi hazie gulpfile.js. Ọ bụrụ na ịchọrọ ịhụ ọrụ dị na gulpfile.js gị, ịnwere ike iji iwu a:

# gulp --tasks

Gulp nwere puku kwuru puku plugins dị, ha niile na-enye ọrụ dị iche iche. Ị nwere ike ịlele ha na ibe mgbakwunye Gulp.

N'okpuru ebe a, anyị ga-eji ngwa mgbakwunye minify-html na ihe atụ bara uru karị. Site na ọrụ dị n'okpuru, ị nwere ike wedata faịlụ HTML wee tinye ha na ndekọ ọhụrụ. Mana nke mbụ, anyị ga-etinye ihe mgbakwunye gulp-minify-html:

# npm install --save-dev gulp-minify-html

Ị nwere ike ime ka gulpfile.js gị yie nke a:

# cat gulpfile.js
// including plugins
var gulp = require('gulp')
, minifyHtml = require("gulp-minify-html");

// task
gulp.task('minify-html', function (done) {
    gulp.src('./src/*.html') // path to your files
    .pipe(minifyHtml())
    .pipe(gulp.dest('./dest'));
    done()
});

Mgbe ahụ ị nwere ike wedata faịlụ HTML site na iji iwu ndị a.

# gulp minify-html
# du -sh /src dest/

Gulp bụ ngwa ọrụ bara uru nke nwere ike inyere gị aka melite nrụpụta gị. Ọ bụrụ na ị nwere mmasị na ngwá ọrụ a, m na-akwado gị ka ịlele ibe akwụkwọ ya, nke dị ebe a.