Վերջերս Պուլպ. Մեծ ժողովրդականություն ձեռք բերելով, եւ պարզ է, թե ինչու: Այն ավելի արագ է, ավելի գեղեցիկ եւ հեշտ, քան Փայլուն, Ես հաճախ ստիպված էի աշխատել նրա հետ, բայց միշտ պատրաստ էի պատրաստի լուծումներ եւ լիովին չհասկացա, թե ինչպես է նա այդ ամենը արել: Այս շաբաթվա վերջին ես որոշեցի ապամոնտաժել եւ փակել այս փոքր խնդիրը: Վերցրեք սա եւ խոսեք այսօր:

Ինչ է ծոցի ծոցը:

Gulp- ը առջեւի հավաքման գործիք է: Այն թույլ է տալիս ավտոմատացնել կրկնող առաջադրանքները (CSS եւ JS ֆայլերի հավաքում եւ նվազեցում, գործարկել թեստեր, զննարկիչ եւ այլոց): Այսպիսով, Gulp- ը արագացնում եւ օպտիմիզացնում է վեբ զարգացման գործընթացը:

Տեղադրելով Gulp.

Տեղադրեք Gulp- ը բավականաչափ հեշտ է: Եթե \u200b\u200bինչ-որ բան չի աշխատում, գրեք մեկնաբանություններում կամ գայթակղեք ձեր խնդիրը: Այսպիսով, տեղադրման համար անհրաժեշտ է կատարել 3 քայլ.

• Տեղադրեք Gulp Global
• Տեղադրեք Gulp- ը որպես Devenependence (կախվածության համար կախվածությունը)
• Ստեղծեք GulPfile.js ֆայլ

Առաջին քայլը գլոբալորեն տեղադրելն է: Բացեք տերմինալը եւ գրեք.

nPM տեղադրում --Global Gulp

Դրանից հետո դուք պետք է տեղադրեք Gulp- ը որպես Devenepensens ձեր նախագծի համար: Համոզվեք, որ ունեք փաթեթ: JSON ֆայլ: Եթե \u200b\u200bդա այդպես չէ, ապա ստեղծեք այն `գրելով այն NPM նախաձեռնության վահանակի մեջ: Այժմ դուք կարող եք տեղադրել Gulp- ը որպես Devenepensence:

nPM տեղադրում --Սավ-Դեւ Գյուլ

Վերջապես, դուք պետք է ստեղծեք Gulpfile.js- ը ձեր նախագծի հիմքում, որը պարունակում է ձեր առաջադրանքները (առաջադրանքներ): Որպես միջանկյալ քայլ, մենք կտեղադրենք Gulp-Util plugin- ը: Show ույց տալ, թե ինչպես են տեղադրվում plugins.

nPM տեղադրում - Save-Dev Gulp-Util

Հիմա եկել է ժամանակը, գրել մեր առաջին խնդիրը: Բացեք նորաստեղծ Gulpfile.js ֆայլը եւ դրան գրեք հետեւյալ կերպ.

/ * Պատկեր: Gulpfile.js * / // Հավաքեք մեր բոլոր plugins var gulp \u003d պահանջում է ("Gulp"), Gutil \u003d պահանջում է («Gulp-Util»); // ստեղծել առաջադրանք, որը կկատարվի լռելյայն Պուլպ. Առաջադրանք («Լռելյայն», գործառույթ () (վերադարձը («Գութիլը»: Log ("Gulp- ն աշխատում է)))))

Եվ հիմա մենք պետք է գործենք ծոցային տերմինալում եւ կտեսնենք դրա նման մի բան.

Gulp [12:32:08] Օգտագործելով GulPfile ~ / Նախագծեր / Gulp-Scotch-Io / Gulpfile.js [12:32:08] «Լռելյայն» ... [12:32:08] Gulp- ն աշխատում է: [12:32:08] Ավարտվեց «Լռելյայն» 1 MS- ից հետո

Ակնարկ

Gulp- ն ինքնին շատ մասշտաբներ է: Բայց այն ամենը, ինչ դուք պետք է դառնաք առանձին plugins: Նրանք ծոցի հետ միասին հրաշքներ են ստեղծում:

Gulp API- ն շատ փոքր է, եւ պարունակում է ընդամենը 4 բարձրակարգ գործառույթ.

• gulp.task.
• gulp.src.
• gulp.dest.
• gulp.watch

gulp.task- ը սահմանում է մեր առաջադրանքները: Փաստարկները կոչվում են, կախվածություն (զանգված) եւ գործառույթը (հիմնական գործողություններ): Կախվածությունը կարող է լինել.

Պուլպ. Առաջադրանք ("MyTask", գործառույթ () (// ինչ-որ բան անել)); Պուլպ. Առաջադրանք («Կեռամեդասկ», [«MyTask»], գործառույթ () ( // ինչ-որ բան անել «MyTask» - ից հետո կկատարվի });

gulp.src- ը ցույց է տալիս այն ֆայլերը, որոնք մենք ուզում ենք օգտագործել: Այն օգտագործում է: Խողովակների մուտք դեպի ֆայլեր plugins- ի միջոցով:

gulp.- ն միավորներ է տալիս այն թղթապանակում, որում մենք ցանկանում ենք պահպանել փոփոխված ֆայլերը:

gulp.src եւ Gulp.dest օգտագործվում է ֆայլերի պարզ օրինակի համար.

Պուլպ. Առաջադրանք («CopyHTML», գործառույթ () ( // Պատճենել բոլոր HTML ֆայլերը աղբյուրից / հանրությունից / Պուլպ. ՊԵԿ («Աղբյուր / *. HTML»): Խողովակ (Gulp. Dest («հանրային»)); ));

Gulp- ում կառուցվում է ֆայլի արձագանքման արձագանքման համակարգ (Gulp.watch): Այս խնդիրը կարող եք օգտագործել այն մյուս առաջադրանքները, որոնք ձեզ հարկավոր են ֆայլերը փոխելիս:

Want անկանում եք ավելի շատ միավորներ հավաքել Google Page Speed- ում: Չգիտեք, թե ինչպիսի «առջեւի» ժողով է հավաքում: Ապա դուք այստեղ հետաքրքիր կլինեք:

Ինչ է node.js- ը:

Node.js- ը սովորական է «Հյուսիսային JavaScript»: Այս պլատֆորմը թույլ է տալիս գրել ծրագրեր `օգտագործելով JavaScript Syntax:

Կան ներդրումներ Windows- ի, Mac OS- ի եւ Linux- ի համար:

Հավաքածուն ներառում է փաթեթի մենեջեր NPM:Որի միջոցով կարող եք փաթեթներ տեղադրել:

Ինչ է ծոցի ծոցը:

Gulp- ը Node.js- ում գրված փաթեթ է, որն օգնում է վեբ վարպետներին ստեղծել նախագծեր դասավորության դասավորության մեջ:

GulP- ին տեղադրելու համար պետք է օգտագործեք հրամանի տողը:

NPM Տեղադրեք Gulp.

Այս հոդվածի վերջում կա մի ֆայլ, որը կօգնի հավաքել բնորոշ նախագիծ:

Այս օրինակում, ծոցի հետ, մենք կանենք հետեւյալը.

• Ավտոմատ օպտիմալացրեք պատկերները համացանցի համար.
• Հավաքեք մեկ նվազագույն ոճը նախանկարագրերից (SASS, SCSS);
• Հավաքեք մեկ նվազագույն ֆայլ սցենարներով:

Ինչպես հավաքել առջեւի ծայրը, օգտագործելով Gulp:

Հասկանալու համար, թե ինչպես է ամեն ինչ աշխատում, մենք կքննարկենք ամեն ինչ քայլերով:

Կառույցը կարելի է դիտել սքրինշոթում:

• Ակտիվների պանակ - պատկերի աղբյուրների, ոճերի եւ գրությունների համար;
• Հանրային թղթապանակ - Ծրագրի հավաքման արդյունքը տեղակայված կլինի դրանում.
• gulpfile.js - ֆայլ, որը նկարագրում է աշխատողի աշխատանքի տրամաբանությունը.
• packe.json- ը ֆայլ է, որը պարունակում է տեղեկատվություն Ծուղների ճիշտ գործողության համար օգտագործվող ծրագրերի եւ հավելվածների մասին:

փաթեթ: JSON:

Ֆայլի բովանդակություն.

(«Անուն». «Gulp_Project», «Version». «1.0.0», «Նկարագրություն». «Օրինակ», «Հիմնական». «Գումք». «Էխո»: Սխալ. Ոչ մի թեստ նշված չէ \\ "&& exit 1"), "Հեղինակ).« Դմիտրի Իլիչեւ »,« Լիցենզիա ». «« ^ 1.0.0 »,« Գուլպ-Կոնտակտ ».« ^ 2.6.0 »,« Գուլպ-uglify »,« ^ 1.2.0 »,« Գյուլպ-պատկեր ».« ^ 2.3.0 », -Sass ":" ^ 2.1.1 "))

Այս ֆայլը պարզ է հետեւյալ կերպ.

• Ծրագրի անվանումը Gulp_Project, տարբերակ եւ նկարագրություն;
• Հիմնական ֆայլը gulpfile.js;
• Ծրագրի հեղինակը, լիցենզիան. Այս ամենը այնքան էլ կարեւոր չէ, եւ պարզապես այդ ոլորտները կարող են դատարկ լինել.
• Հետաքրքիր կետը DEVEPEPENTIENTS է: Այն նկարագրում է կախվածությունները:

Ֆայլը կարող է խմբագրվել սովորական տեքստի խմբագրում: Այն կարող է ստեղծվել նաեւ նոր նախագծի համար NPM INT հրամանի միջոցով:

Այս հիման վրա Node.js- ը հասկանում է, որ մենք պետք է աշխատենք.

• Gulp Version 3.9.0 եւ ավելի բարձր հավաքման համար.
• Gulp-CSSO- ի 1.0.0 եւ ավելի բարձր տարբերակը - Plugin- ը `ծառայելու ոճերը (CSS);
• Gulp-Concat Version 2.6.0 եւ ավելի բարձր. Լրացրեք մի քանի ֆայլեր սոսնձելու համար.
• Gulp-uglify 1.2.0 եւ ավելի բարձր տարբերակը `JavaScript- ը ականազերծելու համար.
• Պատկերները օպտիմալացնելու համար Gulp-ImageMin տարբերակը 2.3.0 եւ վերեւում.
• Gulp-SASS տարբերակը 2.1.1 եւ ավելի բարձր. Plugin, SASS- ից CSS ստանալու համար (SCS):

Գերազանց! Դրանից հետո անհրաժեշտ է տեղադրել այդ ամենը: Դա արվում է հրամանի տողից: Ծրագրի թղթապանակում գտնվելիս անհրաժեշտ է կատարել հրամանը.

NPM տեղադրել

Բոլոր անհրաժեշտ տեղեկատվությունը կվերցվի փաթեթից: JSON:

Այս ամբողջ կախարդանքից հետո կհայտնվի Ծառայության թղթապանակ node_modules.

gulpfile.js.

Ֆայլի բովանդակություն.

