Gulp.js - Gulp.js

жұту
Gulp.js Logo.svg
ӘзірлеушілерЭрик Шоффалл
Бастапқы шығарылым26 қыркүйек 2013 жыл; 7 жыл бұрын (2013-09-26)[1]
Тұрақты шығарылым
4.0.2 / 6 мамыр 2019; 19 ай бұрын (2019-05-06)[2]
Репозиторий
Мұны Wikidata-да өңдеңіз
ПлатформаКросс-платформа
Қол жетімдіJavaScript
ТүріҚұралдар жинағы
ЛицензияMIT лицензиясы[3]
Веб-сайтgulpjs.com Мұны Wikidata-да өңдеңіз

жұту болып табылады ашық көзі JavaScript Эрик Шоффсталл жасаған құралдар жиынтығы[4] ағын ретінде қолданылады құрылыс жүйесі (көп пакетке бағытталғанға ұқсас Жасаңыз ) алдыңғы веб-әзірлеу.

Бұл орнатылған тапсырма жүгірушісі Node.js және npm сияқты веб-дамытумен айналысатын көп уақытты және қайталанатын тапсырмаларды автоматтандыру үшін қолданылады кішірейту, біріктіру, кэшті бұзу, блокты сынау, линттау, оңтайландыру және т.б.[5]

gulp өз міндеттерін анықтау үшін конфигурациядан артық кодты қолданады және оларды орындау үшін өзінің шағын, бір мақсатты плагиндеріне сүйенеді. Gulp экожүйесінде 3500-ден астам осындай плагиндер бар.[6]

Шолу

жұту[7] JavaScript-тегі құрастыру құралы болып табылады түйін ағындары. Бұл ағындар файлдық операциялардың байланысын жеңілдетеді құбырлар.[8] gulp файлдық жүйені оқиды және қолда бар деректерді бір мақсатты плагиннен екіншісіне .құбыр () бір уақытта бір тапсырманы орындайтын оператор. Барлық плагиндер өңделмейінше, түпнұсқа файлдарға әсер етпейді. Оны түпнұсқа файлдарды өзгерту немесе жаңаларын жасау үшін конфигурациялауға болады. Бұл көптеген плагиндерді байланыстыру арқылы күрделі тапсырмаларды орындауға мүмкіндік береді. Пайдаланушылар өз міндеттерін анықтау үшін өздерінің плагиндерін жаза алады.[9] Тапсырмаларды конфигурация бойынша орындайтын басқа жүгірушілерден айырмашылығы, gulp JavaScript пен оның міндеттерін анықтау үшін кодтауды білуді талап етеді. gulp - бұл құрастыру жүйесі, ол тапсырмаларды орындаудан бөлек, файлдарды бір жерден екінші орынға көшіруге қабілетті, құрастыру, орналастыру, хабарлама жасау, блокты сынау, линттау және т.б.[4]

Тапсырма жүгірушісі қажет

Тапсырмаларды орындаушыларға ұнайды және Грант емес, Node.js-та салынған npm, себебі бірнеше тапсырмаларды орындау кезінде негізгі npm сценарийлері тиімсіз npm сценарийлер, өйткені оларды орындау оңай және қарапайым, көптеген тәсілдер бар, олар gulp пен Grunt-тың бір-бірінен артықшылығы бар және әдепкі берілген сценарийлерге ие.[10] Грант файлдарды түрлендіру арқылы тапсырмаларды орындайды және уақытша қалталарда жаңа ретінде сақтайды, ал бір тапсырманың нәтижесі басқасына кіріс ретінде қабылданады және нәтиже тағайындалған қалтаға жеткенше жалғасады. Бұл көп нәрсені қамтиды Енгізу / шығару қоңыраулар және көптеген уақытша файлдарды құру. Сонымен, gulp файлдық жүйемен ағып жатыр және осы уақытша орналасулардың ешқайсысын қажет етпейді, осылайша енгізу-шығару қоңырауларының санын азайтып, өнімділігін жақсартады.[11] Тапсырмаларды орындау үшін Грант конфигурациялық файлдарды пайдаланады, ал gulp оның құрастыру файлын кодтауды қажет етеді. Grunt-та әр плагинді оның кіру орнын алдыңғы плагиннің шығуымен сәйкестендіру үшін конфигурациялау қажет. Өткізу кезінде плагиндер автоматты түрде құбырмен қапталған.[8]

Пайдалану

