ახლახან Gulp. დიდი პოპულარობის მოპოვება, და ნათელია, რატომ. ეს უფრო სწრაფად, უფრო ლამაზი და ადვილია ღრუ.. მასთან ხშირად ვმუშაობდი, მაგრამ მე ყოველთვის მზად ვიყავი მზადყოფნა და სრულად არ ესმის, როგორ გააკეთა ეს ყველაფერი. ამ კვირის ბოლოს, გადავწყვიტე დაიშალა და დახუროს ეს პატარა პრობლემა. მიიღეთ ეს და დღეს საუბარი.

რა არის gulp?

Gulp არის წინა-ასამბლეის ინსტრუმენტი. ეს საშუალებას გაძლევთ ავტომატიზირება განმეორებითი ამოცანები (ასამბლეის და CSS და JS ფაილების შეკრება, ტესტების გაშვება, გადატვირთვა ბრაუზერი და სხვა). ამდენად, Gulp აჩქარებს და ოპტიმიზაციას ვებ განვითარების პროცესს.

ყურის ინსტალაცია.

დააინსტალირეთ Gulp ადვილია. თუ რამე არ მუშაობს, დაწერეთ კომენტარი ან თქვენი პრობლემა. ასე რომ ინსტალაცია თქვენ უნდა გააკეთოთ 3 ნაბიჯები:

• დააინსტალირეთ Gulp Global
• დააინსტალირეთ gulp როგორც devadependencies (დამოკიდებულებები განვითარებისათვის)
• შექმნა gulpfile.js ფაილი

პირველი ნაბიჯი არის გლობალურად Gulp- ის ინსტალაცია. გახსენით ტერმინალი და დაწერე:

nPM ინსტალაცია - Gulp

ამის შემდეგ თქვენ უნდა დააყენოთ gulp როგორც devdependencies თქვენი პროექტი. დარწმუნდით, რომ თქვენ გაქვთ პაკეტი. თუ ეს არ არის, მაშინ შექმენით იგი NPM INT კონსოლში. ახლა თქვენ შეგიძლიათ დააყენოთ gulp როგორც devdependencies:

nPM ინსტალაცია - save-dev gulp

საბოლოოდ, თქვენ უნდა შექმნათ gulpfile.js თქვენს პროექტში, რომელიც შეიცავს თქვენს ამოცანებს (ამოცანები). როგორც შუალედური ნაბიჯი, ჩვენ დააყენებთ gulp-util მოდული. რათა დავანახოთ, თუ როგორ არის დამონტაჟებული დანამატები:

nPM ინსტალაცია - Save-dev gulp-util

ახლა დრო დადგა ჩვენი პირველი ამოცანა. გახსენით ახლად შექმნილი gulpfile.js ფაილი და დაწერეთ მას შემდეგნაირად:

/ * ფაილი: gulpfile.js * / // კოლექციონირება ყველა ჩვენი plugins var gulp \u003d მოითხოვს ("GULP"), Gutil \u003d მოითხოვს ("GULP-UTIL"); / / შექმენით ამოცანა, რომელიც შესრულდება ნაგულისხმევი Gulp. ამოცანა ("ნაგულისხმები", ფუნქცია () (დაბრუნება Gutil. შესვლა ("Gulp გაშვებულია!)));

ახლა ჩვენ უნდა დაიწყოს gulp ტერმინალში და ჩვენ ვნახავთ რაღაც მსგავსი:

\u003e Gulp [12:32:08] GulpFile ~ / პროექტები / Gulp-Scotch-IO / gulpfile.js [12:32:08] დაწყებული "default" ... [12:32:08] Gulp არის გაშვებული! [12:32:08] დასრულდა "ნაგულისხმევი" 1 MS- ის შემდეგ

მიმოხლივა

Gulp თავად არის ძალიან მასშტაბების შესაძლებლობები. მაგრამ ყველა თქვენ უნდა ჩაიწეროს ცალკე plugins. ისინი ერთად gulp ქმნის სასწაულები.

Gulp API არის ძალიან მცირე, და შეიცავს მხოლოდ 4 უმაღლესი წესრიგის ფუნქციებს:

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

gulp.task განსაზღვრავს ჩვენს ამოცანებს. არგუმენტები ეწოდება, დამოკიდებულებას (მასივი) და ფუნქცია (ძირითადი ქმედებები). დამოკიდებულება არ შეიძლება იყოს:

