Gulp de აღწერა რუსულად. Gulp-ის ინსტალაცია და გამოყენება

Gulp-ის დაყენება საკმაოდ მარტივია. პირველი, დააინსტალირეთ Gulp პაკეტი გლობალურად:

npm ინსტალაცია -g gulp

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

npm install --save-dev gulp

Gulp-ის გამოყენება

მოდით შევქმნათ Gulp დავალება ჩვენი JavaScript-ის ერთ-ერთი ფაილის მინიმიზაციისთვის. შექმენით ფაილი სახელად gulpfile.js. ის განსაზღვრავს თქვენს ამოცანებს, რომლებიც შესრულებულია gulp ბრძანებით.

დაამატეთ შემდეგი ბრძანებები თქვენს gulpfile.js ფაილს:

Var gulp = მოითხოვს ("gulp"), uglify = მოითხოვს ("gulp-uglify"); gulp.task("minify", ფუნქცია () ( gulp.src("js/app.js") .pipe(uglify()) .pipe(gulp.dest("build")) ));

დააინსტალირეთ gulp-uglify npm-ის საშუალებით გაშვებით npm ინსტალაცია --save-dev gulp-uglifyდა შემდეგ შეასრულეთ დავალება gulp minify-ის საშუალებით. ვთქვათ, js საქაღალდეში გაქვთ ფაილი სახელად app.js, build საქაღალდეში შეიქმნება ახალი app.js და შეიცავს js/app.js-ის შეკუმშულ ვერსიას.

მართლა რა ხდება აქ?

ჩვენ ვაკეთებთ რამდენიმე რამეს ჩვენს gulpfile.js ფაილში. პირველ რიგში, ჩვენ ვტვირთავთ gulp და gulp-uglify მოდულებს:

Var gulp = მოითხოვს ("gulp"), uglify = მოითხოვს ("gulp-uglify");

ჩვენ განვსაზღვრავთ ამოცანას სახელად minify, რომელიც გაშვებისას იძახებს მეორე არგუმენტად მოცემულ ფუნქციას:

Gulp.task("minify", ფუნქცია () ( ));

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

Gulp.src("js/app.js") .pipe(uglify()) .pipe(gulp.dest("build"))

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

ნაკადები

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

ზემოთ მოყვანილ მაგალითში, gulp.src() ფუნქცია იღებს სტრიქონს, რომელიც შეესაბამება ფაილს ან ფაილების კომპლექტს და ქმნის ობიექტების ნაკადს, რომელიც წარმოადგენს ამ ფაილებს. შემდეგ ისინი გადადიან (ან მიედინება) uglify() ფუნქციაში, რომელიც იღებს ფაილის ობიექტებს და აბრუნებს ფაილის ახალ ობიექტებს მინიფიცირებული წყაროთ. ეს შედეგი შემდეგ მიედინება gulp.dest() ფუნქციაში, რომელიც ინახავს შეცვლილ ფაილებს.

აი რა ხდება დიაგრამის სახით:

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

Gulp.task("js", ფუნქცია () ( return gulp.src("js/*.js") .pipe(jshint()) .pipe(jshint.reporter("default")) .pipe(uglify() ) .pipe(concat("app.js")) .pipe(gulp.dest("build")); ));

ამის გასაშვებად, დააინსტალირეთ gulp, gulp-jshint, gulp-uglify და gulp-concat.