/ * * * Որոշեք փոփոխականները * * / var gulp \u003d պահանջում են («Gulp»), // հայտնում է Gulp JS Uglify \u003d // Minification JS Concat \u003d Պահանջել ("Gulp-Concat") , // ֆայլի սոսնձման պատկերազարդ \u003d պահանջել («Gulp-Imagemin»), // CSSO- ի Minification- ը պահանջում է («Gulp-CSSO»), // Minification CSS SASS \u003d // SASS փոխակերպում (SCSS) CSS- ում / * * * Ստեղծեք առաջադրանքներ (համտեսներ) * * /// SASS առաջադրանք: Գործարկում է Gulp SASS հրամանը Gulp.task («SASS», գործառույթ () (Gulp.SRC ("./ Ակտիվներ / ոճեր / ոճ :SS") // ֆայլ (Սաս (): , sass.logerror)) // Փոխարկել SASS- ը CSS .Pipe (CSSO () ()) // Նախորդ քայլում ձեռք բերված է: Խողովակ (/ ./ Հասարակական / CSS / ")); // արդյունք Մենք գրում ենք նշված հասցեում)); // առաջադրանք «JS»: Գործարկում է Gulp JS Comment Gulp.task («JS», գործառույթ () (Gulp.src ([»./javascripts/jquery-2.1.4.min.js" .Այս. .js ". /" ./Assets/javascripts/script.js "]) // ֆայլեր, որոնք վարվում են. Կապիտ (« Min.js ») // արդյունքում ստացված (uglify ()) «Պորտ» Minifired.pipe (Gulp.dest ("./ Հանրային / JS /")) // Արդյունք, որը մենք գրում ենք նշված հասցեում)); // Խնդիր «պատկերներ»: Գործարկում է «Gulp Images» - ը GulP.Task- ի կողմից («Նկարներ», գործառույթ () (Gulp.src (". Ակտիվներ / պատկերներ / ** / *") // Մենք վերցնում ենք որեւէ ֆայլ ( Պատկերներ () // Մենք օպտիմիզացնում ենք պատկերները համացանցի համար: Խողովակ (GULP.Dest ("./ Հասարակական / պատկերներ /")) // Արդյունք, որը մենք գրում ենք նշված հասցեում)); // Առաջադրանք «Դիտեք»: Այն սկսվում է «Ծոցի ժամացույցի» հրամանով // Այն վերահսկում է ֆայլերի փոփոխությունները եւ ինքնաբերաբար սկսում է մյուս ծոցի մեծ առաջադրանքները («Դիտեք», գործառույթ (// ֆայլեր) Գործարկեք SASS Gulp առաջադրանքը: Դիտեք («./ Ակտիվներ / ոճեր / ** / *. SCSS», [«SASS»]); / js js files Թղթապանակը փոխում է: Դիտեք առաջադրանքը («./ Ակտիվներ / javascripts / ** / *. JS», [«JS»]); // Երբ փոխում եք ցանկացած ֆայլ «Նկարներ» թղթապանակում եւ ենթահողեր (" ./ Ակտիվներ / պատկերներ / ** / * ", [" Նկար "]);));

Հիմնական չիպ - առաջադրանքի մեջ Դիտել, Մեկ անգամ աշխատելուց հետո դուք կարող եք ապահով կերպով աշխատել աղբյուրների հետ, եւ նախագիծը ինքնաբերաբար հավաքվի ամեն անգամ, երբ պահում եք խմբագրելի ֆայլերը:

Արդյունքում մենք պատրաստ ենք ձեւանմուշը հրապարակել ինտերնետում:

Առաջադրանքները կարող են գործարկվել առանձին: Արդյունքում, հոդվածի վերջում արխիվում կգտնեք հետեւյալը.

ԻՇԽԱՆՈՒԹՅՈՒՆ Նշում Այս արխիվը բացելու համար, նախեւառաջ, ձեզ հարկավոր է կատարել NPM տեղադրման հրամանը: Այս թղթապանակը պարունակում է բավականին մեծ թվով ֆայլեր, եւ ամեն անգամ, երբ պատճենեք / տեղադրեք դրանք `ժամանակի վատնում:

Կալանքի տակ

Կան այլ օգտակար plugins- ի հսկայական հավաքածու: Օրինակ, մի հիանալի Jade ձեւանմուշ, որը երբեմն արագացնում է HTML կոդը, ինչ-որ մեկը կարող է ավելի քիչ եւ այլն անհրաժեշտ լինել:

Ներկայացված օրինակը պարզապես հարթակ է եւ ձեւանմուշ, որից հնարավոր է սկսել օգտագործել այս բոլոր գեղեցիկ չիպերը `առանց շատ գիտելիքների:

Առաջադրանքի պարագաներ եւ հավաքման համակարգերը խիստ արագացնում են աշխատանքը, ավտոմատացումը հավաքածուն, փորձարկում եւ այլ առօրյա առաջադրանքներ: Ինչպես ցանկացած այլ տարածքում, այս շուկայում ուժեղ մրցակցություն կա: Մինչեւ 2014 թվականը նրանց մեջ գերակշռում էր առաջադրանքը, բայց ավելի ուշ, մի փոքր թիմ առանձնացավ նախագծից, որը որոշեց կատարել այլընտրանքային գործիք, ծոցի, կողմնորոշված \u200b\u200bծրագրի հավաքույթ:

Օգնել ձեզ որոշել ընտրության վերաբերյալ, հոդվածի շրջանակներում հաշվի առեք հիմնական առաջադրանքի ղեկավարները.

• Փայլուն

Եվ նաեւ շոշափեք այլ միջոցներ եւ կառուցեք մեթոդներ:

Մի փոքր առաջ նայելով, ասենք, որ մենք օգտագործում ենք ծոցեր WAVEACCES- ում: Իրականացնել գործիքը, որը պարզվել է, շատ հեշտ է. Jetbrains արտադրանքի ընտանիքում (գաղափար, վեբ ստվարորություն, վերափոխող), որը մենք օգտագործում ենք երկար տարիներ, ունեն գերազանց plugins, Gulp / Gulj- ի հետ աշխատելու համար:

Առաջադրանք-մենեջեր ընդդեմ Ծրագրի հավաքման համակարգ. Որն է տարբերությունը:

Առաջադրանքի կառավարիչ - Առաջադրանքները ավտոմատացնելու գործիք: Վարձանակների կազմաձեւում կարող եք արձանագրել այս առաջադրանքների անունները. այն գործառույթը, որը կատարում է դրանք. Ստանդարտ գործողությունները արագացնելու համար հավելումներ, բայց առաջադրանքներն իրենք կարող են կամայական լինել: Օրինակ:

• Տեղակայման առաջադրանքներ (ZIP նախագիծ, ներբեռնեք նախագիծը հեռավոր սերվերի եւ TP)
• Ծրագրի հավաքման առաջադրանքներ (նվազագույնիֆիկացում, օպտիմիզացում, վավերականության եւ TP- ի համար)
• Տվյալների միգրացիայի առաջադրանքներ եւ այլն:

Նման գործիքների օրինակներ `Grunt եւ Gulp:

Հավաքման համակարգ - Սա գործիք է, որը լուծում է Java Script- ի նախագծի հավաքման միայն մեկ բնորոշ խնդիրը, որը ներառում է.

• Հասկացում,
• Վավերության համար ծածկագիրը ստուգում է,
• Կոդի ներդրումներ եւ TD.

Նման գործիքները ներառում են վեբ պայուսակ, բրոկկոլի, նախաճաշ, զննարկում եւ այլն:

Բոլոր նմանատիպ դիմակային առաջադրանքները կարող են ինքնաբերաբար իրականացվել այլ միջոցների միջոցով. Օրինակ, օգտագործելով NPM Run, որը մենք նույնպես կխոսենք հոդվածում:

Օրինակ

Հաշվի առեք Ծոցի նուի ֆայլը `նախագիծը հավաքելու համար.

Const Gulp \u003d Պահանջել ('Gulp'); Conf Coffee \u003d Պահանջել ('Gulp-Coffee'); Const Concat \u003d Պահանջել ('Gulp-Concat'); Const uglify \u003d Պահանջել ('Gulp-uglify'); Const Imagemin \u003d Պահանջել ('Gulp-Imagemin'); Const Sourcemaps \u003d Պահանջել ('Gulp-Sourcemaps'); Const del \u003d Պահանջել ('del'); )

Բայց ժողովը մեծ բնորոշ առաջադրանքի հատուկ դեպք է: Gulp- ի համար կարող եք գրել մեկ այլ կազմաձեւ `ասենք, տեղակայում.

Var gulp \u003d պահանջում է («Gulp»); var zip \u003d պահանջում է («Gulp-Zip»); var del \u003d պահանջում ("Del"); Var տեղադրում \u003d պահանջել («Gulp-Install»); var buequence \u003d պահանջել («Run-Sequence»); Var Awslambda \u003d պահանջել ("հանգույց-Aws-Lambda"); Gulp.task ("Մաքուր", գործառույթ (CB) (դել ([[»./ Dist", "./dist.zip"], ԿԲ);));)); gulp.task («Պատճեն», գործառույթ () ("index.js") .Pipe (Gulp.dest ("Dist /"));)); Gulp.task ("հանգույց-ռեժիմներ", գործառույթ ("./ փաթեթ. JSON") .Pipe (gulp.dest ("Dist /")) .Pipe ( // մաքրեք բոլոր AWS-SDK դիրեկտորիաները `հանգույցից_մոդուլներից: Մենք պետք է դրանք վերբեռնենք, քանի որ Lambda օրինակն արդեն // այն հասանելի կլինի աշխարհում: Gulp.Task («Մաքուր-Aws-SDK», գործառույթ (DEL (DELL / NODE_MODULES / ** / Aws-sdk "], հետադարձ կապ);)); gulp.task (" zip ", գործառույթ () (Վերադարձ դեպի Gulp.src ("! Dist / ** / * "]) .Pipe (ZIP ("Dist.Zip")) .Pipe (gulp.dest ("./"));); gulp.task (". / Dist .zip », պահանջեք (« ./ Lambda-config.js »), հետադարձ կապ);)); Gulp.Task (« Տեղակայել »(« Մաքրել »] , [«Նոդ-ռեժիմներ»], [«Մաքուր-AWS-SDK»], [ZIP »], [« Վերբեռնեք »], հետադարձ կապ);));

A- ն կարելի է նկարագրել նոր առաջադրանքների կողմից `որպես առկա համադրություն.

Gulp.task ('տեղակայել', Gulp.series («Մաքուր», «Պատճենել», «հանգույց-ռեժիմներ», «մաքուր-AWS-SDK», «zip»));

Սա է տարբերությունը: Հիմա հաշվի առեք հիմնական գործիքները:

gulp ընդդեմ Փայլուն

Այսպիսով, մեր առջեւ երկու խնդիր են Ranner. Gulp and Grunt. Երկուսն էլ օգտագործվում են Node.js- ի եւ NPM- ի կողմից, եւ դրանք առաջադրանքներն են դնում JavaScript- ի միջոցով:

Առաջին հայացքից նրանք նման են, սակայն, ծոցի մի բան ունի, որը ավելի հարմար է հավաքում. Հմտությունը գործընթացն ու կոմպակտ կազմաձեւում է, լակոնիկ API- ին զուգահեռ: Եկեք ավելի մոտ նայենք աշխատանքի սկզբունքին:

Threading Data

Մենք ունենք դրամաշնորհային ֆայլ, որը դարձնում է CSS հավաքը եւ վերամշակումը:

Դա կարելի է տեսնել, որ յուրաքանչյուր գործընթաց սկսելիս մորթուց.

բացում է ֆայլը.

Գործարկում է գործընթացը;

խնայում է փոփոխությունները.

Փակում է վերամշակված ֆայլը `դրանում հետեւյալ գործընթացը կանխելու համար.