gulp. ამოცანა ("MyTask", ფუნქცია () (// რაღაც)); Gulp. ამოცანა ("დამოკიდებული", ["MyTask"], ფუნქცია () // გააკეთე რაღაც "MyTask" შესრულდება });

gulp.src მიუთითებს იმ ფაილებს, რომლებიც ჩვენ გვინდა გამოვიყენოთ. იგი იყენებს. Pipe წვდომის ფაილი მეშვეობით plugins.

gulp.dest ქულები ფოლდერში, რომელშიც ჩვენ გვინდა გადარჩენა შეცვლილი ფაილი.

gulp.src და gulp.dest გამოიყენება მარტივი ასლი ფაილების:

gulp. ამოცანა ("CopyHTML", ფუნქცია () / / კოპირება ყველა HTML ფაილი წყარო / საჯარო / Gulp. SRC ("წყარო / *. HTML"). მილის (Gulp ("საჯარო")); ));

Gulp- ში, ფაილის რეაგირების რეაგირების სისტემა აშენდა (gulp.watch). თქვენ შეგიძლიათ გამოიყენოთ ეს ამოცანა, რათა დაიწყოთ სხვა ამოცანები, რომლებიც საჭიროა ფაილების შეცვლისას.

გსურთ დარეკოთ მეტი ქულა Google Page Seedch- ში? არ ვიცი, რა სახის "წინა-დასასრული" ასამბლეა? მაშინ აქ თქვენ საინტერესო იქნება.

რა არის node.js?

Node.js ჩვეულებრივი სახელწოდებით "ჩრდილოეთ JavaScript". ეს პლატფორმა საშუალებას გაძლევთ დაწეროთ პროგრამები JavaScript სინტაქსის გამოყენებით.

არსებობს Windows, Mac OS და Linux- ის განხორციელება.

ნაკრები მოიცავს პაკეტის მენეჯერს Npm.რომელთანაც შეგიძლიათ დააყენოთ პაკეტები.

რა არის gulp?

Gulp არის პაკეტი დაწერილი Node.js, რომელიც ეხმარება webmasters შექმნას პროექტების განლაგება განლაგება.

Gulp- ის ინსტალაციისთვის, თქვენ უნდა გამოიყენოთ ბრძანების ხაზი.

Npm დააყენოთ gulp.

ამ სტატიის დასასრულს არის ფაილი, რომელიც ხელს შეუწყობს ტიპიური პროექტის შეგროვებას.

ამ მაგალითში, გულით, ჩვენ გავაკეთებთ შემდეგს:

• ავტომატურად ოპტიმიზაცია სურათების ვებ;
• შეგროვება ერთი მინიმალური სტილის საწყისი precrossors (Sass, SCSS);
• შეაგროვეთ ერთი მინიმალური ფაილი სკრიპტებით.

როგორ შეაგროვოს წინა-ბოლოს გამოყენებით gulp?

იმის გაგება, თუ როგორ მუშაობს ყველაფერი, ჩვენ ყველაფერს შეისწავლის ნაბიჯებს.

სტრუქტურა შეიძლება ჩაითვალოს სკრინშოტში.

• აქტივების საქაღალდე - გამოსახულების წყაროების, სტილისა და სკრიპტისთვის;
• საჯარო საქაღალდე - პროექტის ასამბლეის შედეგი განთავსდება მასში;
• gulpfile.js - ფაილი, რომელიც აღწერს მუშაკის მუშაობის ლოგიკას;
• პაკეტი.სონი არის ფაილი, რომელიც შეიცავს ინფორმაციას Gulp- ის სწორი ოპერაციისთვის გამოყენებული პროგრამებისა და დანამატების შესახებ.

პაკეტი.

ფაილის შინაარსი:

("სახელი": "GULP_PROJECT", "ვერსია": "1.0.0", "აღწერა": "მაგალითი", "მთავარი": "GULPFILE.JS", "სკრიპტები": ("ტესტი": "ECHO \\" შეცდომა: არ არის გამოცდა მითითებული \\ "&& გასვლა 1"), "ავტორი": "დიმიტრი ილიჩევი", "ლიცენზია": "ISC", "Devadependences": "^ 3.9.0", "GULP-CSSO "^ 1.0.0", "Gulp-Concat": "^ 2.6.0", "Gulp-Uglify": "^ 1.2.0", "Gulp-Imagemin": "^ 2.3.0", "Gulp -SASS ":" ^ 2.1.1 "))

ეს ფაილი ნათელია შემდეგნაირად:

• პროექტის სახელი gulp_project, ვერსია და აღწერა;
• ძირითადი ფაილი არის gulpfile.js;
• პროექტის ავტორი, ლიცენზია - ეს ყველაფერი ასე არ არის მნიშვნელოვანი და უბრალოდ ეს ველი ცარიელი იყოს;
• საინტერესო წერტილი არის devadependences. ეს აღწერს დამოკიდებულებას.

ფაილი შეიძლება იყოს რედაქტირებული ჩვეულებრივი ტექსტის რედაქტორი. იგი ასევე შეიძლება შეიქმნას ახალი პროექტისთვის NPM INT ბრძანებით.

ამასთანავე, node.js ესმის, რომ ჩვენ უნდა ვიმუშაოთ:

• Gulp ვერსია 3.9.0 და უმაღლესი ასამბლეისთვის;
• GULP-CSSO ვერსია 1.0.0 და ზემოთ - მოდული სწავლების სტილის (CSS);
• Gulp-concat ვერსია 2.6.0 და ზემოთ - მოდული gluing მრავალჯერადი ფაილი ერთი;
• Gulp-Uglify ვერსია 1.2.0 და ზემოთ - მოდული Minify JavaScript;
• Gulp-Imagemin ვერსია 2.3.0 და ზემოთ - სურათების ოპტიმიზაციის მიზნით.
• Gulp-sass ვერსია 2.1.1 და ზემოთ - მოდული მისაღებად CSS საწყისი Sass (SCSS).

შესანიშნავი! ამის შემდეგ, თქვენ უნდა დააყენოთ ეს ყველაფერი. ეს კეთდება ბრძანებისგან. პროექტის ფოლდერში, თქვენ უნდა შეასრულონ ბრძანება:

NPM ინსტალაცია

ყველა საჭირო ინფორმაცია მიიღება პაკეტში.

მას შემდეგ, რაც ეს ჯადოსნური გამოჩნდება სერვისის საქაღალდე node_modules.

gulpfile.js.

ფაილის შინაარსი:

/ * * * * განსაზღვრავს ცვლადებს * * / var gulp \u003d მოითხოვს ("Gulp"), // იტყობინება Gulp JS Uglify \u003d მოითხოვს ("Gulp-Uglify"), // minification JS Concat \u003d მოითხოვს ("GULP-Concat") , // ფაილი gluing imageMin \u003d მოითხოვს ("Gulp-Imagemin"), // CSSO- ს მინიჭება \u003d საჭიროებს სურათებს ("GULP-CSSO"), / / \u200b\u200bMINIFICATION CSS SASS \u003d მოითხოვს ("GULP-Sass"); // Sass კონვერტაცია (SCSS) in CSS / * * * შექმნა ამოცანები (გემოვნების) * * /// Sass ამოცანა. იწყებს Gulp Sass Command Gulp.Task ("Sass", ფუნქცია (GULP.SRC ("./ აქტივები / სტილის / სტილის / სტილის / სტილის / სტილის") // ფაილი, რომ პროცესი. Pipe (Sass (). On ("შეცდომა" , sass.logerror))) // კონვერტაციის Sass in CSS .PIPE (CSSO (CSSO ()) // MINIFUMPIUMIS CSS, რომელიც მიღებული წინა ნაბიჯით. მილის (Gulp.est ("./ საჯარო / CSS /")) // შედეგი ჩვენ ვწერთ მითითებულ მისამართზე); // ამოცანა "JS". იწყებს gulp js command gulp.task ("JS", ფუნქცია (gulp.src (["./assets/javascripts/jquery-2.1.4.Min.js", "./assets/javascripts/bootstrap. მინ. .Js ",", ") ./assets/javascripts/script.js"])) // ფაილები, რომლებიც გაგრძელება (Concat (Min.js ")) // გლუვი ყველა JS .Pipe (Uglify ()) // შედეგი "პორტი" miniffult.pipe (gulp.dest ("საჯარო / JS /")) // შედეგი ჩვენ დავწერთ მითითებულ მისამართზე); // პრობლემა "სურათები". იწყებს "gulp images" by gulp.task ("სურათები", ფუნქცია (gulp.src (". აქტივები / სურათები / ** / *") // ჩვენ მივიღებთ ფაილს საქაღალდეში და მის ქვესადგურებში. მილის ( ImageMin ()) // ჩვენ ოპტიმიზაცია სურათების ვებ. მილის (Gulp.est ("საჯარო / სურათები /")) // შედეგი დავწერეთ მითითებულ მისამართზე); / / ამოცანა "Watch". იგი იწყება "Gulp Watch" Command // ის მონიტორინგს უწევს ფაილების ცვლილებებს და ავტომატურად იწყება სხვა Gulp.Task- ის ამოცანები ("Watch", ფუნქცია (// // / / როდესაც შეცვლის * .scss ფაილი სტილის საქაღალდე და subfolders გაუშვით SASS GULP- ის ამოცანას. Watch (". / აქტივები / სტილის / ** / ** / * ** / * SCSS", ["Sass"]); // შეცვლის * .JS ფაილების საქაღალდე "JavaScripts" და subfolders აწარმოებს JS Gulp. Watch ამოცანა ("აქტივები / Javascripts / ** / ** / * ** / *.", ["JS"]) // როდესაც თქვენ შეცვლით ფაილებს "სურათები" საქაღალდეში და ქვეფრონებში, დაიწყე სურათები gulp.Watch ამოცანა (" აქტივები / სურათები / ** / * ", [" სურათები "]););

მთავარი ჩიპი - ამოცანაში Უყურებს. მას შემდეგ, რაც გაშვებული მას შემდეგ, თქვენ შეგიძლიათ უსაფრთხოდ მუშაობა წყაროები, და პროექტი ავტომატურად შეგროვდება ყოველ ჯერზე თქვენ გადარჩენა რედაქტირებადი ფაილი.

გამომავალი, ჩვენ მზად ვართ გამოაქვეყნოთ თარგი ინტერნეტში.

ამოცანები შეიძლება ცალკე დაიწყო. შედეგად, არქივში სტატიის დასასრულს თქვენ ნახავთ შემდეგს:

! შენიშვნა ამ არქივის გაუქმების მიზნით, პირველ რიგში, თქვენ უნდა შეასრულოს NPM ინსტალაციის ბრძანება. ეს საქაღალდე შეიცავს საკმაოდ დიდი რიცხვი ფაილები, და ასლი / ჩასვით მათ ყოველ ჯერზე - დროის ნარჩენები.

პატიმრობაში

არსებობს უზარმაზარი კომპლექტი სხვა სასარგებლო plugins. მაგალითად, მშვენიერი Jade თარგი, რომელიც დროს HTML კოდი, ვინმეს შეიძლება დაგჭირდეთ ნაკლები და ასე შემდეგ.

წარმოდგენილი მაგალითია მხოლოდ პლატფორმა და თარგი, საიდანაც შესაძლებელია ყველა ამ ლამაზი ჩიპების გამოყენება ბევრი ცოდნის გარეშე.

სამუშაო რანერები და ასამბლეის სისტემები ძალიან აჩქარებენ მუშაობას, შედგენას, ტესტირებას და სხვა რუტინულ ამოცანებს. როგორც ნებისმიერ სხვა ტერიტორიაზე, ამ ბაზარზე ძლიერი კონკურენციაა. 2014 წლამდე, მათ შორის, რაუნდი დომინირებს, მაგრამ მოგვიანებით, პატარა გუნდი გამოყოფილია პროექტისგან, რომელმაც გადაწყვიტა ალტერნატიული ინსტრუმენტი, გულპი, ორიენტირებული პროექტის ასამბლეა.

შერჩევისას გადაწყვეტთ, სტატიის ფარგლებში განიხილავს ძირითადი ამოცანის მენეჯერები:

• ღრუ.

და ასევე შეეხოთ სხვა საშუალებებს და ავაშენოთ მეთოდები.

ვეძებთ ცოტა წინ, ვთქვათ, რომ ჩვენ ვიყენებთ gulp in waveaccess. განახორციელოს ინსტრუმენტი ძალიან ადვილი აღმოჩნდა: JetBrains პროდუქტების ოჯახში (იდეა, webstorm, resharper), რომელიც ჩვენ მრავალი წლის განმავლობაში ვიყენებთ შესანიშნავი დანამატები Gulp / Grunt და NPM / Nodejs- სთან მუშაობისთვის.

სამუშაო მენეჯერი Vs. პროექტის ასამბლეის სისტემა: რა განსხვავებაა?

Პროცესების ადმინისტრატორი - ინსტრუმენტი ავტომატიზირება ამოცანები. რანერების კონფიგურაციაში შეგიძლიათ ამ ამოცანების სახელები; ფუნქცია, რომელიც ასრულებს მათ; Plugins დააჩქაროს სტანდარტული ქმედებები, მაგრამ ამოცანები თავად შეიძლება თვითნებური. Მაგალითად:

• განლაგების ამოცანები (ZIP პროექტი, პროექტის დატვირთვა დისტანციური სერვერი და ა.შ.
• პროექტის ასამბლეის ამოცანები (მინიმაფიკაციის, ოპტიმიზაციის, შემოწმების კოდექსის მოქმედების და TP)
• ამოცანები მონაცემთა მიგრაციისთვის და ა.შ.

მაგალითები ასეთი ინსტრუმენტები - grunt და gulp.

ასამბლეის სისტემა - ეს არის ინსტრუმენტი, რომელიც წყვეტს მხოლოდ ერთი ტიპიური ამოცანის პროექტის ასამბლეის Java Script- ზე, რომელიც მოიცავს:

• concatenation,
• შემოწმების კოდი,
• კოდი minification და TD.

მსგავსი ინსტრუმენტები მოიცავს webpack, ბროკოლი, ფილიალი, ბრაუზერი და სხვა.

ყველა მსგავსი Frontend ამოცანები შეიძლება ავტომატურად შესრულდეს სხვა საშუალებებით: მაგალითად, NPM- ის გამოყენებით, რომელიც ჩვენ ასევე ვისაუბრებთ სტატიაში.

მაგალითი

განვიხილოთ GULP ფაილი პროექტის შესაქმნელად:

Const Gulp \u003d მოითხოვს ("gulp"); Const Coffee \u003d მოითხოვს ("ყავა-ყავა"); 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, თქვენ შეგიძლიათ დაწეროთ სხვა Config - ამბობენ, რომ განათავსოს:

Var gulp \u003d მოითხოვს ("gulp"); var zip \u003d მოითხოვს ("gulp-zip"); var del \u003d მოითხოვს ("del"); Var install \u003d მოითხოვს ("gulp-install"); var runsequence \u003d მოითხოვს ("Run-Sequence"); Var Awslambda \u003d მოითხოვს ("Node-AWS-LAMBDA"); gulp.task ("სუფთა", ფუნქცია (CB) (del (["./ Dist", "./dist.zip"], CB);); gulp.task ("Copy", ფუნქცია ("index.js") .pipe (gulp.est ("DIST /"));); Gulp.task ("Node-mods", ფუნქცია ("./ პაკეტი.სონი") .Pipe (gulp.est ("DIST /")) .PIPE (ინსტალაცია (წარმოება: ჭეშმარიტი)));); / / გაწმენდა ყველა AWS-SDK დირექტორიები Node_Modules. ჩვენ არ უნდა ატვირთოთ მათ, რადგან Lambda მაგალითად, უკვე // აქვს ხელმისაწვდომი გლობალურად. Gulp.task ("სუფთა- AWS-SDK", ფუნქცია (Callback) (DEL (["DIST / NODE_MODULES / ** გასართობი / ლიტერატურა / AWS-SDK "], Callback);))))))))))))))));))))));)))); gulp.task (" zip ", ფუნქცია (") .Pipe (zip ("dist.zip")) .Pipe (gulp.dest ("./")));))););));); gulp.task ("ატვირთვა", ფუნქცია (Callback) (Awslambda.deploy (" . zip ", მოითხოვს (". / lambda-config.js "), callback);); gulp.task (" განათავსოს ", ფუნქცია (Callback) (დაბრუნების runsequence ([" სუფთა "], [" ასლი "] , ["Node-Mods"], ["სუფთა- AWS-SDK"], [zip "], [" ატვირთვა "], Callback););

შეიძლება აღინიშნოს ახალი ამოცანები, როგორც კომბინაცია არსებული:

Gulp.task ("განათავსოს", gulp.series ('სუფთა ",' ასლი ',' Node-Mods ',' სუფთა- AWS-SDK ',' zip ',' appload ';

ეს არის განსხვავება. ახლა განიხილეთ ძირითადი ინსტრუმენტები.

gulp vs. ღრუ.

ასე რომ, ჩვენს წინაშე ორი ამოცანაა Ranner: Gulp და Grunt. ორივე გამოიყენება Node.js და NPM, და ისინი დააყენებს ამოცანებს JavaScript- ის გამოყენებით.

ერთი შეხედვით, ისინი მსგავსია, თუმცა, GULP- ს აქვს ის, რაც უფრო მოსახერხებელ საშუალებას იძლევა: უნარი პარალელურად იყოს ამოცანების დამუშავება და კომპაქტური კონფიგურაცია, ლაკონური API. მოდი ვნახოთ მათი მუშაობის პრინციპი.

ხრახნიანი მონაცემები

ჩვენ გვყავს საგრანტო ფაილი, რომელიც ქმნის CSS ასამბლეას და გადამუშავებას.

ეს შეიძლება ითქვას, რომ თითოეული პროცესის დაწყებისას გულისხმობს:

იხსნება ფაილი;

იწყებს პროცესს;

იცვლება ცვლილებები;

ხურავს დამუშავებულ ფაილს, რათა თავიდან იქნას აცილებული შემდეგი პროცესი;

ჩანაწერს ფაილი საბოლოო საქაღალდეში.

ანუ, ჯაჭვის მოიცავს მრავალჯერადი დროებითი საქაღალდეების შექმნა და შუალედური ფაილების შენახვა:

Plugins წერენ სხვადასხვა ავტორები. თითოეული მოდული შეიძლება ფაილებთან მუშაობა, გვერდის ავლით, ფაილები უნდა იყოს წარმოდგენილი როგორც ობიექტები. გულში, ეს ამოცანა ხორციელდება ვირტუალური ფაილების სისტემა Vynyl-fs. და GULP დაუყოვნებლივ აგზავნის ფაილს შემდეგ პროცესს დროებითი ფაილების შექმნის გარეშე და დისკზე გადარჩენის გარეშე.

იგივე კონფიგურაცია Gulp უკვე უფრო კომპაქტურია:

მისი საერთო სამუშაო მექანიზმი - Streaming ფაილი წერილობით დისკზე:

სამუშაო აღსრულების თანმიმდევრობა

არსებობს კიდევ ერთი განსხვავება: Gulp მიერ ნაგულისხმევი ასინქრონულად ასრულებს პერსონალს. არსებობს უპირატესობა ამ და cons. ამავე კონფიგურაციის ფაილში, ჩვენ მოგცემთ ბრძანებას Dev / * SCSS- ის დირექტორია და გააგზავნეთ Sass.

ნაკადები გაგზავნის შედეგს V.Pipe. მეთოდი. მილსადენი საშუალებას გაძლევთ შეაგროვოთ ბუფერული ნაწილების შეგროვება, ხოლო როდესაც ეს არის სრული, დაუყოვნებლივ გააგზავნოთ ინფორმაცია ნაკადზე კითხვისთვის, დირექტორიის შინაარსის გარეშე.

Sequential Task აღსრულება ხდის gulp სწრაფი და ძლიერი, მაგრამ ხანდახან უნდა შეასრულოს ამოცანები სინქრონულად, როგორც grunt. პრობლემა შეიძლება მოგვარდეს Callback- ის მეშვეობით, ნაკადის ან დაპირების დაბრუნებისას. Habré- ის ამოცანა უფრო დეტალურად არის დემონტაჟული. არსებობს ალტერნატივა საიტზე npm.js

თუ თქვენ იყენებთ grut, მაგრამ თქვენ მოზიდული ნაკადი მონაცემები - იგივე Vynyl-FS მოდული შეიძლება გამოყენებულ იქნას, რათა განახორციელოს იგი grunt.

Gulp Laconic API- ს მხოლოდ 5 მეთოდი აქვს:

ამოცანა (სახელი, FN). რეგისტრირებულია ფუნქცია დაასახელა. თქვენ შეგიძლიათ მიუთითოთ დამოკიდებულება სხვა ამოცანებზე, თუ თქვენ უნდა შეასრულონ ისინი.

გაუშვით (ამოცანები ...). ასრულებს ამოცანებს.

ნახეთ (გლობუსი, FN). ასრულებს ფუნქციას, თუ ფაილი გლობუსის ცვლილებების ადგილზეა.

SRC (გლობუსი). როგორც პარამეტრი იღებს ნიღაბს და დააბრუნებს ამ ფაილების წარმოდგენას. მაშინ ნაკადი შეიძლება გადაეცეს შესასვლელ მოდულს.

განადგურება (საქაღალდე). გადაარჩენს ფაილებს მითითებულ საქაღალდეში.

მე განსაკუთრებით მინდა აღვნიშნო ყოფნა.მონ (მშობლიური "პროექტის API- ში, რადგან ასამბლეის ყველაზე მნიშვნელოვანი კომპონენტია მუდმივი ცვლილებების მიკვლევა. API- ის მოკლე აღწერა საშუალებას იძლევა, ყურადღება გაამახვილოთ პროექტების შესაქმნელად.

ალტერნატივები gulp და grunt

მიუხედავად იმისა, რომ Gulp- ის პოპულარობის მიუხედავად (დღეში 130-ზე მეტი გადმოწერის დღე) და NPMJS.com- ის მიხედვით დღეში 86-ზე მეტი გადმოწერისთვის), დეველოპერები ამ სისტემებს და მათი ნაკლოვანებით არიან: მაგალითად, დანამატების დამოკიდებულება, არასრულყოფილი დოკუმენტაცია, არასასიამოვნო გამართვა. გარდა ამისა, თქვენ შეგიძლიათ განიხილონ პროექტის ასამბლეის სისტემები (როგორიცაა ბროკოლი და Webpack) ან NPM სკრიპტები.

პროექტის ასამბლეის სისტემები

განვიხილოთ რამდენიმე ალტერნატიული გადაწყვეტილება Node.js პლატფორმაზე. პროექტის შესაქმნელად, მათ შეუძლიათ შეცვალონ გუპი და გლუვი.

ეს სისტემა, ისევე, როგორც gulp, გაჩნდა, როგორც კონკურენტი ამოცანა-ადრეული grunt, მაგრამ დეველოპერები თავდაპირველად ჩაფიქრებული, როგორც თანაშემწე აშენება ყველა უპირატესობა და უარყოფითი მხარეები. ის არ "მესმის" პარამეტრების გარეშე, რომ * .Js არის ფაილი სკრიპტებით, * .Coffee არის coffeescript; მისი კონფიგურაცია უფრო კომპაქტურია. თუმცა, ასამბლეის ეტაპზე ნებისმიერი თვითნებური ქმედებები მას ვერ შეძლებს ჩაიდინოს.

აქ არის კონფიგურაციის ფაილი ფილიალი. იგი წერია CoffeScript (ასევე შეგიძლიათ დაწეროთ JS):

Exports.config \u003d ფაილები: JavaScripts: "JavaScripts / app.js": / ^ app / "JavaScripts / vendor.js": / ^ (bower_components | გამყიდველი) / Stylesheets: Jointo: "Stylesheets / app.css" შეკვეთა : მას შემდეგ, რაც: ["Vendor / Styles / Helpers.css"] თარგები: "Javascripts / app.js"

აქ მინდა ყურადღება მიაქციოთ ერთობლივ და შეკვეთის ოპერატორებს. At Brunch Config დონეზე, როგორც ჩანს, თქვენ უნდა შეაგროვოს ფაილი სასურველი მიზნით. შედეგად, CONFIG იღებს 20-30 ხაზს.

Ბროკოლი.

Indi-Tool, რომელიც განვითარდა. მისი დეველოპერები სურდათ კონკურსის შექმნა უკვე gulp.

შედარებით Gulp, ბროკოლი ინსტრუმენტი იყენებს სხვა პრინციპებს:

აჩქარების ასამბლეა. თითოეული მოდული ახორციელებს ასამბლეის შედეგების შუალედურ ქეშირებას მხოლოდ ნაწილობრივი მეამბოხეების ნაცვლად აუცილებელი ფაილების ნაცვლად.

ხეების ნაცვლად ხეები. Gulp არის საუკეთესო ტრანსფორმირება ერთი ფაილი ერთ ფინალში. Default Broccolli იყენებს მხოლოდ ხეებს, არ არის ფაილები და ისინი სხვა ხეებად გარდაიქმნება (ერთი vertex- სგან).

ამ ეტაპზე, ინსტრუმენტი აქტიურად ვითარდება, ახალი დანამატები გამოჩნდება, მაგრამ სერიოზული პროექტებისთვის ძალიან ადრეა: დანამატები არ არის საკმარისი.

Webpack არის მოქნილი მოდულური ასამბლეის სისტემა. მას აქვს უჩვეულო სინტაქსი, მაგრამ თავად იღებს ნებისმიერ მოდულს სინტაქსებს.

გაგება, რომ თქვენ უნდა კონკურენციას ასეთი გიგანტები, როგორც Gulp, შემქმნელები გადაწყვიტეს განმუხტვის ჩვენი ცხოვრება განვითარების დიდი პროექტების განვითარებაში. და დაემატა კომუნალური:

ავტომატურად აშენდება ხის დამოკიდებულებები და რესურსები.

კომფორტული ინსტრუმენტები დინამიური დატვირთვის განხორციელებისათვის.

თავსებადობა პრაქტიკულად ნებისმიერი მოდულის (AMD, UMD, ES 2015, საერთო JS, მესამე მხარის მოდულები მათზე დაფუძნებული).

თავსებადობა პრეპროგესტორებთან (Sass, Babel, Coffee Script, Type Script და ა.შ.).

ცოცხალი განაახლეთ (ასინქრონული ჩატვირთვის ტექნოლოგია, სადაც ბრაუზერის განახლებები არ არის მთელი გვერდები, მაგრამ ცალკეული პროგრამები).

კოდის გაზიარების უნარი და ბევრი Bundle ფაილების გენერირება, თავიდან აცილების მიზნით ერთი მძიმე bundle.js.

კოდის ოპტიმიზაციის უნარი.

ცალკე, შეგიძლიათ გაითვალისწინოთ მოქნილი მიდგომა დამოკიდებულებაზე. მოდული შეიძლება იყოს JS, CSS და HTML ფაილი, და კიდევ JPEG ერთად PNG. თქვენ შეგიძლიათ გამოიყენოთ საჭიროება ("myjsfile.js") და მოითხოვს ("mycssfile.css"), წილი და გამოყენების ნიმუშების ნაწილები კვლავ.

დაწვრილებით შესახებ შესაძლებლობები, ინსტრუმენტი კონფიგურაციები, plugins შეგიძლიათ იხილოთ GitHub, პრეზენტაცია Fronttalks: ღრმა immersion in webpack.

nPM სკრიპტები

ასამბლეის ამოცანები შეიძლება გადაწყდეს NPM სკრიპტების გამოყენებით. ბევრი შეშინება ეს იდეა: რამდენიმე შესაძლებლობები, სკრიპტები არ არის სწრაფი საკმარისი შედარებით gulp ან webpack. მიუხედავად ამისა, ეს ხარვეზი გადაჭარბებულია.

NPM სკრიპტის შესაძლებლობები

NPM სკრიპტები საკმაოდ ბევრი ამოცანების მოგვარებაა. მაგალითად, შეგიძლიათ განახორციელოთ ხაფანგის სკრიპტები:

("სახელი": "NPM- სკრიპტები-მაგალითი", "ვერსია": "1.0.0", "აღწერა": "NPM სკრიპტები მაგალითი", "სკრიპტები": ("Prebuild": "ECHO მე აწარმოებს სკრიპტს" , "ავაშენოთ": "Cross-Env Node_env \u003d წარმოების Webpack" "PostBuild": "ECHO მე აწარმოებს შემდეგ Build Script"))

სკრიპტები დატვირთული იქნება იმისათვის, რომ პრეფიქსების მიხედვით: Prebuild, მაგალითად, ადრე აშენდება, რადგან მას აქვს პრეფიქსი. შესაბამისად, PostBuild იქნება დატვირთული ბოლო. NPM- ის აშენების გუნდი მათ სასურველ ბრძანებაში დაიწყებს.

თქვენ შეგიძლიათ დარეკოთ ერთი სკრიპტი სხვაგან, რათა decompose კომპლექსური ამოცანები. მაგალითად, აქ Prebuild დავალება მოუწოდებს სუფთა ამოცანა.

("სახელი": "NPM- სკრიპტები-მაგალითი", "ვერსია": "ვერსია": "1.0.0", "აღწერა": "NPM სკრიპტები მაგალითი", "სკრიპტები": ("სუფთა": "რიმრაფ ./dist && mkdir dist "," Prebuild ":" NPM Run Clean "," Build ":" Cross-Env Node_env \u003d წარმოების WebPack ")

თუ ამოცანა ძალიან რთულია, თქვენ ყოველთვის შეგიძლიათ დარეკოთ ცალკე ფაილი:

("NAME": "NPM- სკრიპტები-მაგალითი", "ვერსია": "ვერსია": "1.0.0", "აღწერა": "NPM სკრიპტები მაგალითი", "სკრიპტები": ("აშენება": "Node Build.js"))

შეკრების ამოცანებისათვის Gulp ნაკადი იმის გამო, რომ ბევრად უფრო მოსახერხებელი გახდა, ვიდრე გლუვი. მაგრამ ეს შეიძლება განხორციელდეს NPM- ის მეშვეობით. In Windows და Unix, ნაკადი კეთდება default, გარეშე გადარჩენის შუალედური ფაილი.

მაგალითად, Unix- ში შეგიძლიათ მიიღოთ GREP ფაილის შინაარსი და გააგზავნეთ ახალი ფაილი:

Grep 'ჩემი სახელი' bigfile.txt\u003e linesthathathavemyname.txt

გადამისამართება (\u003e) აგზავნის სასურველ სიმები დანიშნულების ფაილს. ამოცანა ხორციელდება შუალედური ფაილების შენახვის გარეშე.

მაგრამ არსებობს უხერხულობა: თქვენ არ დატოვებთ კომენტარს პაკეტში. გამოსავალი შეიძლება იყოს მოკლე სკრიპტების შექმნა გასაგები სახელებით, რომელიც მიზნად ისახავს რამდენიმე პატარა ამოცანას. უფრო დეტალურად, შეცვლის ამოცანების Ranners NPM სკრიპტები კარგად არის განათებული ინგლისურენოვანი სტატიაში, რატომ დავტოვე gulp და grunt for npm სკრიპტები.

შედეგი

ბაზარზე არის დიდი კონკურენციის საშუალებები რუტინული ამოცანების ავტომატიზირებისთვის (მაგალითად, gulp და grunt), ასევე პროექტის ასამბლეის ავტომატიზირების ინსტრუმენტები (webpack, ბროკოლი, მედუზა, ბრაუზერის და ა.შ.).

თუ თქვენ გადავხედავთ ამოცანას, მაშინ Gulp შედარებით Grunt არის მარტივი, გააზრებული და აწარმოოს: გაიმარჯვებს გამო დანაზოგების დისკზე ოპერაციები. მაგრამ Grunt აქვს უფრო მეტი plugins (მაგალითად, არსებობს ტესტი მოდული). ამის გამო, ის რჩება ბევრი გულშემატკივარი.

თუ ვსაუბრობთ მხოლოდ ასამბლეის შესახებ, მაშინ gulp აქვს ყველა უპირატესობა grunt:

ნაკადი არქიტექტურა ფაილების გადაცემისათვის Vynyl-FS მოდულის ჯაჭვის გადაცემისათვის.

Default - ასინქრონული ამოცანა აღსრულება.

ლაკონური API არის მხოლოდ 5 ფუნქცია.

ამავე დროს, webpack build არის თანაბრად საინტერესო ინსტრუმენტი. იგი უზრუნველყოფს Live Reload ტექნოლოგიას, რომელიც აჩქარებს ბრაუზერის განახლებას. ეს არის უზარმაზარი Plus: ტექნოლოგია ზოგავს დროს დააჭირეთ განახლების ღილაკს, რომ დეველოპერები უნდა დააჭიროთ მუდმივად. Gulp ასევე აქვს ცოცხალი განაახლეთ, მაგრამ webpack ძნელია შედარება gulp ან grunt, როგორც ეს არის "sharpened" მხოლოდ აშენებული და არ "იცის, თუ როგორ უნდა გადაწყვიტოს თვითნებური ამოცანები.

ყველა ეს გადაწყვეტილება სრულყოფილად ინტეგრირებულია ჯოჯოხეთიდან პროდუქციის ოჯახთან ერთად, თუმცა, WaveAccess- ში სასურველია, როგორც ამაღელვებელი შესაძლებლობები ორივე Futgames- სთვის, და Frontend სპეციალისტებისთვის.

თუ თქვენ გაქვთ რაიმე შეკითხვები და თქვენ უნდა განვითარდეს ვებ პროექტი, წერა ჩვენთვის [Email protected]

• წარმტოვეტი
• ღრუ.
• Gulp.
• სამუშაო მორბენალი.

ამ სტატიაში დეტალურად გავაანალიზებთ პროექტის პროექტის შეკრების პროცესს, რომელიც ჩემს ყოველდღიურ საქმიანობაში მოვიდა და ძალიან ადვილია რუტინული.
სტატიაში არ ითხოვს სიმართლე ბოლო ინსტანციაში, რადგან დღესდღეობით არსებობს სხვადასხვა ასამბლეის დიდი რაოდენობა და ასამბლეის მიდგომები და ყველას ირჩევს გემოვნებით. ამ თემას მხოლოდ ჩემი აზრები გაგიზიარებ და ჩემი ნამუშევრების ჩვენება.

ჩვენ ვიყენებთ Gulp Collector- ს. შესაბამისად, კვანძის JS უნდა დამონტაჟდეს სისტემაში. კონკრეტული პლატფორმის კვანძების ინსტალაცია ჩვენ არ განიხილავს, რადგან ეს რამდენიმე წუთში googles.
და პირველი უპასუხებს კითხვას - რატომ gulp?
მეტ-ნაკლებად დანგრეული ალტერნატივებისგან, რომელსაც გვაქვს გლუვი და ფილიალი.
როდესაც მე უბრალოდ დავიწყე მოდის კოლექციონერები - უკვე grunt და gulp ბაზარზე. პირველი გამოჩნდა ადრე და მას აქვს უფრო დიდი საზოგადოება და მრავალფეროვანი plugins. NPM- ის მიხედვით:
Grunt - 11171 პაკეტი
Gulp - 4371 პაკეტი

მაგრამ გლუვი ჩანდა ჩემთან ერთად chur სიტყვიერი. და წაკითხვის შემდეგ რამდენიმე სტატია, შედარებით - მე სასურველი gulp მისი სიმარტივის და ხილვადობის.
Brunch არის შედარებით ახალგაზრდა პროექტი, ყველა უპირატესობა ამ pluses და minuses. მე ვუყურებ მას ინტერესით, მაგრამ ჯერ არ გამომიგზავნე.

გავაგრძელოთ:

შექმნა საქაღალდე ჩვენი პროექტი, მაგალითად "HABR". გახსენით კონსოლში და შეასრულოს ბრძანება

Npm init

თქვენ შეგიძლიათ უბრალოდ დააჭირეთ Enter ყველა ინსტალერი კითხვებს, რადგან ახლა ეს არ არის ფუნდამენტურად.
შედეგად, პროექტის საქაღალდეში, ჩვენ მიერ გენერირებული ფაილი პაკეტი.სონი, დაახლოებით ასეთი შინაარსი.

("ჰაბრა", "ვერსია": "1.0.0", "აღწერა": "", "მთავარი": "ინდექსი", "სკრიპტები": ("ტესტი": "ეხო" შეცდომა: "ეხო" შეცდომა: არ არის გამოცდა "&& გასვლა 1"), "ავტორი": "", "ლიცენზია": "ISC")

ჩვენი საჭიროებების მიხედვით ზოგიერთი ცვლილება:

("სახელი": "ჰაბრა", "ვერსია": "1.0.0", "აღწერა": "", "ავტორი": "", "ლიცენზია": "ISC", "Devdependencies": ("Gulp": "^ 3.8.1"))

devadependPeptions ბლოკში, ჩვენ მიუთითეთ, რომ ჩვენ გვჭირდება gulp და მაშინვე ჩვენ გვწამს ყველა ჩვენი plugins.

დანამატები:

ერთად სტილის, მე იგივე როგორც JS, მაგრამ მხოლოდ ნაცვლად rigger "A - მე გამოვიყენო ჩაშენებული SCSS იმპორტი.
ჩვენი music.scss გამოიყურება ასე:

/ * * მესამე მხარე * / @import "CSS: ../../ Bower_Components / Normalize.css / normalize.css"; / * * Custom * / @import "ნაწილობრივი / აპლიკაცია";

ამ გზით გამოდის, რომ ადვილად აკონტროლებს სტილის კავშირის დაკვეთას.
შეამოწმეთ ჩვენი ამოცანა, გაშვებული

Gulp სტილი: აშენება

ჩვენ ვაგროვებთ სურათებს

ამოცანა სურათები გამოიყურება ასე:

Gulp.task ("image: build", ფუნქცია () (gulp.src (path.src.img) // აირჩიეთ ჩვენი სურათები. მილები (ImageMin ((// სიმღერა მათ პროგრესული: True, Svgoplugins: [(RemoveViewbox: FALSE ), გამოყენება:, interlaced: True))) .Pipe (gulp.dest (path.build.img)) // და გადაყარეთ აშენება .Pipe (Connect.Reload ()););

მე გამოვიყენო ნაგულისხმევი ImageMin პარამეტრები, გარდა interlaced. დაწვრილებით შესახებ API ამ მოდული შეგიძლიათ წაიკითხოთ.
ახლა, თუ ჩვენ ვაყენებთ სურათს SRC / IMG და დაიწყე ბრძანება

Gulp გამოსახულება: აშენება

ამდენად, ჩვენ ვნახავთ ჩვენი ოპტიმიზირებული სურათის აშენებას. ასევე, gulp იქნება გთხოვთ წერენ კონსოლი რამდენი სივრცე გადაარჩინა ჩვენს საიტზე :)

ფონტები

შრიფტით, მე, როგორც წესი, არ უნდა განახორციელოს ნებისმიერი მანიპულაცია, მაგრამ რაც არ უნდა გქონდეთ პარადიგმა "ჩვენ ვმუშაობთ SRC / და შეაგროვოს აშენება /" - მე უბრალოდ კოპირება ფაილები SRC / შრიფტებიდან და ჩაწერეთ აშენებული / შრიფტები. აქ ამოცანა

Gulp.task ("შრიფტები: აშენება", ფუნქცია () (gulp.src (path.src.fonts) .pipe (gulp.dest (path.build.fonts))));

ახლა მოდით განვსაზღვროთ TAQ სახელით "Build", რომელიც დაიწყებს ყველაფერს, რაც ჩვენ აქ ვართ

Gulp.task ("Build", ["HTML: Build", "JS: Build", "STYLE: BUILD", "FONTS: BUILD", "სურათი: BUILD"]);

ფაილის ცვლილებები

იმისათვის, რომ არ ასვლა ყველა დროის კონსოლში, მოდით ვთხოვო gulp ყოველ ჯერზე, როდესაც თქვენ შეცვლით ზოგიერთი ფაილი აწარმოებს სასურველი ამოცანა. ამისათვის დაწერე ასეთი ამოცანა:

Gulp.task (watch ", ფუნქცია () (watch (ღონისძიება, CB) (GULP.START (" HTML: BUILD "));); Watch (ფუნქცია (ღონისძიება, CB) (GULP.START (" სტილი : აშენება ");); Watch (, ფუნქცია (ღონისძიება, CB) (GULP.START (" JS: BUILD ");); Watch (ფუნქცია (ღონისძიება, CB) (GULP.START (" გამოსახულება: აშენება ");); Watch (ფუნქცია (ღონისძიება, CB) (GULP.START (" შრიფტები: აშენება ");););

ჩვენ გვესმის, არ უნდა იყოს პრობლემები. ჩვენ უბრალოდ გავდივართ ჩვენი ბილიკები, რომლებიც განსაზღვრულია გზაზე ცვლადი და ფუნქციით, რომელსაც ეწოდება ფაილის შეცვლისას - გთხოვთ, დაიწყოთ საჭირო ამოცანა.
სცადეთ გაშვებული კონსოლში

Gulp watch.

და შეცვალეთ სხვადასხვა ფაილები.
კარგად, არ მაგარი?)

ვებ სერვერი.

სასწაული ლივერპულისთვის ისარგებლეთ - ჩვენ უნდა შევქმნათ ადგილობრივი ვებ სერვერი. ამის გაკეთება, დაწერეთ შემდეგი ამოცანა:

Gulp.task ("webserver", ფუნქცია (connect.server ((მასპინძელი: server.host, პორტი: Server.port, LiveLoad: True)););

კომენტარს არ აკეთებს. ჩვენ უბრალოდ დავიწყებთ სერვერს Liveload- ის მასპინძელზე და პორტში, რომელიც ჩვენ განვსაზღვრავთ სერვერზე.

წმენდა

თუ სურათს დაამატებთ, მაშინ აწარმოე სურათი: ავაშენოთ ამოცანა და შემდეგ ამოიღეთ სურათი - ის დარჩება აშენებული საქაღალდეში. ასე რომ, ეს იქნებოდა მოსახერხებელი - პერიოდულად გაწმენდა. შექმნა მარტივი ამოცანა

Gulp.task ("სუფთა", ფუნქცია (CB) (Rimraf (Path.Clean, CB););

ახლა ბრძანების დაწყებისას

Gulp სუფთა.

უბრალოდ წაშლილია აშენების საქაღალდე.

და ბოლოს, პატარა წყალობა

ეს ამოცანა არ შეესაბამება კრიტიკულ ფუნქციებს, მაგრამ მე ნამდვილად მომწონს :)

Gulp.task ("OpenBrowser", ფუნქცია (OPN ("HTTP: //" + Server.Host + ":" + Server.port + "/ build"););

როდესაც ჩვენ გვჭირდება, ჩვენ დავიწყებთ მას - და ჩვენს ბრაუზერში ავტომატურად გახსენით tab ჩვენი პროექტით.
მაგარი :)

საბოლოო შეთანხმება

უკანასკნელი რამ - ჩვენ განვსაზღვრავთ სტანდარტულ ამოცანას, რომელიც დაიწყებს მთელ ასამბლეას.

Gulp.task ("default", ["აშენება", "Webserver", "Watch", "OpenBrowser"]);

საბოლოოდ, თქვენი gulpfile.js გამოიყურება მსგავსი რამ.
ახლა ასრულებს კონსოლს

და Voila :) workpiece თქვენი პროექტი მზად არის და გელოდებათ.

წყვილი სიტყვები დასასრულს

ეს სტატია ფიქრობდა, რომ შეცვალა დახვეწილი ხსოვნისადმი ხსოვნის პროექტების შესაქმნელად და ახალი დეველოპერებისთვის ამ გამოცდილების გადაცემის განმუხტვა. თქვენ არ გჭირდებათ ამ განსახიერება თქვენს პროექტებზე. არსებობს yeoman.io სადაც თქვენ ნახავთ გენერატორებს თითქმის ნებისმიერი საჭიროებების.
მე დავწერე ეს კოლექტორი 2 მაისის მიზეზით.
- მე მიყვარს ჩემი rigger ჩემი გამოყენება hTML კოდი
- თითქმის ყველა ასამბლეა, რომელიც მე შევხვდი - დროებითი საქაღალდე გამოიყენება (ჩვეულებრივ. TMP /), ჩაწერას შუალედური შედეგები ასამბლეა. მე არ მომწონს ეს მიდგომა და მინდოდა დროებითი საქაღალდეების მოშორება.
- და მე მინდოდა ეს ყველაფერი ჩემთვის ყუთში :)

ჩემი სამუშაო ვერსია კოლექციონერი შეგიძლიათ ჩამოტვირთოთ ჩემი GitHub.

ვიმედოვნებ, რომ სტატია სასარგებლო აღმოჩნდა თქვენთვის :)

P.S. ყველა შეცდომა, ხარვეზები და shoals - გთხოვთ დაწერეთ პირადი

ჯენტლმენის ფრონტის საბოლოო დეველოპერი კომპლექტი

ეს არ არის საიდუმლო, რომ თანამედროვე ფრონტის საბოლოო დეველოპერი უნდა ჰქონდეს თავის იარაღის ერთ-ერთ პროექტს, როგორიცაა Gulp. ან ღრუ.. სანამ გარკვეული დროის განმავლობაში მოხვდა მონოპოლია ამ საკითხში, მაგრამ დეველოპერის ჯგუფმა გაეცნო GRUNT- სგან, რათა შექმნას საკუთარი მსუბუქი და სწრაფი ამოცანა მენეჯერი Gulp.

ამ სტატიაში, ჩვენ მოვამზადებთ დაწყების პაკეტს სამომავლო პროექტებში.

რა ვიყენებთ ტექნოლოგიას

• პროგრამული პლატფორმა: Node.js.
• CSS წინასწარი პროცესორი: Stylus.
• Პროცესების ადმინისტრატორი: Gulp.

რატომ წინა მენეჯერის მენეჯერი მენეჯერი

ცოტა ხნის წინ, მე თვითონ გაოცებული ვარ, რატომ უნდა გაატაროთ დროის კონფიგურაციის კონფიგურაცია, თუ გაუმკლავდე განლაგებას განლაგებას ისე, სანამ არ დავიწყებ CSS- ის წინა პროცესორებს.

CSS წინასწარი პროცესორები - მართლაც მოსახერხებელი და დაჩქარების წერა სტილის, მაგრამ შედგენა კოდი დაწერილი წინასწარი პროცესორი შევიდა რეგულარული CSS, არ საკმაოდ ტრივიალური ამოცანა, რომელიც მოგვარდება ერთი ღილაკით. აქ ჩვენ ვართ სამაშველო და ამოცანა მენეჯერი მოდის. კოდის კონვერსია ხდება, რომ ღილაკზე დაჭერით, ყველაფერი ხდება თქვენი მონაწილეობის გარეშე (რა თქმა უნდა, თუ სწორად კონფიგურაცია).

რა თქმა უნდა, ამოცანების მენეჯერის ამოცანები შორს წავიდა ტრანსფორმაციის კოდექსთან დაკავშირებული პროცესების მიღმა, როგორც სუფთა CSS- ში. პროექტის კოლექციონერი ასევე არის დაკავებული სამინისტროში, კონცენტრირებაზე, შეცდომების კოდის შემოწმებისას, გამოსახულების შეკრება, ვებ-გვერდის ოპტიმიზაციისთვის და ა.შ. თქვენ უბრალოდ შექმნათ თქვენი პროექტი ბევრი ლოგიკური გამოყოფილი ფაილი, რომლებიც შემდეგ მოხერხებულად შეგროვებული ერთი დირექტორია უკვე დამუშავებული და მზად არის მუშაობა ბრაუზერში. მაგრამ ცოტა მოგვიანებით, და ახლა დავიწყოთ მომზადება.

მონტაჟი Node.js.

თუ იცით, თუ როგორ უნდა დააყენოთ Node.js თქვენს სისტემაში და გამოიყენოთ იგი, შეგიძლიათ უსაფრთხოდ წასვლა მომდევნო სათაურში.

მინდა დაუყოვნებლივ გავაფრთხილო, რომ აღწერილი ყველა ქმედება შესაბამისია Mac OS X.მაგრამ ზოგადად გამოიყენება სხვებისთვის არაერთი სისტემები. განვითარების გზით მენეჯერი და ბრძანების ხაზი ქარხანა გარკვეულწილად უფრო რთული და აქ არ იქნება აღწერილი. თუმცა, თუ თქვენ კვლავ იყენებთ ფანჯრებს და არ არის მზად, უარი თქვას, შემიძლია შემოგთავაზოთ გამოყენების ვარიანტი Ვირტუალური ხელსაწყო დამონტაჟებული Ubuntu.მე გამოიყენე ეს ვარიანტი ჩემს სახლში, რომელიც ზოგადად საკმაოდ მოსახერხებელია.

ასე რომ, პირველი, რაც ჩვენ უნდა ჩამოტვირთოთ და დააყენოთ Node.js პაკეტი თქვენს სისტემაში მუშაობა კვანძის მეშვეობით კონსოლი. გადადით ოფიციალურ საიტზე Node.js და ჩამოტვირთოთ ახალი სტაბილური ვერსია თქვენი სისტემისთვის. ინსტალაციის შემდეგ, კვანძის ბრძანება ხელმისაწვდომი უნდა იყოს თქვენი ბრძანების შესახებ. შეამოწმეთ, რომ თქვენი კვანძის სამუშაოები, შეიტანეთ ბრძანება ბრძანების შესახებ

საპასუხოდ, დამონტაჟებული Node.js- ის ვერსია. თუ ყველაფერი კარგად არის, გაგრძელდება.

პროექტის დირექტორიების სტრუქტურა

ჩვენს პროექტებში ჩვენ ვიყენებთ სტრუქტურის ერთიან ვერსიას:

განვითარება - ფესვების განვითარების კატალოგი └─start. - პროექტის კატალოგი ├─build - Bild შეგროვებული სამუშაო მენეჯერი ├─resource. - ყველა წყარო ფაილი განვითარებისათვის (.psd და ა.შ.) ├─src. - განვითარების კატალოგი │├─css. სტილის განვითარების კატალოგი ││├─. - ყველა სტატიკური გამოსახულება ││├─Sprites. - გამოსახულება შეგროვებული Sprite ││├─ პოპულარული - საბაჟო ფაილები სტილი │││├─mixins.styl - საბაჟო mixins │││└─styles.styl. - საბაჟო სტილის ││├─Vendor - სხვები გარე ფაილები სტილი ││└─styles.styl. - ძირითადი სტილი ფაილი │├─Fonts. - შრიფტის კატალოგი │├─img. - კატალოგი დინამიური სურათები │├─js. - JavaScript Development Catalog ││ ├ _ *. JS - გვერდითი ფაილები JS ││├─_main.js. - მთავარი საბაჟო JS ││└─main.js. - მთავარი JS ფაილი │├─.htaccess - კონფიგურაცია სერვერზე │├─ * .html. - გვერდი მარკირების ფაილი │├─pages.html. - ფაილი ბმულები ყველა გვერდზე თარგი │├─index.html - ინდექსი ფაილის მარკირების ფაილი │└─ წ - დანამატის ფაილების დანამატი │ └─ * .html - დანამატი მარკირების ფაილები (header.html და ა.შ.) ├─package.json - NPM Batch მენეჯერი Config ├─gulpfile.js. - კონფიგურაცია gulp. ├─stylus.template.mustache. - ნიღაბი კითხულობს sprites ├─todo. - TODO ფურცელი └─.gitignore. - კონფიგურაცია Git

დაყენება

კონსოლში CD ბრძანების გამოყენებით, გადადით განვითარების ძირითად დირექტორიაში, შექმნათ ჩვენი MkDir- ის დაწყების პროექტი და გადაადგილება მასზე.

ჩვენ პროექტს შევქმნით ჩვენს სტრუქტურას კონსოლთან ერთად:

mkdir Build Resource SRC / CSS SRC / CSS / images SRC / CSS / SRC / CSS / ნაწილობრივი SRC / CSS / Vendor SRC / JS SRC / თარგი SRC / თარგი / მოიცავს SRC / IMG SRC / შრიფტები

პროექტის სტრუქტურაში თავდაპირველი ფაილების შექმნა:

შეხება gulpfile.js stylus.template.mustache .gitignore src / .htaccess SRC / TODO SRC / CSS / Styles.styl SRC / CSS / ნაწილობრივი / სტილის.სტრუქტიკა SRC / JS / _main.js SRC / Template / Pages.html SRC / თარგი / index.html SRC / თარგი / მოიცავს / header.html SRC / თარგი / მოიცავს / footer.html

შექმენით პაკეტი

ყველა pop-up კითხვები შეიძლება შეიტანოს მეშვეობით შეიტანოს, კვანძის მითითებული მათ ნაგულისხმები ღირებულებები, ან შეავსოთ შემოთავაზებული სფეროებში.

.Gitignore.

ლაპარაკი Gita რომელიც კატალოგებს იგნორირება და არ შეავსოთ საცავი:

/ Node_modules / / build / / რესურსი /

NODE_MODULES დირექტორია გამოჩნდება მოგვიანებით დანამატების ინსტალაციის შემდეგ და შეიცავს ყველა პროექტის კვანძს.

sRC / .htaccess.

ინსტალაცია დამატებითი Gzip შეკუმშვის და ქეშირების სერვერზე:

AddoutPutFilterByType deflate ტექსტი / HTML ტექსტი / Plain Text / XML ტექსტი / CSS ტექსტი / JavaScript განაცხადის / JavaScript # ემსახურება gzip შეკუმშული CSS ფაილი, თუ ისინი არსებობს # და კლიენტი იღებს gzip. Rewritecond "% (HTTP: Aspect-Encoding)" GZIP "Rewritecond"% (request_filename) \\. GZ "-s rewriterule" ^ (. *) \\. CSS "" $ 1 \\\\ ".GZ" # ემსახურება Gzip შეკუმშული JS ფაილი, თუ ისინი არსებობს # და კლიენტი იღებს Gzip. Rewritecond "% (HTTP: Aspect-Encoding)" GZIP "rewritecond"% (request_filename) \\. GZ "-S Rewriterule" ^ (. *) \\. JS "$ 1 \\ .GZ" #. სახეები, და თავიდან აცილების mod_deflate ორმაგი gzip. Rewriterule "\\ .css \\ .gz $" - "Rewriterule" \\ .js \\ .GZ $ "" - " # ემსახურება სწორი კოდირების ტიპის. Header დამატება შინაარსი- encoding gzip # ძალა Proxies to Cache Gzipped & # არასამთავრობო Gzipped CSS / JS ფაილი ცალკე. სათაურის დამატება განსხვავდება encoding იწურება appiresbytype განცხადება / JavaScript "წვდომა Plus 1 თვე" Expiresbytype Image / JPG "წვდომა Plus 1 თვის" ExpiresbyType Image / JPEG "წვდომა Plus 1 თვის" Expiresbytype Image / GIF "წვდომა პლუს 1 თვე" Expiresbytype Image / PNG "წვდომა და 1 თვე "Expiresbytype ტექსტი / CSS" წვდომა პლუს 1 თვე "

sRC / CSS / Styles.styl

შეაერთეთ მომხმარებლის სტილის ფაილები ძირითადი სტილის ფაილში:

@მპორტი "ნაწილობრივი / სტილის"

გთხოვთ გაითვალისწინოთ, რომ დამაკავშირებელი .styl ფაილები, გაფართოება არ არის მითითებული, სემანტიკის მიხედვით Stylus Pre-Processor კოდექსის მიხედვით. სხვა გაფართოების სტილის დაკავშირება, მაგალითად, ამ უკანასკნელის მითითება აუცილებელია.

ᲙᲔᲗᲔᲑᲐ.

ეს გვერდი შეიცავს TODO- ს განვითარების ფურცელს. თქვენ შეგიძლიათ გაეცნოთ ამ ფაილთან მუშაობის შესახებ planticasks planticasks plug plansin გვერდზე ამისთვის ამაღელვებელი ტექსტი.

ეს სტრუქტურა დასრულებულია.

დაყენების plugins მეშვეობით NPM სურათების მენეჯერი

Node.js მიერ ნაგულისხმები მოიცავს NPM Batch მენეჯერი, რომლის საცავებში ბევრი plugins უკვე შეგროვდა, რომელთანაც ჩვენ უნდა ვიმუშაოთ.

შექმნის gulp მოდული

პირველი თქვენ უნდა დააყენოთ gulp გლობალურად (ერთად -g გასაღები) ჩვენს სისტემაში

npm დააყენოთ gulp-g

ამის გაკეთება გჭირდებათ ერთხელმომავალში, გლობალური მონტაჟი არ არის საჭირო.

ახლა თქვენ უნდა დააყენოთ GULP პროექტის კატალოგში

npm დააყენოთ gulp - save-dev

Key - Save-Dev ვარაუდობს, რომ ინფორმაცია მოდულის შესახებ (სახელი საცავში და მისი ვერსიაში) დაემატება პაკეტს. Kson Config და გახსოვდეთ ეს პროექტი. მას შემდეგ, რაც ჩვენ არ შეინახავთ Heavyweight Folder ერთად Node_Modules Plugins, შენახული Config ინფორმაცია დამონტაჟებული plugins საშუალებას მისცემს მხოლოდ ერთი NPM მე ბრძანება განათავსოს ყველა საჭირო plugins პროექტი.

თითოეული გუნდისთვის არსებობს აბრევიატურები, ასე რომ ბრძანება ზემოთ შეგვიძლია დავწეროთ მოკლე ფორმატში

მომავალში, ჩვენ ასევე გამოიყენებთ გუნდების მოკლე ფორმატს.

Stylus მოდული for gulp

ჩვენს პროექტებში, ჩვენ ვიყენებთ Stylus Pre-Processor, რომელიც მუშაობს ჯარიმა და შედგენილი კვანძის.

Დაინსტალირება:

npm i gulp-stylus -d

CSS გადამუშავების Plugins

Avtoprefikser - ავტომატურად შეცვლის პრეფიქსებს ----- Moz - WebKit - სასურველ თვისებებში:

npm i gulp-autoprefixer -d

CSS minification - მოდული MINIFIES გამომავალი CSS ფაილი აღმოფხვრის მას არასაჭირო ხარვეზები და ჩანართები:

npm მე gulp-minify-css -d

გამოსახულების დამუშავების დანამატები

ასოციაციის სურათები sprites - აღარ უნდა გაატაროთ ძვირფასი დრო, რათა დააკავშიროთ ყველა გამოსახულება sprites, და შემდეგ გამოთვალოთ მათი კოორდინატები, ეს ყველაფერი ავტომატურად ამ მოდული თქვენთვის:

npm i gulp.spritesmith -d

დაამატეთ ადრე შექმნილი stylus.template.mustache ნიღაბი გაანგარიშების პოზიციები sprites:

((# Items)) $ ((PX.X)) ((px.y)) (px.offset_x)) ((px.offset_y)) (px.width)) (( px.Height)) ((px.total_width)) ((px.total_height)) "((escaped_image)))"; (/ ნივთები))

დაამატეთ სპეციალური mixins in mixins.styl:

Spritewidth ($ Sprite) სიგანე $ SpriteHeight ($ Sprite) სიმაღლე $ SpritePosition ($ Sprite) ფონის პოზიცია $ Sprite $ SpriteImage ($ Sprite) Background-Image URL ($ Sprite) Sprite ($ Sprite) თუ! Match ("Hover" , სელექტორი ()) &&! მატჩი ("აქტიური", სელექტორი ()) SpriteImage ($ Sprite) SpriteWidth ($ Sprite) SpriteHeight ($ Sprite)

დაკავშირება Mixins და გენერირებული ფაილი კოორდინატები ძირითადი SRC / CSS / Styes.styl სტილი ფაილი:

@import "ნაწილობრივი / sprite" @Import "ნაწილობრივი / mixins"

გაითვალისწინეთ, რომ sprites უნდა დააკავშირებს მომხმარებლის სტილის @import "ნაწილობრივი / სტილის"

გამოსახულების ოპტიმიზაცია ვებ-გვერდზე - მოდული ავტომატურად გაჭრა ყველა არასასურველ ინფორმაციას თქვენი სურათებისგან და აძლიერებს მათ ოპტიმალურ ზომას, რაც საშუალებას მისცემს ზოგიერთ შემთხვევაში 90% -მდე გამოსახულების შემცირება:

nPM I GULP-IMAGEMIN -D

JavaScript გადამუშავების Plugins

Minification js. - მოდული minikies თქვენი JS კოდი შემცირების მისი ჩამოტვირთვა დრო:

npm i gulp-uglify -d

JS Tracking - მოდული შეამოწმებს თქვენს JS კოდს, რათა გამოავლინოს ყველა შეუსაბამობა და მოუტანს მათ კონსოლში:

npm i jshint gulp-jshint -d

HTML გადამუშავების Plugins

დაკავშირებული ფაილები - მოდული საშუალებას გაძლევთ შეინახოთ საიტის სტატიკური ნაწილები, როგორიცაა ჰედერის, ძირი, გარდა და ა.შ., ცალკე ფაილებში და მათ სხვა ფაილის ნებისმიერ ნაწილს დააკავშირებს. აღარ არის საკმარისი, მცირე ცვლილებების შემთხვევაში სათაურში, ათობით, ან თარგის ასობით HTML გვერდის ასობით:

npm მე gulp-rigger -d

მოდული ასევე შეესაბამება JS- ს.

დაკავშირება მომხმარებლის JS to Main JS SRC / JS / Main.js პროგრამული უზრუნველყოფის მშენებლობა:

// \u003d _main.js.

დაკავშირება index.html ფაილი header.html და footer.html

// \u003d მოიცავს / header.html // \u003d მოიცავს / footer.html

სხვა დანამატები

ლივერპული. - მოდული გამორიცხავს თქვენ გადატვირთოთ გვერდი ბრაუზერში ყოველ ჯერზე ცვლილებების სანახავად, ახლა ავტომატურად ხდება შეცვლილი ფაილის შენახვისას:

npm i gulp-connect -d

დაიცავით gulp გამგზავრება - ზოგჯერ ეს ხდება, რომ Gulp- ს შეუძლია გააფართოვოს სადამკვირვებლო რეჟიმი კრიტიკული შეცდომების შემთხვევაში (ძირითადად JS). ეს მოდული, თუ შესაძლებელია, ცდილობს გაეცნოს Gulp პროცესების მუშაობას:

npm i gulp-plumber -d

ფაილების გადარქმევა - ყველაზე გავრცელებული ნამუშევარი ფაილის სახელებით. მოდული საშუალებას გაძლევთ მთლიანად შეცვალოს ფაილები, შეცვალეთ გაფართოება, დაამატეთ პრეფიქსები და Postfix, მაგალითად, სტილის სტილის სტილში. Min.css:

npm i gulp-rename -d

Cleener - ზოგჯერ საჭიროა დასრულების კატალოგი ჩამოყალიბება დირექტორია, არის მოდული სამაშველო:

Sourcemap - იმისათვის, რომ შემცირდეს, თქვენი ფაილი დარჩა იკითხება ბრაუზერის გამართვის მეშვეობით, თქვენ უნდა დაამატოთ sourcemap minifier ფაილი:

npm i gulp-sourcemaps -d

გაფართოებული watch თვისებები. - მოდული ხდის Watch Smart, ახლა ის არ გადაწერას ყველა ფაილი აშენება, როდესაც თქვენ შეცვლის მთელი ფაილი, კონკრეტული შეცვლილია ფაილი overwritten, რომელიც ზოგავს დროს და რესურსებს:

npm i gulp-watch -d

შეამოწმეთ პაკეტი

Ყველაფრის შემდეგ დამონტაჟებული plugins, შეამოწმეთ ჩვენი პაკეტი.სონი. მას უნდა ჰქონდეს შემდეგი ტიპის:

("სახელი": "დაწყება", "ვერსია": "1.0.0", "აღწერა": "დაწყება პაკეტი წინსვლისთვის", "ავტორი": "ივან ივანოვი", "ლიცენზია": "MIT", "დამოკიდებულებები": (): "devdependences": ("Gulp": "უახლესი", "GULP-AUTOPREFIXER": "უახლესი", "Gulp-Connect": "უახლესი", "Gulp-Imagemin": "უახლესი", "Jshint": "უახლესი", "Jshint-Stylish": "უახლესი", "Gulp-Jshint": "უახლესი", "Gulp-minify-css": "უახლესი", "Gulp-Plumber": "უახლესი", "Gulp-Rename": "უახლესი", "Gulp-Rigger": "უახლესი", "Gulp-sourcemaps": "უახლესი", "Gulp-Stylus": "უახლესი", "Gulp-Uglify": "უახლესი", "Gulp-watch": "უახლესი", "gulp.spritesmith": "უახლესი", "Rimraf": "უახლესი"))

უკანასკნელი ნაცვლად, თქვენს შემთხვევაში, დამონტაჟებული დანამატების კონკრეტული ვერსიები იქნება დაწერილი. იმიტომ რომ ჩვენ ვქმნით ჩვენს საწყის პაკეტს, რომელიც სხვადასხვა პროექტებში იქნება გამოყენებული, ასევე რეკომენდირებულია შეცვალოს ვერსიების ღირებულებების შეცვლის შესახებ, რათა თავიდან იქნას აცილებული პროექტის Plug-Ins- ის მიმდინარე ვერსიები.

პროექტის საქაღალდეში, node_modules დირექტორია ასევე უნდა გამოჩნდეს, რომელშიც ყველა კვანძის დანამატი ფაილი ინახება. ყველა სასურველი plugins დამონტაჟებულია, შეგიძლიათ წასვლა gulp config.

შექმნის gulpfile.js.

gulpfile.js. - ეს არის ჩვენი ამოცანის მენეჯერის ძირითადი კონფიგურაციის ფაილი, ის არის, რომ ჩვენ ყველა პარამეტრს და ბრძანებებს შევინარჩუნებთ.

ყველა gulp მუშაობა მოდის ქვემოთ ამოცანა ( ინგლისური დავალება). ამოცანა არის ცალკე დამოუკიდებელი ფუნქცია. თითოეული ამოცანა შეიძლება გამოწვეული იყოს ცალკე.

კომპლიმენტური რეჟიმი თანამედროვე სტანდარტებთან

პირველი ფაილი, დაკავშირება თავსებადობის რეჟიმი მხოლოდ თანამედროვე სტანდარტების მიხედვით:

"გამოიყენეთ მკაცრი";

დაწვრილებით ამ დირექტივის შესახებ.

ინიციალიზაცია მოდული

დანამატები ინიცირებულია შემდეგ მშენებლობით:

var initlugin \u003d მოითხოვს ("მოდულის სახელი");

ამ დიზაინის მიხედვით, თქვენ ინიშნება ყველა ჩვენი დანამატები:

Var gulp \u003d მოითხოვს ("Gulp"), // ძირითადი plug Stylus \u003d მოითხოვს ("Gulp-Stylus"), // Preprocessor Stylus Prefixer \u003d მოითხოვს ("GULP-AUTOPREFIXER"), // CSSMIN \u003d მიღება (" Gulp-minify-css "), // minification css uglify \u003d მოითხოვს (" gulp-uglify "), // minification js jshint \u003d მოითხოვს (" Gulp-jshint "), // მიკვლევა შეცდომები JS Rigger \u003d მოითხოვს (" gulp -როგგერი "), // მუშაობა HTML და JS Imagemin \u003d მოითხოვს (" Gulp-Imagemin "), // Minimizing images Spritesmith \u003d მოითხოვს (" gulp.spritesmith "), // Conjoin სურათები Rimraf \u003d მოითხოვს Sprites ( "Rimraf"), // დასუფთავების sourcemaps \u003d მოითხოვს ("Gulp-sourcemaps"), // sourcemaps გადარქმევა \u003d მოითხოვს ("Gulp-Rename"), // გადარქმევა Plumber \u003d მოითხოვს ფაილებს ("Gulp-Plumber"), / / Fuse for Stopping Galp Watch \u003d მოითხოვს ("Gulp-watch"), // გაფართოების შესაძლებლობები Watch Connect \u003d მოითხოვს ("Gulp-connect"); // ლივერპული.

ბილიკების მუდმივები

მოხერხებულობისთვის, ჩვენ დაუყოვნებლივ განსაზღვრავთ ყველა გზას და ნიღბებს:

Var Path \u003d (Build: (// აქ ჩვენ ვამბობთ, სად უნდა ჩამოყაროს მზად არის შეკრების ფაილი HTML: "Build /", JS: "Build / JS /", CSS: "Build / CSS /", IMG: "Build / CSS გასართობი / ლიტერატურა / ფოტო / ", Forts:" Build / Fonts / ", Htaccess:" Build / ", Contentimg:" Build / img / ", Sprites:" SRC / CSS / სურათები / ", Spritescss:" SRC / CSS / ნაწილობრივი / ნაწილობრივი / ნაწილობრივი / "), SRC: (/ / WAYS WAYS სად უნდა მიიღოს წყარო HTML:" SRC / თარგი / *. HTML ", // Syntax SRC / Template / *. HTML აცხადებს gulp რა გვინდა მიიღოს ყველა ფაილი extention.html js: "SRC / JS / [^ _ _] *. JS", // სტილისა და სკრიპტებში ჩვენ გვჭირდება მხოლოდ ძირითადი ფაილები JShint: "SRC / JS / *. JS", CSS: "SRC / CSS / Styles.styl", CSSvendor: "SRC / CSS / Vendor\u003e *", // თუ გვინდა ბიბლიოთეკის ფაილები ცალკე მაღაზიაში, რომ Rassenger IMG: "SRC / CSS / Images / ****", // სინტაქსი img / ** / 2 ** / 2 ** / 2 *. ნიშნავს - ყველა ფაილი ყველა გაფართოების საქაღალდეში და შრიფტები Nested კატალოგები: "SRC / Fonts / დამონტაჟებული", Contentimg: "SRC / IMG / ** / * *", Sprites: "SRC / CSS / Sprites / *. PNG ", HTACCESS:" SRC / .HTACCESS "), Watch: (/ ჩვენ აღვნიშნავ, შეცვლის KA KIH ფაილები გვინდა HTML: "SRC / თარგი / ** / *. HTML", JS: "SRC / JS / ** / *. JS", CSS: "SRC / CSS / ** / 2 **" , IMG: "SRC / CSS / Images / ** / 7/27, Contentimg:" SRC / IMG / ** / *, შრიფტები: "SRC / FONTS / ** / **", HTACCESSE: "SRC / .HTACCESS ", Sprites:" SRC / CSS / Sprites / *. PNG "), სუფთა: "/build", // დირექტორია, რომელიც შეიძლება გაწმენდა outputdir: "/build "// წყარო root დირექტორია აწარმოებს მინისტრს);

გთხოვთ გაითვალისწინოთ, რომ ჩვენ შეგვიძლია გამოვიყენოთ სახელი ნიღბები:

• * .Js. - ყველა ფაილი JS გაფართოება
• [^ _] *. JS - ყველა ფაილი გაფართოების JS, გარდა იმ დანარჩენი ქვემოთ ქვედა underscore
• *.* - ნებისმიერი ფაილი ნებისმიერი გაფართოებით მიმდინარე სპიკერის ფარგლებში
• / ** / * .html. - ყველა ფაილი Extension.html ფარგლებში მიმდინარე დირექტორიაში და ყველა შვილობილი დირექტორიები

ამოცანა (ამოცანები)

ახლა, რომ ყველა მუდმივები გაწერილია, შეგიძლიათ დაიწყოთ წერილობით Taskov. ყველა ამოცანას აქვს შემდეგი დიზაინი:

Gulp.task ("TaskName", ფუნქცია () (// / ზოგიერთი ფუნქციები));

მინი-სერვერი და ლივერპული

უპირველეს ყოვლისა, ჩვენ კონფიგურაცია ადგილობრივი სერვერისა და ლივერელოდან:

// ადგილობრივი სერვერი Gulp.task- ის განვითარებისათვის ("დაკავშირება", ფუნქცია (Connect.Server (// / Mix Root Server Configs: // პორტის Root დირექტორია: 9999 სერვერი, / / \u200b\u200bრა პორტი გამოიყენებს ლიზერელ პასუხს: TRUE / / მუშაობის ლივერელოდ);););

სავარაუდოდ, თქვენ ხშირად გექნებათ მუშაობა ერთდროულად რამდენიმე პროექტში. სერვერი საშუალებას გაძლევთ ერთდროულად აწარმოოთ მრავალჯერადი სერვერები, საკმარისი სხვადასხვა პროექტებისთვის თქვენი პორტის რეგისტრაციისთვის.

Bild HTML.

// ამოცანა მშენებლობისთვის HTML Gulp.Task ("HTML: აშენება", ფუნქცია () (gulp.src (patch.src.html) // აირჩიეთ ფაილები სასურველ გზაზე. მილის (Rigger ()) // Rigger მეშვეობით . მილის (gulp.dest) // ატვირთვა მათ მშენებლობას .პეპის საქაღალდე (Connect.Reload ()) // და გადატვირთეთ ჩვენი სერვერი განახლებები));

ავაშენოთ JS.

// შეამოწმეთ js on შეცდომები და pin შევიდა gulp.task კონსოლი ("JShint: აშენების", ფუნქცია () (დაბრუნება gulp.src (path.src.jshint) // აირჩიეთ ფაილები სასურველი გზა. მილის (Jshint ( )) // Run მეშვეობით Jshint .Pipe (Jshint.Reporter ("Jshint-Stylish")); // ელეგანტური შეცდომების გამომავალი კონსოლი)); // bilding yavascript gulp.task ("JS: Build", ფუნქცია () (gulp.src (path.src.js) // იპოვე ჩვენი ძირითადი ფაილი .Pipe (Rigger ()) // Rigger მეშვეობით Rigger .Pipe (Sourcemaps .init ()) // ინიციალიზაცია Sourcemap .Pipe (Uglify ()) // მღეროდა ჩვენი JS .Pipe (Sourcemaps.Write ()) // Propying ბარათები. მილის (გადარქმევა (სუფიქსის (სუფიქსის: ".Min"))) / დამატება suffix.min to output file.pipe (gulp.dest (path.build.js)) // გადატვირთეთ მზად ფაილი აშენებაში .პეპტი (Connect.Reload ()) // და გადატვირთეთ სერვერი);

აშენების sprite

ყველა გამოსახულება აერთიანებს Sprites დაამატოთ მდე SRC / CSS / Sprites დირექტორია და შემდეგ პერსპექტივაში მეშვეობით gulp გახდეს ერთი spriting იმიჯი. Sprites, თქვენ არ უნდა დაამატოთ ლოგოები და დაფები გარეშე ნათელი ზომის.

/ Bilda Sprites Gulp.task ("Sprites: Build", ფუნქცია () (var spritteata \u003d gulp.src (path.src.sprites) // შეარჩიეთ სად უნდა მიიღოს სურათები გაერთიანების sprites (spriteesmith ((ImGname: " Sprite.png ", // spray image cssname სახელი:" sprite.styl ", // სტილის სახელი, სადაც თქვენ შეინახეთ გამოსახულება პოზიციები IMGPath:" სურათები / Sprite.png ", // Way Way Wears Sprite Cssformat:" Stylus "// ფორმატი, რომელშიც მე ვამუშავებ CSSstemplate პოზიციას:" Stylus.template.mustache ", // ფაილი ნიღაბი CsSvarmap: ფუნქცია (sprite.name \u003d" s- "+ sprite.name // თითოეული sprite- ის სახელი შედგება ფაილის სახელი და დიზაინი "S-" სახელით NAME))))))))))));); sprittata.img.pipe (gulp.dest (path.build.sprites)); // გზა, სადაც ჩვენ გადავარჩინოთ სურათი Spritedata. css.pipe (gulp.dest (გზა .build.spritescss)); // გზა, სადაც ჩვენ შეინახეთ სტილის);

გამომავალი Sprite, საკმარისია გამოიყენოთ ნარევი. მაგალითად, for lorem.png ფაილი, ნიმუში sprite გამოიყურება ასე:

Lorem Sprite ($ S-LORM)

ახლა ობიექტი კლასის.ლორემ მიიღებს სურათის ზომას და გამოსახულებას, როგორც ფონზე.

Bild სტატიკური გამოსახულებები

სტატიკური გამოსახულებები გამოსახულია განლაგების თარგში.

// Buildim Static Images gulp.task ("image: build", ფუნქცია (gulp.src (path.src.img) // აირჩიეთ ჩვენი სურათები. მილის (ImageMin ((/ მღერიან მათ პროგრესული: ჭეშმარიტი, // შეკუმშვისას: [(RemoveViewbox: FALSE)], // svg interlaced: true, //svg.gif Optimizationlevel: 3// შეკუმშვის კოეფიციენტი 0-დან 7))) .pipe (gulp.dest (გზა. img)) // განლაგება აშენება .Pipe (Connect.Reload ()) // გადატვირთეთ სერვერი));

Bild დინამიური სურათები

დინამიური სურათები არის შინაარსის სურათები, რომელიც შეიცვლება საიტზე და თარგის დონეზე მხოლოდ დემონსტრაციას უკავშირდება. მაგალითად, ეს შეიძლება იყოს ახალი ამბების სურათები და ა.შ.

// BuildiM დინამიური სურათები gulp.task ("imagescontent: აშენება", ფუნქცია () (gulp.src (path.src.conentimg) .Pipe (ImageMin ((/ Sing მათ პროგრესული: True, //spage.jpg svgoplugins: [(RemoveViewbox: FALSE)], // svg interlaced: true, //spotion.gif ოპტიმიზაცია: 3// შეკუმშვის კოეფიციენტი 0-დან 7))) .pipe (gulp.dest.conentimg)) // ჩატვირთვა აშენდება .Pipe (Connect.Reload ()) // გადატვირთეთ სერვერი);

Bildim CSS.

// შენობა Cust CSS Gulp.Task ("Cssown: Build", ფუნქცია () (gulp.src (path.src.css) // აირჩიეთ ჩვენი ძირითადი სტილის ფაილი. მილები (sourcemaps.init ()) // ინიცირება soucemap. მილები (Stylus (Compress: True ", მოიცავს CSS": TRUE))) // Compile Stylus .Pipe (Prefixer (ბრაუზერი: ["ბოლო 3 ვერსია", "\u003e 1%", "IE 8", "ანუ 7 "]))))))))))))))))))))))))))))))))))))))))))))))))))))))))))) // დაამატეთ გამყიდველი პრეფიქსები.პე (Cssmin ()) // surminem.pipe (sourcemaps.write ()) // propyash sourcemap .Pipe (გადარქმევა (სუფიქსის (სუფიქსის:" .Min "))) / / add Suffix.Min to გამომავალი ფაილის სახელი. Pipe (gulp.dest (path.build.css)) // სასმელი აშენება .Pipe (Connect.Reload ()) // გადატვირთეთ სერვერი));

ცალკე ამოცანა გარე სტილისთვის:

// Building Vendon CSS Gulp.Task ("Cssvendor: Build", ფუნქცია () (gulp.src (path.src.src.sssvendor) // ჩვენ ვიღებთ გამყიდველი .პეპის საქაღალდე (sourcemaps.init ()) // ინიციალიზაცია Soucemap. მილები (Cssmin ()) // Surrem.Pipe (Sourcemaps.write ()) // Propyash Sourcemap .Pipe (gulp.dest.css)) // გადმოტვირთული აშენებისას (Connect.Reload () // გადატვირთეთ სერვერი));

ასევე დაამატოთ ამოცანა Bild გენერალური CSS:

// Bildim CSS მთელი gulp.task ("CSS: აშენება", ["CSSown: Build", // "Cssvendor: Build"]);

იმ შემთხვევაში, თუ თქვენ უნდა გამოვიყენოთ გარე სტილის ცალკე სახლიდან და გადატვირთეთ ისინი. ცალკე ფაილები თქვენ უნდა rassate ხაზი "Cssvendor: აშენების"

აშენების შრიფტები

// bildim gulp.task შრიფტები ("შრიფტები: აშენება", ფუნქცია () (gulp.src (path.src.fonts) .pipe (gulp.dest (path.build.fonts)) // განლაგება აშენება));

Build.htaccess.

// Bildim htaccess gulp.task ("Htaccess: აშენების", ფუნქცია () (gulp.src.src.htaccess) .Pipe (gulp.dest (path.build.htaccess)) // განლაგების აშენება));

საერთო აშენება

იმისათვის, რომ ჩვენთვის ყოველი ნაწილი ცალკე შეიძინა, ზოგადი აშენების მიზნით Propyat ამოცანა:

// Bildim ყველა gulp.task ("Build", ["HTML", "Jshint: Build", "JS: Build", "Sprites: Build", "CSS: Build", "შრიფტები: აშენება", " Htaccess: აშენება, "გამოსახულება: აშენება", "imagescontent: აშენება"]);

დასუფთავების Bilda

ზოგჯერ აუცილებელია აშენების დირექტორიაში სრულად გასუფთავება. აქ მომდევნო დავალება მოვა სამაშველოში:

// სუფთა Bild Folder Gulp.task ("სუფთა", ფუნქცია (CB) (Rimraf (Path.Clean, CB););

Watch ან თვალთვალის ცვლილებები რეალურ დროში

ერთ-ერთი ყველაზე მნიშვნელოვანი და სასარგებლო თვისებები Gulp არის watch ფუნქცია, რომელიც საშუალებას გაძლევთ აკონტროლოთ რეალურ დროში ყველა ცვლილება მიერ წარმოებული ფაილი და, დამოკიდებულია ამ, ასრულებს კონკრეტულ ნაბიჯებს:

// watch gulp.task ("watch", ფუნქცია () (// bildim html შემთხვევაში შეცვლის watch (, ფუნქცია (ღონისძიება, CB) (GULP.START ("HTML: BUILD");) // buildim Sprites შეცვლის Watch (ფუნქცია (ღონისძიება, CB) (GULP.START ("Sprites: Build");)) // Buildim Contextual Sampling შეცვლის Watch (ფუნქცია (ღონისძიება, CB) (GULP. დაწყება ("imagescontent: build");))) // Bildim CSS შეცვლის შემთხვევაში (ფუნქცია (ღონისძიება, CB) (GULP.START ("CSS: BUILD");); // შეამოწმეთ JS- ში შეცვლის Watch (, ["Jshint"]) // Bildim JS შეცვლის შემთხვევაში (ფუნქცია (ღონისძიება, CB) (Gulp.start ("JS: Build");); // Bildim სტატიკური გამოსახულებები შეცვლის შემთხვევაში (ფუნქცია ("სურათი: აშენება");) // Bildim შრიფტები თუ თქვენ შეცვლით watch (ფუნქცია (ღონისძიება, CB) (GULP.START ("შრიფტები: აშენება");); / Bildim Htccess შეცვლის შემთხვევაში (ფუნქცია (ღონისძიება, CB) (Gulp.start ("Htaccess: Build");));

ნაგულისხმევი ქმედებები

ნაგულისხმები ქმედებები - რომელი ამოცანები შეასრულებს სამუშაო მენეჯერს კონსოლში Gulp- ის ბრძანების შესასვლელად:

// ნაგულისხმევი ქმედებები gulp.task ("default", ["აშენება", "Watch", "Connect"]);

ჩვენს შემთხვევაში, თავდაცვაზე, ჩვენ პროექტს მივიღებთ, ჩვენ გადავხედავთ Watch რეჟიმში და სერვერზე დაიწყება.

ბრძანების ბრძანებები

ყველა Galpa ბრძანებები ბრძანების ხაზისთვის შედგება ორი ნაწილისაგან პირდაპირ გუნდი Gulp. და მეშვეობით უფსკრული სახელი ამოცანა. აქ არის ჩამონათვალი ბრძანებები, რომლებიც გამოიყენება ჩვენი Config:

• gULP - ძირითადი ბრძანება, იწყებს დავალებას
• gulp build - bildim ყველა
• gulp watch - დაწყება watch
• gulp სუფთა - დასუფთავების მშენებლობის კატალოგი
• gulp Connect - დაწყება სერვერი
• gulp HTML: აშენების - HTML Bild
• gulp jshint: აშენების - შეამოწმეთ JS for შეცდომები
• gulp JS: Build - Build JS
• gulp Sprites: Build - Build Sprite
• gulp Image: Build - Bild Static Images
• gulp imagecontent: აშენების - Bild დინამიური სურათები
• gulp Cssown: Build - CSS საბაჟო Bild
• gulp Cssvendor: Build - Bild გარე CSS
• gulp CSS: აშენების - საერთო CSS Bild
• gulp შრიფტები: Build - Bild შრიფტები
• gulp htaccess: build - build.htaccess

ამ ეტაპზე, gulpfile.js დასრულდა.

დააკოპირეთ პროექტში დაწყებული პაკეტი

დასაწყისისთვის, გაიაროს კონსოლი საქაღალდეში, სადაც ჩვენ ვითარდება, როგორიცაა CD განვითარება / მაგალითი და დააკოპირეთ ყველაფერი საწყისი პაკეტის დირექტორია ჩვენი პროექტის CP -A ~ / განვითარება / დაწყების /. ~ / განვითარება / მაგალითი /

ეს ასლი მეთოდი ყველაზე მოსახერხებელია, რადგან ეს ზუსტად ყველაფერს გადააჭარბებს, მათ შორის ფარული ფაილების ჩათვლით .Gitignore და ა.შ.

დასკვნა

გამოყენება ეს სახელმძღვანელო ჩვენ მოვამზადეთ დაწყებული პაკეტი თქვენს პროექტებში თქვენი პროექტების გამოყენების მიზნით.

ასევე ეს პაკეტი ხელმისაწვდომია GitHub- ზე

Პოსტსკრიპტუმი

ეს სტატია არ არის საბოლოო და განახლდება ცვლილებებისა და გაუმჯობესების მიხედვით.