ეს ამოცანა იღებს ყველა ფაილს, რომელიც შეესაბამება js/*.js-ს (სხვა სიტყვებით რომ ვთქვათ, ყველა JavaScript ფაილები js საქაღალდიდან), აწარმოებს JSHint-ს მათზე, გამოსცემს ანგარიშს, ამცირებს თითოეულ ფაილს და შემდეგ აერთიანებს მათ და ინახავს build/app.js-ში. დიაგრამის სახით:

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

ნაკადების უკეთ გასაგებად წაიკითხეთ Stream Handbook.

gulp.src()

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

დანარჩენი ორი დანამატი უფრო ნათელია: uglify() ფუნქცია ამცირებს კოდს, ხოლო concat("app.js") ფუნქცია აერთიანებს ყველა ფაილს ერთ სახელად app.js.

gulp-load-plugin

მოდული, რომელიც მე საკმაოდ გამოსადეგია, ეწოდება gulp-load-plugins, რომელიც ავტომატურად ატვირთავს Gulp-ის ნებისმიერ დანამატს package.json ფაილიდან და ანიჭებს მათ ობიექტს. ძირითადი განაცხადი შემდეგია:

Var gulpLoadPlugins = მოითხოვს("gulp-load-plugins"), plugins = gulpLoadPlugins();

თქვენ შეგიძლიათ დაწეროთ ყველაფერი ერთ სტრიქონში ( var plugins = მოითხოვს ("gulp-load-plugins")();), მაგრამ მე არ ვარ მოთხოვნის ერთი ხაზის დიდი გულშემატკივარი.

ამ კოდის გაშვების შემდეგ, დანამატის ობიექტი შეიცავს თქვენს დანამატებს CamelCase-ის სტილის სახელებით (მაგალითად, gulp-ruby-sass ჩაიტვირთება როგორც plugins.rubySass ). თქვენ შეგიძლიათ გამოიყენოთ ისინი ჩვეულებრივი გზით. მაგალითად, ჩვენი js ამოცანა ასე შემცირდება:

Var gulp = მოითხოვს ("gulp"), gulpLoadPlugins = მოითხოვს ("gulp-load-plugins"), plugins = gulpLoadPlugins(); gulp.task("js", ფუნქცია () ( return gulp.src("js/*.js") .pipe(plugins.jshint()) .pipe(plugins.jshint.reporter("default")) .pipe (plugins.uglify()) .pipe(plugins.concat("app.js")) .pipe(gulp.dest("build")); ));

მიმაგრებულია package.json ფაილი, რომელიც შეიცავს რაღაც მსგავსს:

( "devDependencies": ( "gulp-concat": "~2.2.0", "gulp-uglify": "~0.2.1", "gulp-jshint": "~1.5.1", "gulp": " ~3.5.6" ))

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

მარტის დასაწყისში გამოშვებულმა gulp-load-plugins-ის 0.4.0 ვერსიამ დაამატა მოდულის ზარმაცი დატვირთვა, რაც აუმჯობესებს შესრულებას. დანამატები არ იტვირთება მათ გამოძახებამდე, რაც იმას ნიშნავს, რომ თქვენ არ უნდა ინერვიულოთ იმაზე, რომ პაკეტი.json-ში გამოუყენებელი დანამატები გავლენას მოახდენს შესრულებაზე (თუმცა ისინი მაინც უნდა მოიხსნას). სხვა სიტყვებით რომ ვთქვათ, თუ თქვენ შეასრულებთ დავალებას, რომელიც მოითხოვს მხოლოდ ორ დანამატს, ის არ ჩატვირთავს ყველა დანამატს, რომელიც მოითხოვს სხვა ამოცანებს.

ფაილების თვალყურის დევნება

Gulp-ს აქვს შესაძლებლობა უყუროს ფაილებს ცვლილებებისთვის და შეასრულოს დავალება ან ამოცანები ცვლილებების აღმოჩენისას. ეს ფუნქცია საოცრად სასარგებლოა (ალბათ ერთ-ერთი ყველაზე სასარგებლოა Gulp-ში ჩემთვის). თქვენ შეგიძლიათ შეინახოთ Less ფაილი და Gulp გადააქცევს მას CSS-ად და განაახლებს ბრაუზერს თქვენი მხრიდან რაიმე ქმედების გარეშე.

ფაილის ან ფაილების საყურებლად გამოიყენეთ gulp.watch() ფუნქცია, რომელიც იღებს ფაილების შაბლონს, ან მათ მასივს (როგორიცაა gulp.src() ), ან ამოცანების მასივს მათ გასაშვებად ან გამოძახების შესასრულებლად. ფუნქცია.

ვთქვათ, გვაქვს build ამოცანა, რომელიც აქცევს ჩვენს შაბლონის ფაილებს HTML-ად და გვსურს განვსაზღვროთ საყურებელი დავალება, რომელიც უყურებს შაბლონის ცვლილებებს და აწარმოებს დავალებას მათი HTML-ში გადასაყვანად. ჩვენ შეგვიძლია გამოვიყენოთ საათის ფუნქცია შემდეგნაირად:

Gulp.task("watch", ფუნქცია () ( gulp.watch("templates/*.tmpl.html", ["build"]); ));

ახლა, როდესაც შეიცვლება შაბლონის ფაილი, გაშვებული იქნება build ამოცანა, რომელიც გამოიმუშავებს HTML-ს.

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

Gulp.watch("templates/*.tmpl.html", ფუნქცია (event) ( console.log ("მოვლენის ტიპი: " + event.type); // დაემატა, შეიცვალა ან წაიშალა console.log ("მოვლენის გზა: " + event.path); // ფაილის გზა ));

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

Var watcher = gulp.watch ("templates/*.tmpl.html", ["build"]); watcher.on("change", ფუნქცია (event) ( console.log("მოვლენის ტიპი: " + event.type); // დაემატა, შეიცვალა ან წაშალა console.log ("მოვლენის გზა: " + event.path) ; // ფაილის გზა ));

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

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

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

watcher.end()
აჩერებს მეთვალყურეს (აღარ იქნება დავალებების ან გამოძახების გამოძახება).
watcher.files ()
აბრუნებს დამკვირვებლის მიერ ნანახი ფაილების სიას.
watcher.add(glob)
ამატებს მაყურებელს ფაილებს, რომლებიც ემთხვევა მითითებულ გლობალურ შაბლონს (ასევე იღებს არასავალდებულო გამოძახების ფუნქციას მეორე არგუმენტად).
watcher.remove(filepath)
შლის მითითებულ ფაილს დამკვირვებლიდან.

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

ასევე, ამ მასალის საფუძველზე გადაიღეს ვიდეო, ასე რომ თქვენ შეგიძლიათ აირჩიოთ რა ფორმით მოიხმაროთ.

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

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

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

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

Const fs = მოითხოვს ("fs"); const input = fs.createReadStream("myfile"); input.on("მონაცემები", (ნაწილი) => ( console.log(chunk); )); input.on("ბოლო", () => ( console.log("ფაილი იკითხება"); ));
ნაკადები nodejs-ში შეიძლება იყოს თითქმის ნებისმიერი, ფაილებიდან ან სტრიქონებიდან სოკეტებამდე. მაგალითად, ცნობილ Express ჩარჩოში, HTTP მოთხოვნადა პასუხი სხვა არაფერია, თუ არა ნაკადები. ნაკადები შეიძლება იყოს მხოლოდ წაკითხვის, მხოლოდ ჩაწერის ან ორივე.

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

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

მაგალითად, ასე შეგვიძლია განვსაზღვროთ, რისი მიცემა გვინდა შედეგად და თავად ძრავა უკვე დაკავებულია „როგორ“ გაცემაში.

Const fs = მოითხოვს("fs"); const express = მოითხოვს ("express"); var app = express(); app.get("/", ფუნქცია (req, res) ( fs.createReadStream("myfile") .pipe(res); )); app.listen(3000);
გაითვალისწინეთ, რომ მოთხოვნის დამმუშავებელი სრულდება ფაილის გახსნამდე - კვანძის ძრავა ზრუნავს დანარჩენზე.

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

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

Const gulp = მოითხოვს ("gulp"); gulp.task("ნაგულისხმევი", ფუნქცია() ( gulp.src("./*.js") .on("მონაცემები", ფუნქცია(ფაილი) ( console.log("მონაცემების გამოძახება"); console.log( file.inspect()); /* გამოდის: * მონაცემთა გამოძახება * > * მონაცემთა გამოძახება * > */ )) .pipe(gulp.dest("dist/")); ));
კონტენტი შეიძლება წარმოდგენილი იყოს ორ ფორმატში: უკვე წაკითხული ბუფერის სახით, ან როგორც კვანძის მშობლიური ნაკადი. გალპოვის მილის თითოეული ეტაპი იღებს ასეთ ფაილებს, როგორც შეყვანას, ახდენს რაიმე სახის ტრანსფორმაციას და გადასცემს მას შემდეგი ჯაჭვის გამოსავალზე. ბოლო ჯაჭვი ჩვეულებრივ ინახავს მათ დისკზე.