Ֆայլը ձայնագրում է վերջնական թղթապանակում:

Այսինքն, շղթան ներառում է բազմաթիվ ժամանակավոր պանակներ ստեղծելը եւ միջանկյալ ֆայլերը խնայում.

Plugin- ը գրում են տարբեր հեղինակներ: Յուրաքանչյուր plugin- ը կարող է աշխատել ֆայլերի, շրջանցող, ֆայլերը պետք է ներկայացվեն որպես օբյեկտ: Ծուղում այս խնդիրն իրականացվում է Vynyl-F- ի վիրտուալ ֆայլերի համակարգի կողմից: Եվ ծոցի գաղտնիքը ֆայլը ուղարկում է հետեւյալ գործընթացին, առանց ժամանակավոր ֆայլեր ստեղծելու եւ առանց սկավառակի խնայելու:

Gulp- ի համար նույն կազմաձեւը արդեն ավելի շատ կոմպակտ է.

Դրա ընդհանուր աշխատանքային մեխանիզմը `հոսքային ֆայլեր, առանց սկավառակի գրելու:

Առաջադրանքի կատարման հաջորդականություն

Կա եւս մեկ տարբերություն. Լռելյայն ասինխրոնորեն կատարում է իրեր: Դրանում կան առավելություններ, եւ դեմ: Նույն կազմաձեւման ֆայլում մենք տալիս ենք հրամանը `հաշվելու ֆայլերը DEV / * SCSS գրացուցակից եւ դրանք ուղարկեք Սաս:

Հոսքերը ուղարկում են V.Pipe- ի արդյունքը: Մեթոդ: Խողովակը թույլ է տալիս հավաքել արդյունքը մասերի բուֆերային բուֆերային, եւ երբ այն լի է, անմիջապես տեղեկություններ ուղարկեք հոսքին, առանց գրացուցակի բովանդակությունը ստանալու:

Հաջորդական առաջադրանքի կատարումը Gulp- ին արագ եւ հզոր է դարձնում, բայց երբեմն անհրաժեշտ է առաջադրանքներ համաժամանակյա համաժամանակյա կատարել, ինչպես մռթմռթոցում: Խնդիրը կարող է լուծվել հետադարձ կապի միջոցով, հոսքի վերադարձը կամ խոստումը: Հաբրեի առաջադրանքը ապամոնտաժվում է ավելի մանրամասն: NPM.js կայքում կա այլընտրանք

Եթե \u200b\u200bդուք օգտագործում եք grut, բայց ձեզ ներգրավվում են հոսքային տվյալներով. Նույն Vynyl-FS մոդուլը կարող է օգտագործվել `այն Grunt- ում իրականացնելու համար:

Gulp Laconic API- ն ունի ընդամենը 5 մեթոդ.

Առաջադրանք (անուն, FN): Գրանցում է անունով մի առանձնահատկություն: Կարող եք տարբեր առաջադրանքներից կախվածություն նշել, եթե նախեւառաջ պետք է դրանք իրականացնել:

Գործարկել (առաջադրանքներ ...): Կատարում է առաջադրանքներ:

Դիտեք (Գլոբ, FN): Կատարում է գործառույթ, եթե ֆայլը գլոբալ փոփոխությունների տեղում է:

ՊԵԿ (Գլոբ): Որպես պարամետրը վերցնում է ֆայլի դիմակը եւ վերադարձնում է այս ֆայլերը ներկայացնող շարանը: Այնուհետեւ հոսքը կարող է փոխանցվել մուտքի հավելում:

DEST (Թղթապանակ): Ֆայլերը խնայում է նշված թղթապանակում:

Հատկապես կցանկանայի նշել «բնիկ» նախագծի API- ի () ներկայությունը (), քանի որ ֆայլերի մշտական \u200b\u200bփոփոխությունները հետեւելը հավաքի ամենակարեւոր բաղադրիչն է: API- ի հակիրճը հնարավորություն է տալիս կենտրոնանալ նախագծերը հավաքելու հիմնական խնդիրների վրա:

Այլընտրանքներ Gulp եւ Grunt

Չնայած ծոցի ժողովրդականությանը (օրական ավելի քան 130 ներլցումներ) եւ ավելի քան 86-ից ավելի ներլցումներ (օրական ավելի քան 86-ը `ըստ NPMJS.com- ի), մշակողները տեսնում են այս համակարգերում եւ դրանց թերություններում, հավելյալ Փաստաթղթեր, անհարմար կարգաբերում: Այլապես, դուք կարող եք հաշվի առնել ծրագրի հավաքման համակարգերը (օրինակ, բրոկկոլի եւ վեբ պայուսակ) կամ NPM սցենարներ:

Ծրագրի հավաքման համակարգեր

Դիտարկենք մի քանի այլընտրանքային լուծումներ հանգույցի վրա: JS պլատֆորմի վրա: Նախագիծը հավաքելու համար նրանք կարող են փոխարինել ծոցի եւ փնթփնթոց:

Այս համակարգը, ինչպես Պուլպը, առաջացավ որպես մրցակցային առաջադրանք-վաղ քրտնետեր, բայց մշակողները սկզբում պատկերում էին այն ճշգրիտ, որպես բոլոր առավելություններով եւ թերություններով կառուցելու օգնական: Նա չի «չի հասկանա» առանց պարամետրերի, որ * .js ֆայլը գրություններ է, * .Coffee- ը դագաղ է. Դրա կազմաձեւումը ավելի կոմպակտ է: Այնուամենայնիվ, հավաքման փուլում ցանկացած կամայական գործողություն նա չի կարողանա կատարել:

Ահա կազմաձեւման ֆայլի նախաճաշը: Այն գրված է դագաղների մեջ (կարող եք գրել նաեւ JS).

Exports.config \u003d Ֆայլեր. JavaScriptts. «JavaScripts / App.js». / ^ Հավելված / «JavaScripts / Vendor.js» - ը Դրանից հետո. [«Վաճառող / ոճեր / օգնականներ. CSS»] Կաղապարներ. Համատեղ. «JavaScripts / App.js»

Այստեղ ես ուզում եմ ուշադրություն դարձնել համատեղ եւ պատվերով օպերատորներին: Brunch Config մակարդակում, թվում է, որ դուք պետք է հավաքեք ֆայլեր ցանկալի կարգով: Արդյունքում, կազմաձեւիչը տեւում է 20-30 տող:

Բրոկկոլի:

Հնդկական գործիք, որը մշակման փուլում է: Նրա մշակողները ցանկանում էին ստեղծել մրցույթ արդեն ծոցի:

Համեմատ Bulp- ի հետ, բրոկկոլիի գործիքն օգտագործում է այլ սկզբունքներ.

Արագացման հավաք: Յուրաքանչյուր plugin- ը իրականացնում է Վեհաժողովի միջանկյալ պահոցը `մասնակիորեն ապստամբելով միայն անհրաժեշտ ֆայլերը:

Ծառերը ֆայլերի փոխարեն: Gulp- ը լավագույնս վերափոխում է մեկ ֆայլի մեկ եզրափակչի: Լռելյայն բրոկկոլին օգտագործում է միայն ծառեր, ոչ թե ֆայլեր, եւ դրանք դրանք վերածում են այլ ծառերի (այլասերված մեկ ուղղահայաց):

Այս պահին գործիքը ակտիվորեն զարգանում է, հայտնվում են նոր plugin- ներ, բայց լուրջ նախագծերի համար դա դեռ վաղ է. Լրացուցիչները բավարար չեն:

WebPack- ը ճկուն մոդուլային հավաքման համակարգ է: Այն ունի անսովոր շարահյուսություն, բայց ինքն է ընդունում ցանկացած մոդուլի շարահյուսություն:

Հասկանալով, որ դուք պետք է մրցեք այդպիսի հսկաների հետ, ինչպիսիք են ծոցը, ստեղծողները որոշեցին թեթեւացնել մեր կյանքը մեծ նախագծերի մշակման մեջ: Եւ ավելացրեց կոմունալ ծառայությունը.

Փայտի կախվածություններ եւ ռեսուրսներ ինքնաբերաբար կառուցելու ունակություն:

Դինամիկ բեռնման իրականացման հարմարավետ գործիքներ:

Համատեղելիություն գործնականում ցանկացած մոդուլների (դրամի, UMD, ES 2015, ընդհանուր JS, երրորդ կողմի մոդուլներ, որոնց հիման վրա հիմնված է դրանց վրա):

Համատեղելիություն նախամրցիկների հետ (SASS, Babel, սուրճի սցենար, տիպի սցենար եւ այլն):

Կենդանի վերբեռնումը (ասինխրոն կոշիկի տեխնոլոգիա, որի ընթացքում զննարկիչը թարմացնում է ոչ թե ամբողջ էջերը, այլ առանձին ծրագրեր):

Կոդը կիսելու եւ շատ փաթեթային ֆայլեր առաջացնելու ունակություն, խուսափելով մեկ ծանր փաթեթից: JS:

Ծածկագիրը օպտիմալացնելու ունակություն:

Առանձին-առանձին, կարող եք նշել կախվածության ճկուն մոտեցում: Մոդուլը կարող է լինել JS, CSS եւ HTML ֆայլ, եւ նույնիսկ JPEG PNG- ով: Կարող եք օգտագործել պահանջներ («Myjsfile.js») եւ պահանջել («MyCsssfile.css»), կրկին տարածել եւ օգտագործել արտեֆակտի մասերը:

Ավելին կարդացեք հնարավորությունների, գործիքների կազմաձեւերի մասին, plugins- ը կարելի է գտնել Gittub- ում, FrontTalks- ի շնորհանդեսում. Խորը ընկղմամբ վեբ-խցիկում:

nPM սցենարներ

Համագումարի առաջադրանքները կարող են լուծվել `օգտագործելով NPM գրություններ: Շատերը վախեցնում են այս գաղափարը. Քիչ հնարավորություններ, սցենարներ բավականաչափ արագ չեն, համեմատած Gulp- ի կամ WebPack- ի հետ: Այնուամենայնիվ, այս թերությունները չափազանցված են:

NPM սցենարի հնարավորություններ

NPM սցենարները բավականին առաջադրանքներ են լուծում: Օրինակ, կարող եք իրականացնել ծուղակների գրություններ.

(«Անուն». «NPM-Scripts-Meame», «Version». «1.0.0», «Նկարագրություն». «NPM Scripts օրինակ», «Գրություններ». «Էխո Ես վազում եմ նախքան սցենար»: , «Կառուցել». «Cross-Env node_env \u003d արտադրություն WebPACK» «Փակցրել ISCOILD». «Էխո Ես վազում եմ կառուցելուց հետո»)