Жүктеу міндеттері а командалық интерфейс (CLI)[10] және екі файл қажет, pack.json, ол әр түрлі плагиндерді тізімге енгізу үшін қолданылады және gulpfile.js (немесе жай gulpfile), Бұлар, құрастыру құралы бойынша, пакеттің бастапқы кодының түбірлік каталогында жиі кездеседі. Өңдеу файлында құрастыру тапсырмаларын орындау үшін қажет логиканың көп бөлігі бар. Алдымен, барлық қажетті модульдер жүктеліп, содан кейін тапсырмалар файлда анықталады. Файлда көрсетілген барлық қажетті плагиндер devDependencies бөлімінде келтірілген[12] Әдепкі тапсырма орындалады $ gulp. Жеке тапсырмаларды gulp.task арқылы анықтауға болады және оларды орындайды жұтылу <тапсырма> <басқа тапсырма>.[13] Күрделі тапсырмалар плагиндерді көмегімен тізбектеу арқылы анықталады .құбыр () оператор.[14]

Гульффиланың анатомиясы

gulpfile - барлық операциялар анықталған жер. Гульффилдің негізгі анатомиясы жоғарғы жағына кіретін қажетті плагиндерден, тапсырмалардың анықтамасынан және соңында әдепкі тапсырмадан тұрады.[15]

Плагиндер

Тапсырманы орындау үшін қажет кез-келген орнатылған плагин келесі форматтағы тәуелділік ретінде жоғары деңгейге қосылуы керек.[13][14]

// тәуелділіктерді қосуvar жұту = талап ету ('жұтылу');

Тапсырмалар

Тапсырмаларды содан кейін жасауға болады. Өткізу міндеті анықталады gulp.task және бірінші параметр ретінде тапсырманың атын, ал екінші параметр ретінде функцияны алады.

Төмендегі мысалда жүктеме міндеттерін құру көрсетілген. Бірінші параметр taskName міндетті болып табылады және қабықтағы тапсырманы орындауға болатын атауды көрсетеді.[16]