Pipe(gulp.dest("dist/"));
იმის გაცნობიერება, რომ ყელში ძაფები განსხვავებულია, მივყავართ განმანათლებლობამდე და გაგებამდე, რადგან ის ხსნის პრობლემებისა და შეცდომების უმეტესობას.

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

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

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

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

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

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

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

cd path_to_your_project (cd "user/projects/firstProject")
npm init

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

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

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

npm i gulp --save-dev

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

"devDependencies" :(
"gulp": "^3.9.1"
}

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

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

ფრონტ-ენდის განვითარების პროცესის დასაჩქარებლად, ჩვენ ავტომატიზირებთ ზოგიერთ დავალებას Gulp-ის ონკანის გამოყენებით.
ამისათვის ჩვენ გვჭირდება NPM პაკეტის მენეჯერი. მაგრამ იმისათვის, რომ დააინსტალიროთ NPM, ჯერ უნდა დააინსტალიროთ Node.js.

ნაბიჯი 1 დააინსტალირეთ Node
ჩვენ გადავდივართ ოფიციალურ საიტზე https://nodejs.org და ჩამოვტვირთავთ რეკომენდებულ ვერსიას.

გაუშვით ინსტალერი ადმინისტრატორის უფლებებით.
ინსტალაციის შემდეგ გამოჩნდება 2 ხატულა: Node.js და Node.js coomand prompt. ისინი არ გამოგვადგება, რადგან ჩვენ არ ვიყენებთ Node.js-ს და არის უფრო მოსახერხებელი ვარიანტები კონსოლის გასაშვებად:
1. გამოიყენეთ Command Console TotalCommander (Commands - Open command console).
2. ხანგრძლივად Shift და გასახსნელად დააწკაპუნეთ მარჯვენა ღილაკით კონტექსტური მენიუ. მასზე გამოჩნდება პუნქტი "გახსენით ბრძანების ფანჯარა".
უმჯობესია ბრძანების ხაზი გაუშვათ თქვენთვის საჭირო პროექტის დირექტორიადან, კონსოლი დაუყოვნებლივ აჩვენებს გზას სასურველ დირექტორიაში, ეს აღმოფხვრის ბილიკზე ხელით შეყვანის აუცილებლობას.