Սցենարները բեռնված կլինեն ըստ նախածանցների: Նախապատվությունը, օրինակ, սկսվում է նախքան կառուցելը, քանի որ այն ունի նախածանց: Ըստ այդմ, PostBuild- ը կտեւի վերջին: NPM Run Build Team- ը դրանք կսկսի ցանկալի կարգով:

Դուք կարող եք զանգահարել մեկ սցենար մյուսից `քայքայելու համար Բարդ առաջադրանքներ, Օրինակ, այստեղ նախընտրական առաջադրանքը զանգում է մաքուր առաջադրանքը:

(«Անուն». «NPM- գրություններ-օրինակ», «ՎԵՐ TOREN». «1.0.0», «Նկարագրություն». «NPM Scripts օրինակ», «Մաքուր» ./Dist && Mkdir Dist «,« Նախընտրություն ».« NPM Run Clean »,« Կառուցեք ».« Խաչի նախանձ Նոդե_ենեւ \u003d արտադրություն Վեբփակ »))

Եթե \u200b\u200bխնդիրը չափազանց բարդ է, միշտ կարող եք անվանել առանձին ֆայլ:

(«Անուն». «NPM- սցենար-օրինակ», «ՎԵՐ TOREN». «1.0.0», «Նկարագրություն». «NPM գրություններ». «Սփռում». «Հոդ Build.js»))

Վեհաժողովի առաջադրանքների ծոցի հոսքի պատճառով այն դարձել է շատ ավելի հարմար, քան մռթմռթոցը: Բայց այն կարող է իրականացվել NPM- ի միջոցով: Windows- ում եւ Unix- ում հոսքը կատարվում է լռելյայն, առանց միջանկյալ ֆայլեր խնայելու:

Օրինակ, Unix- ում կարող եք պատրաստել GREP ֆայլի բովանդակություն եւ ուղարկել այն նոր ֆայլ:

Grep 'My Name' Bigfile.txt\u003e Linesthathavemyname.txt

Վերահղումը (\u003e) ցանկալի տողերը ուղարկում է նպատակակետային ֆայլ: Առաջադրանքն իրականացվում է առանց միջանկյալ ֆայլեր պահելու:

Բայց կան անհարմարություններ. Դուք չեք կարող թողարկել մեկնաբանություններ Package.json- ում: Ելքը կարող է լինել կարճ գրությունների ստեղծում `հասկանալի անուններով, որոնք ուղղված են ինչ-որ մեկ փոքր առաջադրանքի: Ավելի մանրամասն, առաջադրանքի պարագաներ NPM սցենարները փոխարինելու հարցը լավ լուսավորված է անգլախոս հոդվածում, թե ինչու ես լքեցի ծուլագույն եւ մռթմռթոց NPM գրությունների համար:

Արդյունք

Շուկայում կա հիանալի մրցակցային գործիքներ `սովորական առաջադրանքների ավտոմատացման համար (օրինակ, Gulp and Grount), ինչպես նաեւ նախագծի հավաքման ավտոմատացման գործիքներ (WEBPACK, Broccoli, Medusa, Browserify եւ այլն):

Եթե \u200b\u200bնայեք առաջադրանքի պաստառներին, ապա Gulp- ը `համեմատած Grount- ի հետ, ավելի պարզ է, հասկանալի եւ արտադրում է. Disk- ի գործողությունների խնայողությունների պատճառով հաղթում է: Բայց Grunt- ը ավելի շատ հավելումներ ունի (օրինակ, կա փորձարկման հավելում): Դրա պատճառով նա շարունակում է մնալ շատ երկրպագուներ:

Եթե \u200b\u200bմենք խոսում ենք միայն ժողովի մասին, ապա ծոցի բոլոր առավելությունները փնթփնթոցից տանում են.

Vynyl-FS մոդուլի կողմից տրամադրված ցանցի փոխանցման հոսքի ճարտարապետությունը:

Ըստ լռելյայն `ասինխրոն առաջադրանքի կատարումը:

Laconic API- ն ընդամենը 5 գործառույթ է:

Միեւնույն ժամանակ, WebPack Build- ը հավասարապես հետաքրքիր գործիք է: Այն տրամադրում է կենդանի վերաբեռնման տեխնոլոգիա, որն արագացնում է զննարկչի նորացումը: Սա հսկայական գումարած. Տեխնոլոգիան խնայում է ժամանակը `սեղմելու թարմացման կոճակը, որը մշակողները պետք է անընդհատ սեղմեն: Gulp- ն ունի նաեւ LIVE բեռնափոխադրումներ, բայց WebPACK- ը դժվար է համեմատել ծոցի կամ փնթփնթոցի հետ, քանի որ այն «խստացնում է» միայն կառուցապատման տակ եւ չգիտի, թե ինչպես կարելի է լուծել կամայական առաջադրանքները:

Այս բոլոր որոշումները հիանալի ինտեգրված են jet ակատանյութերից ապրանքների ընտանիքի հետ, այնուամենայնիվ, մենք WaveAcess- ում նախընտրում էինք փնթփնթալ, ինչպես Frowngess- ի, այնպես էլ առաջնային մասնագետների համար:

Եթե \u200b\u200bունեք հարցեր, եւ հարկավոր է զարգացնել վեբ նախագիծ, գրեք մեզ [Email պաշտպանված]

• Դիմային մաս
• Փայլուն
• Պուլպ.
• Առաջադրանքի վազողներ:

Այս հոդվածում մենք մանրամասն վերլուծելու ենք ծրագրի նախագիծը հավաքելու գործընթացը, որը բախվել է իմ ամենօրյա աշխատանքին եւ շատ ավելի հեշտ է առօրյային:
Հոդվածը չի պնդում, որ ճշմարտությունն է վերջին ատյանում, քանի որ այսօր կա մեծ թվով տարբեր հավաքներ եւ ժողովի մոտեցումներ, եւ բոլորը ընտրում են համտեսել: Ես միայն կբերենք իմ մտքերը այս թեմայի շուրջ եւ ցույց կտամ իմ աշխատանքային հոսքը:

Մենք կօգտագործենք Gulp կոլեկցիոներ: Ըստ այդմ, համակարգում պետք է տեղադրվեն JS հանգույցը: Հատուկ պլատֆորմի հանգույցները տեղադրելը մենք չենք հաշվի առնի, քանի որ Մի քանի րոպեից այն googles:
Եվ նախ կպատասխանեն հարցին, թե ինչու է ծուլարը:
Քիչ կամ ավելի քիչ քանդման այլընտրանքներից մենք ունենք փնթփնթոց եւ նախաճաշ:
Երբ ես նոր եմ սկսել գալ կոլեկցիոներներ. Շուկայում արդեն կային փնթփնթոց եւ ծոցեր: Առաջինը հայտնվեց ավելի վաղ, եւ այս մասին ավելի մեծ համայնք ունի եւ մի շարք plugins: Ըստ NPM- ի.
Grunt - 11171 փաթեթ
Gulp - 4371 փաթեթ

Բայց մորթուց ինձ թվում էր Չուրի բանավորի միջոցով: Եվ մի քանի հոդված կարդալուց հետո համեմատվում եմ. Ես նախընտրում էի ծուլոցը իր պարզության եւ տեսանելիության համար:
Brunch- ը համեմատաբար երիտասարդ նախագիծ է, այս պլյուսների եւ մինուսների բոլոր առավելություններով: Ես նրան հետաքրքրությամբ եմ դիտում, բայց դեռ չեմ օգտագործել:

Եկեք շարունակենք.

Ստեղծեք թղթապանակ մեր նախագծի համար, օրինակ, «Հաբ»: Բացեք այն վահանակում եւ կատարեք հրամանը

NPM նախաձեռնությունը

Պարզապես կարող եք սեղմել Enter- ը տեղադրողի բոլոր հարցերին, քանի որ Հիմա դա հիմնարար չէ:
Արդյունքում, ծրագրի պանակում մենք ստեղծում ենք File Package.json- ը, մոտավորապես այդպիսի բովանդակություն:

(«Անուն». «Հաբր», «վարկած». "1.0.0", "Նկարագրություն": "" "Main" Ոչ մի թեստ նշված «&& exit 1»), «Հեղինակ». «», «Լիցենզիա». «ISC»)

Դրա որոշ փոփոխություններ մեր կարիքների տակ.