жұту.тапсырма('taskName', функциясы () {  // бірдеңе жасау});

Сонымен қатар, бірнеше алдын ала анықталған функцияларды орындайтын тапсырма жасауға болады. Бұл функциялар массив түрінде екінші параметр ретінде беріледі. 

функциясы fn1 () {  // бірдеңе жасау}функциясы fn2 () { // бірдеңе жасау}// Функция атауларының жиымы бар тапсырмажұту.тапсырма('taskName', жұту.параллель(fn1, fn2));

Әдепкі тапсырма

Әдепкі тапсырма ақыр соңында анықталуы керек. Оны басқаруға болады жұту қабықтағы команда. Төмендегі жағдайда, әдепкі тапсырма ештеңе істемейді.[14]

// Gulp әдепкі тапсырмасыжұту.тапсырма('әдепкі', фн);

Әдепкі тапсырма жоғарыда анықталған тәуелді тапсырмалардың кез-келген санын автоматты түрде ретімен орындау үшін қолданылады. gulp сонымен қатар бастапқы файлдарды бақылай алады және файлдарға өзгерістер енгізілген кезде тиісті тапсырманы орындай алады. Ішкі тапсырмалар екінші параметрде жиым элементтері ретінде көрсетілуі керек. Процесті тек әдепкі тапсырманы орындау арқылы бастауға болады жұту команда.[15]

Мысал тапсырмалары

Кескін тапсырмасы

Модульдің анықтамасы басында болуы мүмкін Gulpfile.js сол сияқты:

var имиджемин = талап ету('gulp-imagemin');

Кейінгі сурет тапсырмасы кескіндерді оңтайландырады. gulp.src () .png, .gif немесе .jpg кеңейтілімімен барлық суреттерді каталогтан шығарады 'суреттер-ориг / '.

.құбыр (imagemin ()) табылған кескіндерді оңтайландыру процесі арқылы және .құбыр (gulp.dest ()) оңтайландырылған кескіндер «суреттер / 'қалтасы. Онсыз gulp.dest () суреттер шынымен оңтайландырылған болар еді, бірақ сақталмайды.[17] Оңтайландырылған кескіндер басқа қалтаға сақталғандықтан, түпнұсқа кескіндер өзгеріссіз қалады.[14]

// Суреттерге арналған тапсырмажұту.тапсырма('кескіндер', функциясы () {    қайту жұту.src('images / *. {png, gif, jpg}')        .құбыр(имиджемин())        .құбыр(жұту.dest('dist / images /'));});

Сценарийлерге арналған тапсырма

Келесі мысалда каталогтан барлық JavaScript файлдары сценарийлер / оңтайландырылған .pipe (uglify ()) және gulp.dest ('сценарийлер' ') шығысымен бірге түпнұсқа файлдарды қайта жазады.[18] Ол үшін алдымен талап етілгенге оралу керек өтірік плагин[19] қосулы npm пакетті орнатушы және оның басында gulpfile, модуль анықталуы керек. 

// Сценарий тапсырмасыжұту.тапсырма('сценарийлер', функциясы () {    қайту жұту.src('сценарийлер / *. js')        .құбыр(шіркін())        .құбыр(жұту.dest('сценарийлер /'));});

Тапсырманы қарау

Watch-тапсырмасы файлдардағы өзгерістерге жауап береді. Келесі мысалда аттары бар тапсырмалар берілген сценарийлер және кескіндер көрсетілген каталогтарда кез-келген JavaScript файлдары немесе кескіндер өзгерген кезде аталады.[20]

// Файл өзгерген кезде тапсырманы қайта орындаңызжұту.тапсырма('қарау', функциясы (cb) {    жұту.қарау('сценарийлер / js / **', сценарийлер);    жұту.қарау('кескіндер / **', кескіндер);    cb();});

Сонымен қатар, Watch-тапсырмаларының көмегімен браузердің мазмұнын жаңартуға болады.[21] Ол үшін көптеген опциялар мен плагиндер бар.

Әдебиеттер тізімі

  1. ^ https://libraries.io/npm/gulp
  2. ^ «gulp changelog». Алынған 2019-05-06.
  3. ^ «Github.com лицензиясы». Алынған 2016-05-30.
  4. ^ а б Джед Мао; Максимилиан Шмитт; Томаш Стрыжевский; Кэри Кантри Холт; Уильям Любельский (2014). Gulp Edge дамыту (1-ші басылым). Bleeding Edge Press. ISBN  978-1-939902-14-6.
  5. ^ «Gulp арқылы құрылыс - Smashing журналы». Smashingmagazine.com. Алынған 2016-12-14.
  6. ^ «gulp.js плагин тізілімі». Gulpjs.com. Алынған 2016-12-14.
  7. ^ «gulpjs / gulp». GitHub. Алынған 2016-09-22.
  8. ^ а б «substack / stream-анықтамалық: ағындармен түйіндік бағдарламаларды қалай жазуға болады». GitHub. Алынған 2016-12-14.
  9. ^ «gulpjs / gulp». GitHub. Алынған 2016-09-22.
  10. ^ а б «gulpjs / gulp». GitHub. Алынған 2016-09-23.
  11. ^ «Жаңадан бастаушыларға арналған Gulp». CSS-трюктер. 2015-09-01. Алынған 2016-12-14.
  12. ^ «install | npm Documentation». docs.npmjs.com. Алынған 2016-09-22.
  13. ^ а б «gulpjs / gulp». GitHub. Алынған 2016-09-23.
  14. ^ а б c г. Мейнард, Травис (2015). Gulp-ге кірісу. Packt Publishing Ltd. ISBN  9781784393472.
  15. ^ а б «Gulp.js-ке кіріспе - SitePoint». 2014-02-10. Алынған 2016-09-23.
  16. ^ «gulp / API.md at 4.0 · gulpjs / gulp · GitHub». GitHub. 2016-05-12. Алынған 2016-12-14.
  17. ^ «Durchstarten mit Gulp.js - Веб-сайттар оптимизациясы, Arbeitsabläufe automatisieren». Magazin.phlow.de. 2014-05-25. Алынған 2016-12-14.
  18. ^ «Алдыңғы жұмыс ағыны mit Gulp - Лихтенеккер». Liechtenecker.at. 2015-05-29. Алынған 2016-12-14.
  19. ^ «жұтқыншақ». Npmjs.com. Алынған 2016-12-14.
  20. ^ «gulp-watch». Npmjs.com. Алынған 2016-09-23.
  21. ^ «Browsersync + Gulp.js». Browsersync.io. Алынған 2016-12-14.

Әдебиет

  • Джед Мао; Максимилиан Шмитт; Томаш Стрыжевский; Кэри Кантри Холт; Уильям Любельский (2014). Gulp Edge дамыту (1-ші басылым). Bleeding Edge Press. ISBN  978-1-939902-14-6.
  • Ден Одель (2014). «Құралдар және автоматика». Pro JavaScript кодтау, мүмкіндіктер және құралдар. Апрес. ISBN  978-1-4302-6268-8.
  • Мейнард, Травис (2015). Gulp-ге кірісу. Packt Publishing Ltd. ISBN  9781784393472.

Сыртқы сілтемелер