კვანძის და npm ვერსიების შესამოწმებლად, აკრიფეთ
კვანძი -v და დააჭირეთ Enter
შემდეგ npm -v

NPM ვერსიები ჩვეულებრივ განახლდება უფრო ხშირად, ვიდრე კვანძის ვერსიები უახლესი ვერსიის დასაყენებლად:
npm ინსტალაცია [ელფოსტა დაცულია]-გ

npm ბრძანებები გვჭირდება :
npm სია- ყველას სია დაინსტალირებული პაკეტები
npm -g ls --სიღრმე=0- გლობალურად დაინსტალირებული პაკეტების სია
npm გამოქვეყნდაშეამოწმეთ თუ პაკეტები მოძველებულია
npm განახლების gulp- მოდულის ვერსიების განახლება
npm init- შექმენით პაკეტი.json
npm დააინსტალირე package_name- დააინსტალირეთ პაკეტი (package_name - სასურველი პაკეტის სახელი)
npm install package_name --save-dev- დააინსტალირეთ პაკეტი და გააკეთეთ ჩანაწერი მის შესახებ package.json-ში devDependencies განყოფილებაში
npm დეინსტალაცია პაკეტის_სახელი- პაკეტის ამოღება
npm ინსტალაცია- დააინსტალირეთ package.json-ში ჩამოთვლილი ყველა პაკეტი
წარმოებაში შესვლამდე npm shrinkwrap- დააფიქსირეთ პაკეტის ვერსიები, ახლა npm install დააინსტალირებს მათ და დარწმუნებული იქნებით, რომ ყველაფერი ისე იმუშავებს, როგორც უნდა

აბრევიატურები
-v: --ვერსია
-გ: --გლობალური
-S: --შენახვა
-D: --შენახვა-დევ
-y: --დიახ
-n: --კი მცდარია

ნაბიჯი 2 gulp-ის დაყენება
პირველი gulp უნდა დამონტაჟდეს გლობალურად.

ჩვენ ვიწყებთ ბრძანების კონსოლს.
ზოგჯერ ზოგიერთ რესურსზე არის დოლარის ნიშანი ბრძანების წინ, მაგალითად
$ npm install --global gulp-cli

არ დააკოპიროთ დოლარის ნიშანი, ჩასვით მხოლოდ თავად ბრძანება
npm ინსტალაცია --global gulp-cli

მინიშნება:დაკოპირებული ტექსტის ჩასმა ბრძანების ხაზი, გახსენით ბრძანების ხაზი, დააჭირეთ ALT + SPACE -> ნაგულისხმევი მნიშვნელობები, მონიშნეთ ველი მაუსით აირჩიეთ. ახლა თქვენ შეგიძლიათ აირჩიოთ ტექსტი მაუსით, დააკოპირეთ, com. დააწკაპუნეთ ხაზზე მარჯვენა ღილაკით - ტექსტი ავტომატურად ჩაიდება.

ნაბიჯი 3. gulp-თან მუშაობა კონკრეტულ პროექტში

3.1 პირველი, მოდით შევქმნათ დამოკიდებულების პაკეტის პაკეტი.json
პაკეტი.json ფაილი შეიცავს ინფორმაციას, რომელსაც ჩვენ შევიყვანთ ტერმინალში და ყველა პაკეტის სიას, რომლებსაც ვიყენებთ პროექტში.

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

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

მინიშნება:
თქვენ შეგიძლიათ შექმნათ ეს ფაილი უფრო სწრაფად და მარტივად, --yes ოფციის გამოყენებით (ავტომატურად უპასუხეთ დიახ ყველა კითხვას):
npm init -- დიახ

Კარგია იცოდე:
შეგიძლიათ დააყენოთ ნაგულისხმევი მნიშვნელობები, რომლებიც გამოყენებული იქნება ყოველ ჯერზე npm init-ის გაშვებისას, რაც დაზოგავს თქვენს დროს. ინსტალაციის შემდეგ ისინი ინახება .npmrc ფაილებში.
Მაგალითად:
npm კონფიგურაციის ნაკრები init.author.name "ვალენტინა ვლადოვა"
npm კონფიგურაციის ნაკრები init.author.email" [ელფოსტა დაცულია]"
npm კონფიგურაციის ნაკრები init.author.url "http://simpalmarket.com/"
npm მითითებული init-license MIT
npm მითითებული საწყისი ვერსია 0.0.0
შემდეგ გაუშვით npm init, ყველა მითითებული მნიშვნელობა გაიყვანება შესაბამის ცვლადებში.

როდესაც npm init ითხოვს git repo-ს, დაწერეთ მოკლედ user/repo - npm საკმარისად ჭკვიანია ხაზის გასაფართოვებლად https://github.com/user/repo-ზე. npm ასევე გამოიმუშავებს საცავის, შეცდომების და საწყისი გვერდის ველებს სწორი ფორმატით.

ასე რომ, გადადით პროექტის root საქაღალდეში, გამოიძახეთ ბრძანების კონსოლი და ჩაწერეთ
npm init -- დიახ

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

3.2 დააინსტალირეთ gulp ადგილობრივად
კონსოლში პროექტის საქაღალდეში შეიყვანეთ:
npm install --save-dev gulp

ან შემოკლებით
npm i gulp --save-dev

სია იქნება გაფრთხილება - იგნორირება.

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

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

ჩანაწერი დაემატება package.json ფაილს
"devDependencies" :(
"gulp": "^3.9.1"
}

ახლა თქვენ შეგიძლიათ დააინსტალიროთ სხვადასხვა დანამატები gulp-ისთვის.
http://gulpjs.com/plugins/
საძიებო ველში შეიყვანეთ თქვენთვის საინტერესო მოდულის სახელი.

დანამატების დაყენება შესაძლებელია ერთდროულად, მაგალითად:
npm install --save-dev gulp-plumber
ასევე სია, რომელიც გამოყოფილია ინტერვალით, მაგალითად:
npm დააინსტალირე gulp-sass gulp-plumber gulp-autoprefixer gulp-minify-css --save-dev
დანამატები ინსტალაციისთვის და დანამატები ასამბლეისთვის საუკეთესოდ არის დამონტაჟებული ცალკეული ბრძანებებით

npm init

დაგჭირდებათ:

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

npm i –g ყლუპი

დავალების სახელი

ყლუპის ტესტი

ამოცანა მუშაობს.

ყელში მიირთვით

npm i gulp-sass --save-dev

sass-ის შედგენა css-ზე
პრეფიქსების დამატება
ფაილის შენახვა src/css-ში

ამოცანის შექმნა gulp-ში

დასკვნა.

https://gulpjs.com/plugins/

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

npm init

დაგჭირდებათ:

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

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

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

ჯარიმა. NPM დაწყებულია. ახლა packages.json ფაილი გამოჩნდა root-ში - პაკეტის მენეჯერის კონფიგურაციის ფაილი.

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

npm i –g ყლუპი

ახლა მოდით დავაყენოთ gulp პროექტისთვის:

npm install --save-dev gulp

პროექტისთვის ყველა ღუმელი დამონტაჟებულია.

შევამოწმოთ. შევქმნათ gulpfile.js ფაილი და შევქმნათ მასში ერთი სატესტო დავალება, რომელიც კონსოლში გამოჩნდება "მე ვმუშაობ".

var gulp = მოითხოვს ("gulp"); gulp.task("ტესტი", ფუნქცია() ( console.log("ვმუშაობ"); ));

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

დავალების სახელი
ანონიმური ფუნქციარომელიც აღწერს ჩვენს ამოცანას

ახლა კონსოლში გაუშვით შემდეგი ბრძანება

ყლუპის ტესტი

ამოცანა მუშაობს.

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

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

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

npm და ბრაუზერის სინქრონიზაცია --save-dev

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

Gulp.task("serve", ["sass"], function() ( browserSync.init(( სერვერი: "src/" )); gulp.watch("src/css/*.css")on("change ", browserSync.reload); gulp.watch("src/*.html").on("change", browserSync.reload); ));

დავალებას სერვისი ეწოდება. და ბრაუზერის სინქრონიზაცია ავტომატურად განაახლებს ბრაუზერის გვერდს, თუ შეიცვალა css ფაილები (მდებარეობს src/css საქაღალდეში) და html ფაილები (მდებარეობს src საქაღალდეში).

ამ ამოცანის დასაწყებად, გაუშვით ბრძანება

ყელში მიირთვით

მე ვიყენებ sass-ს განლაგებისთვის. ამიტომ, sass-დან css-მდე კომპილაციისთვის ვიყენებ gulp-sass პაკეტს.

gulp-sass-ის ინსტალაცია და კონფიგურაცია

gulp-sass კონსოლში დასაყენებლად, გაუშვით ბრძანება:

npm i gulp-sass --save-dev

ახლა მოდით შევქმნათ sass ამოცანა, რომელიც შეადგენს sass-ს css-ს. და შეცვალეთ სერვისის დავალება ისე, რომ ჩვენი ბრაუზერის სინქრონიზაცია მოისმინოს ამის ნაცვლად css ფაილისასი.

var gulp = მოითხოვს ("gulp"); var browserSync = მოითხოვს("ბრაუზერის-სინქრონიზაცია").create(); var sass = მოითხოვს ("gulp-sass"); gulp.task("serve", ["sass"], function() ( browserSync.init(( სერვერი: "src/" )); gulp.watch("src/sass/*.sass", ["sass" ]); gulp.watch("src/*.html").on("ცვლილება", browserSync.reload); )); gulp.task("sass", function() ( return gulp.src("src/sass/*.sass") .pipe(sass().on("error", sass.logError)) .pipe(gulp. dest("src/css")) .pipe(browserSync.stream()); ));

ახლა, როდესაც თქვენ ასრულებთ სერვისის ამოცანას, sass ამოცანა იმუშავებს.

gulp-autoprefixer-ის ინსტალაცია და კონფიგურაცია

gulp-autoprefixer-ის დასაყენებლად გაუშვით ბრძანება:

npm და gulp-autoprefixer --save-dev

და დაამატეთ პრეფიქსი sass ამოცანას.

var gulp = მოითხოვს ("gulp"); var browserSync = მოითხოვს("ბრაუზერის-სინქრონიზაცია").create(); var sass = მოითხოვს ("gulp-sass"); var autoprefixer = მოითხოვს ("gulp-autoprefixer"); gulp.task("serve", ["sass"], function() ( browserSync.init(( სერვერი: "src/" )); gulp.watch("src/sass/*.sass", ["sass" ]); gulp.watch("src/*.html").on("ცვლილება", browserSync.reload); )); gulp.task("sass", function() ( return gulp.src("src/sass/*.sass") .pipe(sass().on("შეცდომა", sass.logError)) .pipe(autoprefixer( ( ბრაუზერები: ["ბოლო 2 ვერსია"], კასკადი: false ))) .pipe(gulp.dest("src/css")) .pipe(browserSync.stream()); ));

ახლა, sass დავალების გაშვებისას, c-ს ექნება:

sass-ის შედგენა css-ზე
პრეფიქსების დამატება
ფაილის შენახვა src/css-ში

შემდეგი პაკეტი აერთიანებს ყველა css ფაილს ერთში.

contactCss-ის ინსტალაცია და კონფიგურაცია

contactCss-ის დასაყენებლად გამოიყენეთ შემდეგი ბრძანება:

npm მე gulp-concat-css --save-dev

და დაამატეთ ამ პაკეტის შესრულება sass ამოცანას. (ჩვენ გავაერთიანებთ ყველა css ფაილს style.css-ში)

var gulp = მოითხოვს ("gulp"); var browserSync = მოითხოვს("ბრაუზერის-სინქრონიზაცია").create(); var sass = მოითხოვს ("gulp-sass"); var autoprefixer = მოითხოვს ("gulp-autoprefixer"); var concatCss = მოითხოვს ("gulp-concat-css"); gulp.task("serve", ["sass"], function() ( browserSync.init(( სერვერი: "src/" )); gulp.watch("src/sass/*.sass", ["sass" ]); gulp.watch("src/*.html").on("ცვლილება", browserSync.reload); )); gulp.task("sass", function() ( return gulp.src("src/sass/*.sass") .pipe(sass().on("შეცდომა", sass.logError)) .pipe(autoprefixer( ( ბრაუზერები: ["ბოლო 2 ვერსია"], კასკადი: false ))) .pipe(concatCss("style.css")) .pipe(gulp.dest("src/css")) .pipe(browserSync.stream( )))));

ჯარიმა. ახლა მოდით დავამატოთ პაკეტი, რომელიც გადარქმევს ფაილებს. (დაგვჭირდება ის, კოდი ჩვენ შევამცირებთ css და js ფაილებს)

gulp-rename-ის ინსტალაცია და კონფიგურაცია

gulp-rename-ის ინსტალაციისთვის, შეასრულეთ შემდეგი ბრძანება:

npm მე gulp-rename --save-dev

ამ დროისთვის ჩვენ არ დავამატებთ ამ პაკეტს არცერთ ამოცანას.

პაკეტის ინსტალაცია და კონფიგურაცია CSS ფაილების მინიმიზაციისთვის - clean-css

clean-css-ის ინსტალაციისთვის, შეასრულეთ შემდეგი ბრძანება:

npm მე gulp-clean-css --save-dev

ახლა მოდით შევქმნათ mincss ამოცანა, რომელიც დაამატებს ".min" სუფიქსს ფაილის სახელს, მინიმირებს css ფაილს და შეინახავს მას app/css-ში.

var gulp = მოითხოვს ("gulp"); var browserSync = მოითხოვს("ბრაუზერის-სინქრონიზაცია").create(); var sass = მოითხოვს ("gulp-sass"); var autoprefixer = მოითხოვს ("gulp-autoprefixer"); var concatCss = მოითხოვს ("gulp-concat-css"); var cleanCSS = მოითხოვს ("gulp-clean-css"); var rename = მოითხოვს ("gulp-rename"); gulp.task("serve", ["sass"], function() ( browserSync.init(( სერვერი: "src/" )); gulp.watch("src/sass/*.sass", ["sass" ]); gulp.watch("src/*.html").on("ცვლილება", browserSync.reload); )); gulp.task("sass", function() ( return gulp.src("src/sass/*.sass") .pipe(sass().on("შეცდომა", sass.logError)) .pipe(autoprefixer( ( ბრაუზერები: ["ბოლო 2 ვერსია"], კასკადი: false ))) .pipe(concatCss("style.css")) .pipe(gulp.dest("src/css")) .pipe(browserSync.stream( ))))); gulp.task("mincss", function() ( return gulp.src("src/css/*.css") .pipe(rename((suffix: ".min"))) .pipe(cleanCSS()) . pipe(gulp.dest("app/css")); ))

კარგია, მოდით დავაინსტალიროთ gulp პაკეტი, რომელიც შეამცირებს js ფაილებს.

gulp პაკეტის ინსტალაცია და კონფიგურაცია js ფაილების მინიმიზაციისთვის --gulp-uglify

gulp-uglify-ის ინსტალაციისთვის, შეასრულეთ შემდეგი ბრძანება:

npm მე gulp-uglify --save-dev

ახლა შევქმნათ დავალება, რომელიც დაამატებს ფაილს ".min" სუფიქსს, js ფაილს მინიფიცირებს და შეინახავს app/js-ში.

var gulp = მოითხოვს ("gulp"); var browserSync = მოითხოვს("ბრაუზერის-სინქრონიზაცია").create(); var sass = მოითხოვს ("gulp-sass"); var autoprefixer = მოითხოვს ("gulp-autoprefixer"); var concatCss = მოითხოვს ("gulp-concat-css"); var cleanCSS = მოითხოვს ("gulp-clean-css"); var rename = მოითხოვს ("gulp-rename"); var uglify = მოითხოვს ("gulp-uglify"); gulp.task("serve", ["sass"], function() ( browserSync.init(( სერვერი: "src/" )); gulp.watch("src/sass/*.sass", ["sass" ]); gulp.watch("src/*.html").on("ცვლილება", browserSync.reload); )); gulp.task("sass", function() ( return gulp.src("src/sass/*.sass") .pipe(sass().on("შეცდომა", sass.logError)) .pipe(autoprefixer( ( ბრაუზერები: ["ბოლო 2 ვერსია"], კასკადი: false ))) .pipe(concatCss("style.css")) .pipe(gulp.dest("src/css")) .pipe(browserSync.stream( ))))); gulp.task("mincss", function() ( return gulp.src("src/css/*.css") .pipe(rename((suffix: ".min"))) .pipe(cleanCSS()) . pipe(gulp.dest("app/css")); )) gulp.task("minjs", function() ( return gulp.src("src/js/*.js") .pipe(გადარქმევა((სუფიქსი : ".წთ"))) .pipe(ugliify()) .pipe(gulp.dest("app/js")); ))

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

ამოცანის შექმნა gulp-ში

მოდით შევქმნათ min ამოცანა, რომელიც შეასრულებს mincss და minjs ამოცანებს

var gulp = მოითხოვს ("gulp"); var browserSync = მოითხოვს("ბრაუზერის-სინქრონიზაცია").create(); var sass = მოითხოვს ("gulp-sass"); var autoprefixer = მოითხოვს ("gulp-autoprefixer"); var concatCss = მოითხოვს ("gulp-concat-css"); var cleanCSS = მოითხოვს ("gulp-clean-css"); var rename = მოითხოვს ("gulp-rename"); var uglify = მოითხოვს ("gulp-uglify"); gulp.task("serve", ["sass"], function() ( browserSync.init(( სერვერი: "src/" )); gulp.watch("src/sass/*.sass", ["sass" ]); gulp.watch("src/*.html").on("ცვლილება", browserSync.reload); )); gulp.task("sass", function() ( return gulp.src("src/sass/*.sass") .pipe(sass().on("შეცდომა", sass.logError)) .pipe(autoprefixer( ( ბრაუზერები: ["ბოლო 2 ვერსია"], კასკადი: false ))) .pipe(concatCss("style.css")) .pipe(gulp.dest("src/css")) .pipe(browserSync.stream( ))))); gulp.task("mincss", function() ( return gulp.src("src/css/*.css") .pipe(rename((suffix: ".min"))) .pipe(cleanCSS()) . pipe(gulp.dest("app/css")); )) gulp.task("minjs", function() ( return gulp.src("src/js/*.js") .pipe(გადარქმევა((სუფიქსი : ".წთ"))) .pipe(uglify()) .pipe(gulp.dest("app/js")); )) gulp.task("min",["mincss", "minjs"]) ;

ყველა. მოდით ასევე დავაყენოთ ნაგულისხმევი ამოცანა.

gulp ნაგულისხმევი ამოცანის დაყენება

gulp.task("ნაგულისხმევი", ["სერვისი"]);

დასკვნა.

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

თქვენ შეგიძლიათ თავად იპოვოთ საჭირო პაკეტები https://gulpjs.com/plugins/ და დააინსტალიროთ ისინი. და შემდეგ შექმენით ამოცანები განვითარების პროცესის ოპტიმიზაციისთვის.