(«Անուն». «Հաբր», «վարկած». "1.0.0", "Նկարագրություն": "" "," Հեղինակ ":" ISC "," Bulp ": "^ 3.8.1"))

devenependences Block- ում մենք նշեցինք, որ մեզ պետք են ծոցի եւ անմիջապես մենք կներկայացնենք մեր բոլոր plugins- ը:

Plugins:

Պատկերներով ես անում եմ նույնը, ինչ JS- ի հետ, բայց միայն կեղծիքի փոխարեն »ա - ես օգտագործում եմ ներկառուցված SCSS- ի ներմուծումը:
Մեր հիմնական MainSSS- ը այսպիսին կլինի.

/ * * Երրորդ կողմ * / @import "CSS: ../../ bower_components / normalize.css / norsion / * * Custom * / @import "մասնակի / ծրագիր";

Այս եղանակով պարզվում է, որ հեշտ է վերահսկել ոճերի միացման կարգը:
Ստուգեք մեր առաջադրանքը, վազելով

Gulp Style. Կառուցել

Մենք հավաքում ենք նկարներ

Նկարների առաջադրանքը նման կլինի.

Gulp.task ("Image: Build", գործառույթ () (Gulp.src (path.src.img) // Ընտրեք մեր նկարները: (imageviewbox: )], Օգտագործել, փոխկապակցված. True շմարիտ)) .Pipe (Gulp.dest (path.build.img)) // Նետում կառուցապատում (connect.reload ());)););

Ես օգտագործում եմ լռելյայն պատկերազարդ պարամետրերը, բացառությամբ փոխկապակցված: Ավելին կարդացեք այս plugin- ի API- ի մասին, որը կարող եք կարդալ:
Հիմա, եթե մենք որոշ նկար ենք դնում ՊԵԿ / IMG եւ գործարկել հրամանը

Gulp Image: Build

Այսպիսով, մենք կտեսնենք մեր օպտիմիզացված պատկերը շինարարության մեջ: Բացի այդ, ծոցերը սիրով կգրեն վահանակում, թե որքան տեղ է նա փրկել մեր կայքի օգտագործողների համար :)

Տառատեսակներ

Տառատեսակների միջոցով ինձ սովորաբար պետք չէ որեւէ մանիպուլյացիաներ իրականացնել, բայց ինչ էլ որ համբուրի պարադիգմի «Մենք աշխատում ենք ՊԵԿ-ում եւ հավաքում ենք կառուցում / տառատեսակներ: Այստեղ առաջադրանք

Gulp.task ("տառատեսակներ. Build", գործառույթ () (Gulp.src (path.src.fonts) .Pipe (gulp.dest (path.build.fonts))));

Հիմա եկեք սահմանեմ TAQ- ը «Կառուցենք» անունով, որը կսկսի այն ամենը, ինչ մենք այստեղ ենք արձանագրել

Gulp.task ("Build", [HTML: Build »," JS: Build "," ոճ: Build "," տառեր. Կառուցել "];

Ֆայլի փոփոխություններ

Որպեսզի մխեջենում անընդհատ բարձրանա, եկեք ամեն անգամ խնդրենք ծոցից, երբ փոխեք որոշ ֆայլ, ցանկալի առաջադրանքը գործարկելու համար: Դա անելու համար գրել նման առաջադրանք.

Gulp.task (Դիտեք ", գործառույթ () (Watch (գործառույթ (իրադարձություն, ԿԲ) (Gulp.Start (" HTML: Build ");« Watch.Start ("STYLE Կառուցել ");); Դիտեք (գործառույթ (իրադարձություն, CB) (« Gulp.Start »(« JS: Build »);); Պատկեր (Image: Build: Build «);)); Դիտեք (գործառույթ (իրադարձություն, ԿԲ) (Gulp.Start (« տառատեսակներ.

Մենք հասկանում ենք, որ խնդիրներ չպետք է լինեն: Մենք պարզապես անցնում ենք ճանապարհի փոփոխականի սահմանված մեր ուղիներով, եւ գործառույթում, որը կոչվում է ֆայլը փոխելիս, սկսեք անհրաժեշտ առաջադրանքը:
Փորձեք վահանակով վազել

Gulp Watch.

Եւ փոխել տարբեր ֆայլեր:
Դե, ոչ թե զով?)

Վեբ սերվեր:

Վայելելու համար Miracle Livereload - Մենք պետք է ստեղծենք տեղական վեբ սերվեր: Դա անելու համար գրեք հաջորդ առաջադրանքը.

Gulp.task ("WebServer", Function () (Connect.Server ((Հոստի. Server.host, Port: Server.hport, Lixeeload));));));

Մեկնաբանելու նույնիսկ ոչինչ չկա: Մենք պարզապես կսկսենք սերվերը վայելել հյուրընկալողի եւ նավահանգստի վրա, որը մենք սահմանել ենք սերվերի օբյեկտում:

Մաքրում

Եթե \u200b\u200bավելացնեք մի նկար, ապա գործարկեք պատկերը. Կառուցեք առաջադրանքը, ապա հեռացրեք նկարը `այն կմնա կառուցապատման պանակում: Այնպես որ, հարմար կլինի `պարբերաբար մաքրել այն: Ստեղծեք այս պարզ առաջադրանքի համար

Gulp.task ("Մաքուր", գործառույթ (CB) (RIMRAF (ուղի .Clean, CB);));

Հիմա հրամանը սկսելիս

Գուլպը մաքուր է:

Պարզապես ջնջել է կառուցված պանակը:

Եվ, վերջապես, փոքրիկ ողորմությունը

Այս խնդիրը կրիտիկական գործառույթ չի կրում, բայց ինձ շատ դուր է գալիս :)

Gulp.task ("OpenBrowser", գործառույթ () (opn ("http: //" + սերվեր .Host + ":" + սերվեր. ");)));

Երբ մենք պետք է, մենք այն գործարկենք, եւ մեր զննարկիչը ինքնաբերաբար կբացի ներդիրը մեր նախագծով:
Զով :)

Վերջնական համաձայնագիր

Վերջին բանը `մենք կսահմանենք լռելյայն առաջադրանքը, որը կսկսի ամբողջ ժողովը:

Gulp.task («Լռելյայն», [«Կառուցել», «WebServer», «Դիտեք», «Բացաբոզեր»]);

Վերջապես, ձեր Gulpfile.js- ը նման բան կանդրադառնա:
Այժմ ելույթ ունենալ վահանակում

Եւ voila :) Ձեր նախագծի համար աշխատանքային մասը պատրաստ է եւ սպասում է ձեզ:

Մի քանի բառ եզրակացության մեջ

Այս հոդվածը կարծում էր, որ ենթակայության ենթակայության հիշատակի հիշատակի միջոց է `առաջնային նախագծեր կառուցելու եւ այս փորձի փոխանցումը նոր ծրագրավորողներին փոխանցելու համար: Անհրաժեշտ չէ այս մարմնավորում օգտագործել ձեր նախագծերի վրա: Կա Yeoman .io, որտեղ գեներատորները կգտնեք գրեթե ցանկացած կարիքների համար:
Ես գրել եմ այս կոլեկցիոները 2-ի համար:
- Ես սիրում եմ օգտագործել իմը իմ մեջ hTML կոդ
- Գրեթե բոլոր շինություններով, որոնք ես հանդիպեցի, ժամանակավոր պանակ է օգտագործվում (սովորաբար. TMP /) `հավաքման միջնորդի արդյունքները ձայնագրելու համար: Ինձ դուր չի գալիս այս մոտեցումը եւ ուզում էի ազատվել ժամանակավոր պանակներից:
- Եվ ես ուզում էի այս ամենը ինձ համար տուփից :)

Կոլլեկտորի իմ աշխատանքային տարբերակը կարող եք ներբեռնել իմ github- ում:

Հուսով եմ, որ հոդվածը պարզվել է, որ օգտակար է ձեզ համար :)

Սիրված Բոլոր սխալները, թերությունները եւ կոշիկները. Խնդրում ենք գրել անձնական

Gentleman- ի առջեւի մշակողի հավաքածուն

Գաղտնիք չէ, որ ժամանակակից առջեւի մշակողը իր ձեռքերում պետք է ունենա նախագծի հավաքման գործիքներից մեկը, ինչպիսիք են Պուլպ. կամ Փայլուն, Մինչեւ որոշ ժամանակ փխրուն գրումը այս հարցում մենաշնորհ է կատարել, բայց մշակողը մորթուց բաժանված է, որոշեց ստեղծել իր թեթեւ եւ արագ առաջադրանք-մենեջեր:

Այս հոդվածում մենք պատրաստելու ենք մեկնարկային փաթեթը `այն հետագա նախագծերում օգտագործելու համար:

Ինչ ենք մենք օգտագործում տեխնոլոգիան

• Ծրագրային ապահովման պլատֆորմ. Node.js.
• CSS նախ-պրոցեսոր. Ստիլուս:
• Առաջադրանքների ղեկավար. Պուլպ.

Ինչու առաջնային մենեջեր առաջադրանքների ղեկավար

Մինչեւ վերջերս ես ինքս մտածում էի, թե ինչու պետք է ժամանակ անցկացնեմ առաջադրանքի մենեջերի կազմաձեւումը կազմաձեւելու համար, եթե ես հաղթահարեմ դասավորության դասավորությունը, քանի դեռ չեմ սկսել օգտագործել CSS- ի նախնական վերամշակողները:

CSS Pre-Properors - Իսկապես հարմար եւ արագացնում է գրելու ոճերը, բայց նախնական պրոցեսորի վրա գրված ծածկագիրը կազմելով կանոնավոր CSS- ի, ոչ այնքան չնչին խնդիր, որը լուծվում է մեկ կոճակով: Այստեղ մենք կողմ ենք փրկարարին, եւ առաջադրանքի կառավարիչը գալիս է: Կոդի փոխարկումը տեղի է ունենում այն, որ սեղմելով կոճակը, ամեն ինչ տեղի է ունենում առցանց, առանց ձեր մասնակցության (իհարկե, եթե ամեն ինչ ճիշտ կազմաձեւեք):

Իհարկե, առաջադրանքների ղեկավարի առաջադրանքները շատ ավելին են գնում դեպի վերափոխման կոդի փոխարկման հետ կապված գործընթացները մաքուր CSS: Ծրագրի կոլեկցիոները նույնպես զբաղվում է նախարարությունում, համատեղում, ստուգելով սխալների ծածկագիրը, պատկերը հավաքելով Sprites- ում եւ այլն: Դուք պարզապես ստեղծում եք ձեր նախագծում շատ տրամաբանական-առանձնացված ֆայլեր, որոնք այնուհետեւ հարմարավետորեն հավաքվում են մեկ գրացուցակում արդեն մշակված եւ պատրաստ են աշխատել զննարկիչում: Բայց դա մի փոքր ուշ է, եւ հիմա սկսենք նախապատրաստվելուց:

Տեղադրում Node.js.

Եթե \u200b\u200bգիտեք, թե ինչպես տեղադրել Node.js- ը ձեր համակարգին եւ օգտագործել այն, կարող եք ապահով կերպով գնալ հաջորդ վերնագիր:

Ես կցանկանայի անհապաղ նախազգուշացնել, որ նկարագրված բոլոր գործողությունները տեղին են Mac OS X.Բայց, ընդհանուր առմամբ, կիրառելի է ուրիշների համար Unix Համակարգեր: Զարգացում Task Manager- ի եւ հրամանի տողի միջոցով Պատուհաններ Ինչ-որ բան ավելի դժվար է, եւ այստեղ այն չի նկարագրվի: Այնուամենայնիվ, եթե դուք դեռ օգտագործում եք Windows- ը եւ պատրաստ չեք հրաժարվել դրանից, ես կարող եմ տեղադրել վիրտուալ մեքենա օգտագործելու տարբերակ Ubuntu:Ես օգտագործում եմ այս տարբերակը իմ տնային համակարգում, որն ընդհանուր առմամբ բավականին հարմար է:

Այսպիսով, առաջին բանը, որ մենք պետք է ներբեռնենք եւ տեղադրենք Node.js փաթեթը ձեր համակարգին `վահանակի միջոցով հանգույցի հետ աշխատելու համար: Գնացեք պաշտոնական կայքի հանգույցը .JS եւ ներբեռնեք թարմ կայուն տարբերակ ձեր համակարգի համար: Տեղադրվելուց հետո հանգույցի հրամանը պետք է հասանելի լինի ձեր հրամանի հուշում: Ստուգելու համար, որ ձեր հանգույցն աշխատում է, հրամանը հրավիրեք հրամանի հուշում

Ի պատասխան, տեղադրված է տեղադրված Node.js- ի տարբերակը: Եթե \u200b\u200bամեն ինչ լավ է, շարունակեք:

Ծրագրի դիրեկտորիաների կառուցվածքը

Մեր նախագծերում մենք կօգտագործենք կառուցվածքի միասնական տարբերակը.

Զարգանալ - արմատների զարգացման կատալոգ └─start - Ծրագրի կատալոգ ├─ - Bild հավաքված առաջադրանքների ղեկավար ├─resource. - զարգացման բոլոր աղբյուրների ֆայլերը (.psd եւ այլն) ├─SRC. - Զարգացման կատալոգ │├─css. - ոճի զարգացման կատալոգ ││├─images. - Բոլոր ստատիկ պատկերները ││├─Sprites. - Sprite- ում հավաքված պատկերը Սկավառակ - Պատվերով ֆայլեր ոճեր │││├─mixins.styl - Պատվերով խառնուրդներ │││└─sty.styl. - անհատական \u200b\u200bոճեր ││├─vendor - Մյուսները Արտաքին ֆայլեր ոճեր ││└─sty.styl. - Հիմնական ոճային ֆայլ │├─onfts. - տառատեսակների կատալոգ │├─img - Կատալոգ Դինամիկ պատկերներ │├─js. - JavaScript Development կատալոգ ││ ├ _ *. JS - կողմնակի ֆայլեր JS ││├─_main.js. - Հիմնական մաքսային JS ││└─ain.js. - Հիմնական JS ֆայլ │├─.htaccess - Կոնֆիկ սերվերի համար │├─ * .html - Էջի նշման ֆայլեր │├─pages.html. - Պատկերացրեք հղումներով բոլոր էջի ձեւանմուշին │├─index.html: - Ինդեքս ֆայլի նշման ֆայլ │└─clude - plug-in Նշման ֆայլերի կատալոգ │ └─ * .html - plug-in Նշման ֆայլեր (Header.html եւ այլն) ├─package.json - NPM խմբաքանակի մենեջերի կազմաձեւում ├─gulpfile.js. - Config Gulp. ├─stylus.template.mustache. - դիմակ ընթերցանության համար ├─todo. - Todo թերթ └─.gitignore. - կազմաձեւել GIT- ին

Տեղավորում

CD Command- ի միջոցով օգտագործվող վահանակում գնացեք զարգացման արմատային գրացուցակ, ստեղծեք մեր MKDIR մեկնարկի նախագծի կատալոգ եւ առաջ շարժվեք դրան:

Ծրագրի համար մենք կկազմենք մեր կառուցվածքը վահանակի միջոցով.

mkdir Build Resource SRC SRC / CSS SRC / CSS / Նկարներ SRC / CSS / SRC / CSS / մասնակի SRC / CSS / MEMPLATE SRC / FORTS

Ստեղծեք նախնական ֆայլերը ծրագրի կառուցվածքում.

touch Gulpfile.js stylus.template.mtach .Գիտագնաց SRC / .Htaccess src / css / styles.styl srs / partial / mixin.js SRC / JS / _Main.js SRC / Կաղապար / էջեր. HPTML SRC / Կաղապար / index.html SRC / Կաղապար / Ներառված / վերնագիր

Ստեղծեք փաթեթ: JSON

Բոլոր թռուցիկ հարցերը կարող են խցկվել մուտքագրման միջոցով, հանգույցը դրանք կդնի լռելյայն արժեքներ կամ լրացնելու առաջարկվող դաշտերը:

.gitignore.

Խոսելով մի gita, որը կատալոգները անտեսում եւ չեն լրացնում պահեստը.

/ Node_modules / / build / / ռեսուրս /

Node_Modules Directory- ը կհայտնվի plug-ins- ին տեղադրելուց հետո եւ պարունակում է ծրագրի բոլոր հանգույցների հավելվածները:

ՊԵԿ / .Հետիկա:

Սերվերի համար լրացուցիչ gzip սեղմում եւ պահոցներ տեղադրում.

AddoutPutPyFilterbyType Deflate Text / HTML Տեքստ / Պարզ տեքստ / XML Տեքստ / CSS Տեքստ / JavaScript դիմում / JavaScript # Ծառայել GZIP սեղմված CSS ֆայլերին, եթե դրանք գոյություն ունեն # եւ հաճախորդը ընդունում է gzip: Վերաշարադրել «% (http: Ընդունել-կոդավորումը)" GZIP "REWRITEVOND"% (հարցում_ֆիլենամ) \\. GZ "-s վերաշարադրող" ^ (. *) \\. Գցորդներ «1 \\ .css \\ .գ JS ֆայլեր, եթե դրանք գոյություն ունեն # եւ հաճախորդը ընդունում է gzip: Վերաշարադրել «% (http: Ընդունել-կոդավորում)" GZIP «REWRITEVOND»% (FUSE_FILENAME) Տեսակները եւ կանխեք mod_deflate կրկնակի gzip- ը: Վերանշանակվել է "\\ .css \\ .gz $" "-" վերաշարադրող "\\ .js \\ .gz $" "-" # Ծառայել կոդավորման ճիշտ տեսակը: Վերնագիր Append Content-կոդավորող Gzip # Force վստահված անձինք առանձին-առանձին Cache Genpipped & # ոչ gzipped CSS / JS ֆայլերը առանձին: Վերնագիր Append Vary Accent-Cododing ExperSebyType Դիմումի վերաբերյալ դիմում / JavaScript "Մուտք գումարած 1 ամիս" Expressbytype Image / JPG "Access Plus 1 ամիս" Մուտք 1 ամիս "Մուտք 1 Ամիս «ExperSyType Text / CSS» Մուտք գումարած 1 ամիս »

sRC / CSS / Styles.styl

Միացրեք օգտվողի ոճի ֆայլերը հիմնական ոճային ֆայլին.

@import «մասնակի / ոճեր»

Խնդրում ենք նկատի ունենալ, որ .Թիլային ֆայլերը միացնելու համար երկարացումը չի նշվում, ըստ STYLUS PRO պրոցեսորային կոդի իմաստաբանության: Օրինակ, ոճերը մեկ այլ երկարաձգում կապելու համար:

ԱՆԵԼ.

Այս էջը պարունակում է TODO- ի զարգացման թերթ: Կարող եք ավելին կարդալ այս ֆայլի հետ աշխատելու համար Plaintasks Plaintasks plugin էջի համար `Sublime տեքստի համար:

Կառույցն ավարտված է:

Plugins տեղադրելը NPM խմբաքանակի մենեջերի միջոցով

Node.js- ը `լռելյայն ներառում է NPM խմբաքանակի մենեջեր, որի պահեստներում հավաքվել են բազմաթիվ plugins շատ plugins, որի հետ մենք պետք է աշխատենք:

Պլաստիկ plugin- ը սահմանելը

Նախ անհրաժեշտ է տեղադրել գլոբալ (առանց ստեղնաշարի) մեր համակարգում

npm տեղադրել Gulp -g

Դա ձեզ համար մեկ անգամ պետք է, հետագա Համաշխարհային տեղադրում պարտադիր չէ:

Այժմ դուք պետք է տեղադրեք Gulp տեղական նախագծի կատալոգում

nPM Տեղադրեք Gulp --Save-Dev

Key --Save-Dev- ն առաջարկում է, որ plugin- ի մասին տեղեկատվությունը (անունը պահեստում եւ դրա վարկածով) կավելացվի փաթեթին: JSON COMMIG եւ հիշեք դա այս նախագծի համար: Քանի որ մենք չենք պահում ծանր քաշային թղթապանակ Node_Modules հավելվածներով, որոնք պահվում են կազմաձեւման մեջ տեղադրված հավելվածների վերաբերյալ, թույլ կտա միայն մեկ NPM I հրամայել նախագծի բոլոր անհրաժեշտ plugins- ը:

Յուրաքանչյուր թիմի համար կան կրճատումներ, ուստի վերեւում գտնվող հրամանը կարող ենք գրել ավելի կարճ ձեւաչափով

Ապագայում մենք կօգտագործենք նաեւ թիմերի կրճատ ձեւաչափը:

Ստիլուս plugin Gulp- ի համար

Մեր նախագծերում մենք օգտագործում ենք ստիլուսի նախնական պրոցեսոր, որը լավ է աշխատում եւ կազմվում է հանգույցի վրա:

Տեղադրեք:

npm i gulp-stylus -d

CSS վերամշակման plugins

Avtoprefikser - Ավտոմատ կերպով փոխարինում է նախածանցները -MS ----- Moz - WebKit - ցանկալի հատկություններում.

npm i gulp-autoprefixer -d

CSS Minification - Plugin- ը մխրճում է ելքային CSS ֆայլը, որը վերացնում է այն ավելորդ բացերից եւ ներդիրներից.

npm i gulp-minify-css -d

Պատկերի մշակման plugins

Նկարների ասոցիացիա Sprites - Այլեւս անհրաժեշտ չէ ծախսել թանկարժեք ժամանակի ժամերը `բոլոր պատկերները ցողուններով համատեղելու համար, այնուհետեւ հաշվարկեք դրանց կոորդինատները, այս ամենը ինքնաբերաբար կդարձնի այս plugin- ը ձեզ համար.

npm i gulp.spritesmith -d

Ավելացնել նախկինում ստեղծված ստիլուսին:

((# - (անուն)) \u003d ((px.x)) ((px.offset_x)) ((px.offset_y)) ((px.width)) (( px.height)) ((px.total_width)) ((px.total_height)) »(((փախչող_իմացիա))»; (/ Նյութեր))

Ավելացնել հատուկ խառնուրդներ Mixins.styl:

Spritewidth ($ sprite) , Ընտրող ()) &&! Match («Ակտիվ», ընտրող ()) Spriteimage ($ Sprite) Spriteposition ($ Sprite) Spritewidth ($ Sprite)

Միացրեք MixIns- ը եւ արտադրված ֆայլը `հիմնական SRC / CSS / STYES.STYL STYLE ֆայլի համար:

@Import «Մասնակի / սպրիտ» @Import «Մասնակի / Mixins»

Նկատի ունեցեք, որ Sprites- ը պետք է միանա օգտագործողի ոճերին @Import «Մասնակի / ոճերը»

Պատկերի օպտիմիզացում համացանցի համար - plugin- ը ավտոմատ կերպով կկտրի բոլոր ավելորդ տեղեկատվությունը ձեր պատկերներից եւ սթափեցրեք դրանք մինչեւ օպտիմալ չափի, ինչը որոշ դեպքերում թույլ կտա նվազեցնել պատկերների շրջանակը մինչեւ 90%:

npm i gulp-imagemin -d

JavaScript- ի վերամշակման plugins

Minification JS. - plugin- ը ավելի է մնում ձեր JS կոդը իջեցնելով դրա ներբեռնման ժամանակը.

npm i gulp-uglify -d

JS Tracking - plugin- ը ստուգելու է ձեր JS կոդը `բոլոր անհամապատասխանությունները հայտնաբերելու համար եւ դրանք կբերի մխիթարության մեջ.

npm i jshint gulp-jshint -d

HTML մշակման plugins

Միացված ֆայլեր - plugin- ը թույլ է տալիս պահպանել կայքի ստատիկ մասերը, ինչպիսիք են վերնագիրը, ոտնահետքը, մի կողմ եւ այլն, առանձին ֆայլերում եւ դրանք միացնել մեկ այլ ֆայլի ցանկացած մասի: Չկա ավելի երկար, վերնագրում փոքր փոփոխությունների դեպքում փոփոխեք տասնյակ կամ նույնիսկ հարյուրավոր HTML էջերի էջեր.

npm i gulp-rigger -d

Plugin- ը նույնպես համատեղելի է JS- ի հետ:

Միացրեք օգտագործողին JS Main JS SRC / JS / Main.JS Ծրագրաշարի կառուցում.

// \u003d _main.js.

Միացեք index.html ֆայլեր Header.html եւ Footer.html

// \u003d ներառել / Header.html // \u003d ներառել / Footer.html

Այլ plugins

Լինլանդիա: - plugin- ը վերացնում է ձեզ `էջը վերագործարկեք զննարկչի մեջ ամեն անգամ` փոփոխությունները տեսնելու համար, այժմ դա ինքնաբերաբար տեղի է ունենում փոփոխված ֆայլը խնայելիս:

npm i gulp-connect -d

Պաշտպանեք ծոցը մեկնումից - Երբեմն պատահում է, որ ծոցերը կարող են դուրս գալ դիտորդական ռեժիմից `քննադատական \u200b\u200bսխալների դեպքում (հիմնականում` JS): Հնարավորության դեպքում այս plugin- ը փորձում է գործնական թողնել Gulp գործընթացները.

npm i gulp-plumber -d

Վերանվանեք ֆայլերը - Ֆայլերի անուններով ամենատարածված աշխատանքը: Plugin- ը թույլ է տալիս ամբողջությամբ վերանվանել ֆայլերը, փոխել ընդլայնումը, ավելացնել նախածանցներ եւ Postfix, օրինակ, ոճային ոճը: styly.min.css:

npm i gulp-english -d

Խելամիտ - Երբեմն անհրաժեշտ է կառուցապատման գրացուցակի կատալոգը լրացնել, փրկարարի մեջ կա plugin:

Աղբյուր - Արդյունաբերությունից հետո ձեր ֆայլերը ընթերցվում են զննարկչի կարգաբերման միջոցով, դուք պետք է ավելացնեք աղբյուրի ֆայլեր.

npm i gulp-sourcemaps -d

Երկարացված ժամացույցի հատկություններ: - Plugin- ը խելացի է դարձնում, այժմ այն \u200b\u200bչի վերագրում կառուցման բոլոր ֆայլերը, երբ փոխում եք ամբողջ ֆայլը, վերափոխված է, որը խնայում է ժամանակը եւ ռեսուրսները.

npm i gulp-watch -d

Ստուգեք փաթեթը .Json

Ամենից հետո Տեղադրված plugins, Ստուգեք մեր փաթեթը: Նա պետք է ունենա հետեւյալ տիպի մասին.

(«Անուն». «Սկսել», «վարկած». «1.0.0», «Նկարագրություն». «Սկսել փաթեթը առջեւի զարգացման համար», «Հեղինակ,», «Լիցենզիա», «Կախվածություններ». (), «Devrependence». «Վերջին», «Գյուլպ-Autoprefixer». «ՎԵՐԻՆ», «ԳՈՒԼՊ-ԿՈՆԵՔՍ». «ՎԵՐԻՆ», «JSHINT». «ՎԵՐԻՆ», «JSHINT-ITEBLIGLE». «ՎԵՐԻՆ», «ՊՈՒԼՍ-JSHINT». «ՎԵՐԻՆ», «ՊՈՒԼՊ-ՆԵՐԿԱՅԱ C ԿԱՈՒՄ». «ՎԵՐԻՆ», «ԳՈՒԼՊ-ԻՆԵՔՍ». «ՎԵՐԻՆ», «ԳՈՒԼՊ-ՌԻԳԳՈՐ». «ՎԵՐԻՆ», «ԳՈՒԼՊ-ՍՈՒՐԲԱՊԱՀՆԵՐ». «ՎԵՐԻՆ», «ԳՈՒԼՊ-ՍԹԻԼՈՒՍ». «ՎԵՐԻՆ», «ԳՈՒԼՊ-ՎԻԿ». «ՎԵՐԻՆ», «ԳՈՒԼՊ.ՍՊՐԵՍՄԻԹ». «ՎԵՐԻՆ», «ՌԻՄՐԱՖ». «ՎԵՐԻՆ»))

Վերջին, ձեր դեպքում տեղադրված plugins- ի հատուկ տարբերակները կսրբեն: Որովհետեւ Մենք ձեւավորում ենք մեր մեկնարկային փաթեթը, որը կօգտագործվի տարբեր նախագծերում, առաջարկվում է նաեւ վարկածների արժեքները փոխարինել նախագծի մեջ միշտ սահմանել plug-ins- ի ներկայիս տարբերակները:

Ծրագրի թղթապանակում պետք է ներկայացվի նաեւ Node_Modules Directory- ը, որում պահվում են բոլոր հանգույցի plug-in ֆայլերը: Բոլոր ցանկալի plugins- ը տեղադրված են, կարող եք գնալ ծոցի կազմաձեւ:

Sullpfile.js տեղադրելը:

gulpfile.js. - Սա մեր առաջադրանքի մենեջերի հիմնական կազմաձեւման ֆայլն է, դրա մեջ մենք կպահենք բոլոր պարամետրերը եւ հրամանները:

Gulp- ի բոլոր աշխատանքը իջնում \u200b\u200bէ առաջադրանքի ( Անգլերեն առաջադրանք): Առաջադրանքը անվանված առանձին անկախ գործառույթ է: Յուրաքանչյուր առաջադրանքի կարող է առաջանալ առանձին:

Կոմպլեմենտար ռեժիմ ժամանակակից չափանիշներով

Ֆայլի առաջին հերթին կապեք համատեղելիության ռեժիմը միայն ժամանակակից ստանդարտներով.

"Օգտագործեք խիստ";

Ավելին կարդացեք այս հրահանգի մասին:

Նախաձեռնեք plugin

Լրացուցիչները նախաստորագրվում են հետեւյալ ձեւավորմամբ.

var ordplugin \u003d պահանջել («plugin-name»);

Այս դիզայնի համաձայն, դուք նախաձեռնում եք մեր բոլոր plugins.

Var gulp \u003d Պահանջել ("Gulp"), // Հիմնական Plug Gulp stylus \u003d // preprocessor stylus prefixer \u003d // CSSMIN- ի ընդունում (" Gulp-Minify-CSS »), // Minification CSS uglify \u003d Պահանջել (" Gulp-uglify "), // Minification JS JShint \u003d Պահանջել (" Gulp) -Առաջին »), // Աշխատեք ներառվածքներով HTML եւ JS Imagemin \u003d պահանջել (" Gulp-Imagemin "), // նվազագույնի հասցնելով spritesmith \u003d պահանջում է (/ pulp.spritesmith" «RIMRAF»), // Մաքրման աղբյուրներ \u003d պահանջում են («Gulp-sourcemaps»), // Sourcemaps Relow \u003d պահանջում է («Gulp-Rename»), / / Ապահովիչ GALP ժամացույցը դադարեցնելու համար \u003d պահանջում է («Gulp-Watch»), // դիտման կոնեկտի հնարավորությունների ընդլայնում \u003d պահանջել («Gulp-Connect»); // Լիվանավորել:

Ուղիների կայունություններ

Հարմարության համար մենք անմիջապես սահմանում ենք բոլոր եղանակներն ու դիմակները.

Var Path \u003d (Build: (// Այստեղ մենք նշում ենք, թե որտեղ պետք է պատրաստ լինենք հավաքման ֆայլերից հետո HTML. «Build / JS /», CSS: "Build / CSS /" / Նկարներ / ", տառատեսակներ." Build / Fonts / ", HTACCESS:" Build / ", Contressimg:" SPRITESSS / PARTION / "SPRITESCS / «), ՊԵԿ. (// եղանակներ, թե որտեղ պետք է աղբյուրի HTML." SRC / ձեւանմուշ / *. HTML ": HTML- ն ասում է. HTML JS. «SRC / JS / [^ _] *. JS», // ոճերի եւ սցենարների մեջ մեզ հարկավոր կլինի միայն հիմնական ֆայլեր ջարդ. «SRC / JS / *.« SRC / CSS / Styles.Styl », CSSvendor. «SRC / CSS / վաճառող\u003e *», / Եթե մենք ուզում ենք գրադարանային ֆայլեր առանձին խանութ ունենալ, որը Rassenger IMG. «SRC / ** / 2 ** / 2 ** / 2 ** / *. նշանակում է - Վերցրեք թղթապանակից բոլոր ընդարձակման բոլոր ֆայլերը եւ տառատեսակները տեղադրված կատալոգներ. «SRC / տառատեսակներ / մոնտաժված», - պարունակող / IMG / 4 * ", Sprites:" SRC / CSS / Sprites / *. PNG ", HTACCESS:" SRC / .HTACCESS "), դիտում. (// մենք կներկայացնենք, փոխելու համար KIH ֆայլեր, որոնք մենք ցանկանում ենք դիտել HTML. «SRC / Կաղապար / ** / *. HTML», JS: "SRC / CSS / **" , IMG: "SRC / CSS / պատկերներ / **/7/27, բովանդակություն," SRC / IMG / ** / *, տառատեսակներ. "SRC / .HTACCES ", Sprites." SRC / CSS / SPRITES / *. PNG "), Մաքուր." ./BUILD ", // տեղեկատու, նախարարը գործարկելու համար.

Խնդրում ենք նկատի ունենալ, որ մենք կարող ենք օգտագործել անվանման դիմակներ.

• * .js. - բոլոր ֆայլերը JS ընդլայնմամբ
• [^ _] *. JS - բոլոր ֆայլերը ընդլայնմամբ JS, բացառությամբ ստորին ներքեւի ներքեւից սկսածներին
• *.* - ցանկացած ֆայլ `ցանկացած երկարաձգմամբ ներկայիս խոսնակի մեջ
• / ** / * .html: - բոլոր ֆայլերը ընդլայնմամբ .html ներկայիս գրացուցակում եւ բոլոր դուստր ձեռնարկություններում

Առաջադրանք (առաջադրանքներ)

Այժմ, երբ բոլոր կայունությունները ուղղագրվեն, կարող եք սկսել գրել Taskov: Բոլոր առաջադրանքներն ունեն հետեւյալ ձեւավորումը.

Gulp.task ("Taskname", գործառույթ (// որոշ գործառույթներ));

Mini-Server եւ Livereload

Առաջին հերթին, մենք կկազմակերպենք տեղական սերվերի եւ «Լիմել» -ի գործունեությունը.

// Տեղական սերվեր Gulp.Task- ի զարգացման համար («Միացեք», գործառույթ () (Connect.Server ((// Mix Root Server Config)., // Պորտի արմատային գրացուցակ. 9999 սերվեր) // նախաստորագրել աշխատանքը լենդիադը));));

Ամենայն հավանականությամբ, դուք հաճախ ստիպված կլինեք միանգամից աշխատել մի քանի նախագծերում: Սերվերը թույլ է տալիս միաժամանակ գործարկել բազմաթիվ սերվերներ, բավական է տարբեր նախագծերի համար գրանցելու ձեր նավահանգիստը:

Bild HTML:

// առաջադրանք HTML Gulp.task կառուցելու համար («HTML: Build», գործառույթ () (Pullp.src (path.src.html) // Ընտրեք ֆայլերը ցանկալի ուղու վրա: Խողովակ (Rigger ()) . Խողովակ (ծոցեր) // բեռնաթափել դրանք կառուցվածքի համար: Mpeper թղթապանակ (միացում .Reload ()) // եւ վերագործարկել մեր սերվերը թարմացումների համար);

Կառուցել JS.

// Ստուգեք JS սխալների վրա եւ քորեք դրանք ծոցի մեջ: «Jshint: Build», գործառույթ (վերադարձը. )) // վազել Jshint .Pipe (jshint.reporter ("Jshint-stygish")); // Նորաձեւ էխորհրդի արտադրանքի մեջ); // Bilding YavaScript Gulp.task ("JS: Build", գործառույթ () (Gulp.src (Path.src.js) // Գտեք մեր հիմնական ֆայլը. .It ()) // նախաստորագրել Sourcemap .Pipe (uglify ()) // Երգում ենք մեր JS. Suffix.min դեպի ելքային File.pipe (gulp.dest (path.build.js)) // բեռնաթափել Պատրաստի ֆայլ կառուցապատում .Pipe (connect.reload ()) // եւ վերագործարկել սերվերը);

Կառուցել սպրիտ

Sprites- ի մեջ համադրելու բոլոր պատկերները ավելացնում են SRC / CSS / Sprites Directory- ը եւ Gulp- ի միջոցով վազքից հետո դառնում են մեկ սայթաքող պատկեր: Sprites- ում չպետք է ավելացնեք լոգո եւ տախտակներ առանց հստակ չափերի:

// Bilda Sprites Gulp.task ("Sprites: Build", Function () (Var Spratedata \u003d Gulp.src (Path.src.sprites) Sprite.png ", // լակի պատկերների անվանումը CSSName." Sprite.styl ", // ոճային անուն, որտեղ պատկերված է պատկերի դիրքերը imgath." Stylus «// ձեւաչափ, որում ես մշակում եմ CSSSTemplate- ի դիրքը. Ֆայլի անուն եւ դիզայն «S-» անվանման սկզբում)))); spratedata.img.pipe (gulp.dest (path.build.sprites); CSS.Pipe (Gulp.dest (ուղի .build.spritescs); // այն ուղին, որտեղ մենք խնայում ենք ոճերը));

Սրգտի արդյունահանման համար բավական է օգտագործել խառնուրդը: Օրինակ, Lorem.png ֆայլի համար Sprite- ի նմուշը նման կլինի.

Lorem Sprite ($ s-lorem)

Այժմ դասի հետ առարկան: Գլորեմը կվերցնի պատկերի չափը եւ պատկերը ինքնին որպես ֆոն:

Bild ստատիկ պատկերներ

Ստատիկ պատկերները պատկերներ են, որոնք օգտագործվում են դասավորության ձեւանմուշում:

// Buildim ստատիկ պատկերներ Gulp.task ("Image: Build", գործառույթ () (Gulp.src (Pair.src.img) // Ընտրեք մեր նկարները. Ճշմարիտ ((// երգել դրանք Compression.jpg Svgoplugins: [(Հեռացնել տեսադաշտը. Կեղծ)], // SVG Interlaced: True True, //svg.gif Optimizationlevel: img)) // բեռնաթափում կառուցվածքում .Pipe (Connect.Reload ()) // վերագործարկել սերվերը);

Bild դինամիկ պատկերներ

Դինամիկ պատկերները բովանդակային պատկերներ են, որոնք կփոխվեն կայքում, եւ ձեւանմուշի մակարդակում միացված են միայն ցույցին: Օրինակ, այն կարող է պատկերներ լինել նորությունների համար եւ այլն:

// Buildim դինամիկ պատկերներ Gulp.task ("ImagesContent: Build", գործառույթ () (Pullp.src (PATH.SRC.CONETIEMG) .Pipe ((// Երգել նրանց առաջադիմական. [(Հեռացնել տեսադաշտը. Կեղծ)]], // SVG Interlaced: True True, //spotion.gif Optimizationlevel: 3 // Սեղմման հարաբերակցությունը 0-ից 7-ից))) // բեռնաթափել կառուցվածքում .Pipe (Connect.Reload ()) // վերագործարկել սերվերը);

Bildim CSS

// Շենքերի մաքսային CSS Gulp.task ("CSSOWN. Build", Function () (Gulp.src (Path.Src.css) // Ընտրեք մեր հիմնական ոճը ()) // նախաստորագրել Souce.Inalize. Խողովակ (ստիլուս ((սեղմում. True իշտ է, "Ներառեք CSS": True շմարիտ)))) // Կազմել ստիլուս .Pipe (նախածանցով ("IE 8", "IE 8", "IE 8", "IE 8" «])))) // Ավելացնել վաճառողի նախածանցներ: Հենմին ()) // surminem.pipe (sourcemapaps.write ()) // propyash sourcemap .pipe (*)) / / Ավելացնել Suffix.min դեպի ելքային ֆայլի անվանումը. Նպեք (Gulp.dest (PACKP.DEST (PATH.BUILD.CSS)) // Խմեք կառուցապատում.

Առանձնացված առաջադրանք արտաքին ոճերի համար.

// կառուցում Vendon CSS Gulp.task ("CSSVendor: Build", Function () (Pullp.src (Path.Src.cssvendor) // Մենք վերցնում ենք վաճառող ()) // նախաստորագրել SouceMap- ը: Խողովակ (CSSMIN ()) // surrem.pipe (sourcemaps.write ()) // Propyash Sourcemap .Pipe (Gulp.dest (path.build.css)) // վերագործարկել սերվերը));

Նաեւ առաջադրանք է ավելացրեք Bild General CSS- ի համար.

// Bildim CSS ամբողջ Gulp.task ("CSS: Build", ["CSSOWN: Build", // "CSSVendor: Build"]);

Եթե \u200b\u200bցանկանում եք կարգավորել արտաքին ոճերը տնից եւ բեռնաթափել դրանք անհատական \u200b\u200bֆայլերով, ապա անհրաժեշտ է խզել «Քսվենդոր. Կառուցել» տողը

Ստեղծեք տառատեսակներ

// Bildim Gulp.task տառատեսակներ («Տառատեսակներ. Կառուցվածք», գործառույթ () (Gulp.src (path.src.fonts) .Pipe (path.build))

Կառուցել: htaccess:

// Bildim htaccess gulp.task ("HTACCESS: Build", գործառույթ () (Gulp.src (path.src.htaccess) .Pipe in build- ում:

Ընդհանուր կառուցում

Որպեսզի մենք յուրաքանչյուր մաս գնել առանձին-առանձին, գլխավորության առաջադրանքը ընդհանուր կառուցվածքի համար.

// Bildim բոլոր gulp.task ("Build", [HTML: Build »," Jshint: Build "," JS: Build "," Fonts: Build "," Fonts: HTACCESS: Build, "Image: Build", "Imagescontent: Build"]);

Մաքրող Bilda

Երբեմն պահանջվում է ամբողջությամբ մաքրել շինարարական գրացուցակը: Այստեղ հաջորդ խնդիրը կգա փրկարարի.

// Մաքրել Bild Folder Gulp.Task («Մաքուր», գործառույթ (CB) (RIMRAF (ուղի.Կաք, CB);));

Դիտեք կամ հետեւեք փոփոխություններին իրական ժամանակում

Ամենակարեւորներից մեկը եւ Օգտակար հատկություններ Gulp- ը ժամացույցի գործառույթն է, որը թույլ է տալիս իրական ժամանակում հետեւել բոլոր փոփոխությունները արտադրված ֆայլերի եւ դրանից, կատարելով հատուկ քայլեր.

// Watch Gulp.Task ("Դիտեք", գործառույթ () (// Bildim HTML ժամացույցը փոփոխելու դեպքում (, գործառույթ (իրադարձություն, ԿԲ));) // Buildim Sprites փոփոխվող ժամացույցը (, գործառույթ (իրադարձություն, ԿԲ) («sprites: Build»); // Buildim Contexual նմուշառումը `փոփոխվող ժամացույցի դեպքում (Gulp. Սկսեք («Պատկերներ. Կառուցեք»);)); // Bildim CSS- ը ժամացույցի փոփոխման դեպքում (, գործառույթ (իրադարձություն, ԿԲ) (Gulp.Start);)); // ստուգել js Ժամացույցի փոփոխման դեպք (, [jshint »]; // Bildim JS փոփոխվող ժամացույց (, գործառույթ (իրադարձություն, ԿԲ) (Gulp.Start);))); // Bildim ստատիկ պատկերներ Ժամացույցը փոխելու դեպքում (գործառույթ («Պատկեր: Build»);)); / Bildim HTCCess ժամացույցը փոփոխելու դեպքում (գործառույթ (իրադարձություն, ԿԲ) (Gulp.Start ("HTACCESS: Build");));));));));));));));));));));))

Լռելյայն գործողություններ

Լռելյայն գործողություններ. Որ խնդիրներն են իրականացնելու առաջադրանքի կառավարիչը, երբ մխեջում մտնելիս ծոցի հրամանը մտնելիս.

// լռելյայն գործողություններ Gulp.task («Լռելյայն», [«Կառուցել», «Դիտեք», «Միացեք»]);

Մեր դեպքում, պաշտպանությունում, մեզ կբերեն մեր նախագիծ, մենք կանդրադառնանք ժամացույցի ռեժիմը եւ կսկսենք սերվերը:

Հրամանի տողի հրամաններ

Հրամանի տողի բոլոր GACPA- ի բոլոր պատվիրանները բաղկացած են երկու մասից: Սա ուղղակիորեն Պուլպի հրամանն է եւ սեղանի անվանումը: Ահա մեր կազմաձեւման համար կիրառվող հրամանի ցուցակը.

• gulp - Հիմնական հրամանը, գործարկում է առաջադրանքի լռելյայն
• gulp Build - Bildim All
• gulp Watch - Սկսեք դիտել
• clean - Cleaning Build կատալոգը մաքրելը
• gulp Connect - Սկսել սերվերը
• gulp HTML. Build - HTML Bild
• gulp Jshint. Build - Ստուգեք JS սխալների համար
• gulp JS. Build - կառուցեք JS
• gulp Sprites. Build - Build Sprite
• gulp Image: Build - Bild ստատիկ պատկերներ
• gulp ImageContent. Build - Bild դինամիկ պատկերներ
• gulp CSSown. Build - CSS սովորական Bild
• gulp CSSVendor. Build - Bild արտաքին CSS
• gulp CSS. Build - Ընդհանուր CSS Bild
• gulp տառատեսակներ. Կառուցվածք - Bild տառատեսակներ
• gulp Htaccess: Build - Build.htaccess

Այս փուլում ավարտվել է Gulpfile.js- ը:

Պատճենեք ծրագրի մեկնարկային փաթեթը

Սկսելու համար անցեք վահանակի մեջ այն թղթապանակում, որտեղ մենք զարգանում ենք, օրինակ, CD- ն զարգացնում / օրինակ եւ պատճենեք ամեն ինչ մեկնարկային փաթեթային գրացուցակից մեր նախագծի CP /. ~ / Մշակել / օրինակ /

Պատճենահանման այս մեթոդը առավել հարմար է, քանի որ Այն ճշգրտորեն պատճենելու է ամեն ինչ, ներառյալ թաքնված ֆայլերը .gitignore եւ այլն:

Եզրակացություն

Թեթլ Այս ուղեցույցը Մենք պատրաստել ենք մեկնարկային փաթեթ `ծոցերը ձեր նախագծերում` առջեւի զարգացման համար:

Նաեւ այս փաթեթը հասանելի է Github- ում

Փակցնել scriptum

Այս հոդվածը վերջնական չէ եւ կթարմացվի `կախված փոփոխություններից եւ բարելավումից: