Pagbati. Kung kasangkot ka sa pag-unlad ng frontend, maaaring napansin mo na madalas mong kailangang gawin ang parehong mga gawain. Magiging mahusay na i-automate ang lahat ng ito at bawasan ang dami ng gawain sa pinakamababa. Mga task manager at project assembler, tulad ng Gulp at ungol.

Ang Gulp ay isang tinidor ng proyekto ng Grunt. Kinuha niya ang pinakamahusay na kasanayan mula sa kanyang magulang. Ang code ng pagtuturo ay nakasulat sa JavaScript. Gumagana ito nang maraming beses na mas mabilis kaysa sa Grunt.

Tunay na malakas ang Gulp. Gagawin nitong mas madali at mas mabilis ang pagbuo ng frontend. Ililista ko ang mga pangunahing gawain na tutulungan ka ng project assembler na malutas.

• Paglikha ng Web Server para sa Pag-debug
• Awtomatikong i-reload ang mga pahina kapag ginawa ang mga pagbabago (LiveReload)
• Pagsubaybay sa mga pagbabago sa mga file ng proyekto
• Gamit ang HTML, CSS, JS preprocessors
• Pinagsasama-sama ang mga file at pinapaliit ang mga ito
• Awtomatikong paggawa ng mga prefix ng vendor para sa mga browser (Autoprefixer)
• Automation ng pamamahala ng file at direktoryo
• Paglulunsad at pagkontrol sa mga panlabas na utos ng operating system
• Paglulunsad at pagkontrol ng mga application
• Pag-optimize ng imahe (compression, pagbabago ng laki, atbp.)
• Pag-upload ng proyekto sa isang panlabas na server gamit ang FTP, SFTP, Git, atbp.
• Pagkonekta at paggamit ng mga karagdagang plugin (ngayon ay mayroon nang 3570 sa kanila; ang solusyon ay maaaring
• maghanap para sa halos lahat ng pang-araw-araw na gawain at higit pa)
• Automation ng manual labor

Pag-install

Ang Gulp ay nangangailangan ng Node.js na tumakbo. Maaari mong i-download ito sa opisyal na website. Pinapayuhan ko kayong i-install ang bersyon ng LTS ng software platform. Pagkatapos i-install ang Node.js, maaari kang magpatuloy sa pag-install ng Gulp. Upang gawin ito, buksan ang operating system console at patakbuhin ang sumusunod na command:

Ginagamit namin ang parameter -g, na nagbibigay-daan sa iyong i-install ang Gulp sa buong mundo sa operating system, nang hindi nakatali sa isang partikular na proyekto.

Mahalaga na walang mga character na Ruso sa landas sa direktoryo ng pag-install. Ito ay maaaring maging sanhi ng ilang gulp plugin na hindi gumana nang tama.

Okay, oras na para gumawa ng proyekto kung saan gagamitin natin ang Gulp. Pumunta sa direktoryo ng proyekto at patakbuhin ang command:

Magpapatakbo ito ng script na magtatanong sa iyo ng ilang katanungan tungkol sa proyekto. Ang resulta ay isang naka-configure na file para sa npm package.json. Ito ang project manifest. Naglalaman ito ng listahan ng mga pakete na ginagamit sa proyekto at iba pang impormasyon. Sa yugtong ito ipinasok ko ang sumusunod na data, iakma ito sa iyong proyekto.

pangalan: (bybtc-landing) na bersyon: (1.0.0) paglalarawan: Landing Page para sa byBTC entry point: (index.js) test command: git repository: https://github.com/Neuropassenger/bybtc-landing.git na mga keyword : landing

Kung gusto mong laktawan ang isang tanong, pindutin lang ang Enter. Gagamitin ang default na halaga. Ngayon ay maaari na naming i-install ang Gulp para sa aming proyekto. Patakbuhin ang utos:

npm i --save-dev gulp

Ang Gulp ay mai-install sa direktoryo ng proyekto, at ang parameter –save-dev ay idaragdag ito sa package.json dependency. Papayagan nito ang isa pang developer na nagbubukas ng iyong proyekto na mabilis na i-deploy ito sa kanilang makina (gamit ang command npm i).

Kung naging maayos ang lahat, dapat lumitaw ang isang direktoryo sa folder ng proyekto node_modules. Naglalaman ito ng naka-install na pakete lagok at lahat ng mga dependency na kailangan para gumana ito.

Panahon na upang lumikha ng pangunahing istraktura ng proyekto. Nananatili ako sa parehong mga pangalan ng direktoryo tulad ng maraming mga developer. Ipinapayo ko sa iyo na gawin din ito, upang mabilis na maunawaan ng ibang tao ang istruktura ng iyong proyekto. Gayunpaman, walang nagbabawal sa iyo na gamitin ang mga pangalan na gusto mo.

Lumikha ng dalawang folder sa root ng proyekto:

• /src/ – ang source code ng proyekto sa panahon ng pagbuo, dito mo ie-edit ang mga file
• /dist/ – mga file at folder ng proyekto pagkatapos ng pagpupulong, tapos na produkto

Catalog /dist/ ay awtomatikong mapupunan kapag binuo ang proyekto. Ipagpatuloy natin ito sa ngayon /src/. Lumikha ng mga sumusunod na folder sa loob:

• /css/ – para sa mga cascading style sheet
• /js/ – para sa mga script ng JavaScript
• /img/ – para sa mga larawan
• /fonts/ – para sa mga font
• /sass/ – para sa mga SASS preprocessor file (kung gumagamit ka ng SASS)
• /libs/ – para sa mga third-party na aklatan

Kung handa na ang lahat, oras na para magpatuloy sa paglikha ng file gulpfile.js sa ugat ng proyekto, na tutulong sa iyo na i-configure ang Gulp. Dito ka makakagawa ng mga tagubilin ng Gulp na makakatulong sa pag-automate ng ilan sa mga gawaing pangmundo.

Mga Tagubilin sa Gulp

Ang anumang pagtuturo ay nilikha sa gulpfile.js gamit ang function gulp.task(). Ang unang parameter ay ang pangalan ng pagtuturo. Pagkatapos ay mayroong isang hanay ng mga pangalan ng mga tagubilin na dapat isagawa bago patakbuhin ang tinukoy na pagtuturo. Ang huling parameter ay isang function na ang katawan ay tumutukoy kung ano ang ginagawa ng pagtuturo.

gulp.task("instruction_name", ["instruction_executed_before_the_current", "another_instruction"], function() ( // Ilang aksyon ));

Upang tawagan ang pagtuturo, gamitin ang sumusunod na command sa console:

gulp command_name

Kino-compile ang SASS sa CSS

Magsimula tayo sa pag-compile ng SASS sa CSS. I-install ang gulp-sass package:

npm i --save-dev gulp-sass

Una kailangan mong ikonekta ang mga pakete na iyong ginagamit gulpfile.js. Gawin natin:

var gulp = require("gulp"), sass = require("gulp-sass");

Ngayon, lumikha tayo ng isang pahayag na mag-iipon ng SASS sa CSS:

gulp.task("sass", function() ( return gulp.src("src/sass/**/*.sass") .pipe(sass()) .pipe(gulp.dest("src/css") );));

Sa unang linya ng mga tagubilin, ipinapahiwatig namin ang mga source file para sa compilation. Sa isang partikular na halimbawa, lahat ng mga file na may extension ay kukunin .sass matatagpuan sa loob ng folder /src/sass/ at mga subfolder nito. Maaari ka ring pumili ng mga partikular na file. Narito ang isang sample na listahan kung paano ka makakapagtakda ng mga path sa mga source file.

• src/sass/main.sass – piliin ang main.sass file
• src/sass/*.sass – pinipili ang lahat ng file na may extension ng sass
• src/sass/**/*.sass – pinipili ang lahat ng file na may extension ng sass sa lahat ng subfolder sa sass folder
• !src/sass/main.sass – main.sass file exception
• [‘!src/sass/main.sass’, ‘src/sass/second.sass’] – pagbubukod ng array ng mga file main.sass at second.sass
• src/sass/**/*.+(scss|sass) – piliin ang lahat ng scss at sass file sa lahat ng subfolder sa sass

Lumikha ngayon sa folder /src/sass/ file pangunahing.sass at tukuyin ang ilang mga estilo dito:

kulay ng katawan: pula na laki ng font: 20px

I-save ang file. Ngayon ay maaari nating suriin kung paano gumagana ang compilation. Sa console pinapatakbo namin ang command:

Sinusuri ang katalogo /src/css/. Dapat itong maglaman ng bagong pinagsama-samang CSS file. Nakikita mo ba? Malaki! Mag-move on na tayo.

Awtomatikong pag-refresh ng pahina (LiveReload)

Lumipat tayo sa pag-automate ng mga update sa page kapag nagbago ang mga ito, ibig sabihin. i-set up natin LiveReload. Ito ay isa sa mga pinakasikat na gawaing kinakaharap. Kakailanganin namin ang npm package Browsersync upang awtomatikong i-update ang browser. I-install natin ito:

npm i --save-dev browser-sync

Kumonekta tayo browser-sync pakete sa simula gulpfile.js, tulad ng ginawa namin kanina sa mga pakete lagok At gulp-sass:

browserSync = nangangailangan("browser-sync");

Gumawa tayo ng mga tagubilin para sa paglulunsad ng Browsersync:

gulp.task("browser-sync", function() ( browserSync(( server: ( baseDir: "src") )); ));

Ang ginawa lang namin ay tumawag sa Browsersync upang simulan at tukuyin ang direktoryo ng proyekto kasama ang mga source file. Mayroong iba pang mga setting para sa Browsersync. Maaari mong malaman ang tungkol sa mga ito sa dokumentasyon.

Magdagdag pa tayo ng isa tubo sa mga tagubilin sass, na gagamitin sa pag-update ng mga istilo kapag nagko-compile ng mga CSS file. Tukuyin ang parameter stream: totoo. Papayagan ka nitong i-update ang mga istilo streaming, nang hindi ganap na nire-reload ang pahina.

Pipe(browserSync.reload(( stream: true; )))

Pagkatapos ay gagawa kami ng tagubilin na susubaybayan ang mga pagbabago sa mga file at i-reload ang pahina kung kinakailangan.

gulp.task("watch", ["browser-sync"], function() ( gulp.watch("src/sass/**/*.sass", ["sass"]); gulp.watch("src /js/**/*.js", browserSync.reload); gulp.watch("src/**/*.html", browserSync.reload); ));

Hayaan mo akong magpaliwanag. Ang mga tagubilin ay isinasagawa bago magsimula browser-sync, ibig sabihin. Nagsisimulang i-debug ng web server ang proyekto. Pagkatapos nito, ang pagtuturo mismo ay isinasagawa panoorin. Upang subaybayan ang mga pagbabago sa mga file na ginagamit namin gulp.watch().

Sa loob ng anonymous na function, 3 beses kaming nag-execute lagok.panoorin na may dalawang parameter. Ang unang parameter ay ang mga file na kailangang subaybayan, ang pangalawa ay ang mga aksyon na kailangang gawin kapag nagbago ang mga file, i.e. sundin ang mga tagubilin sass o i-refresh ang pahina.

Bigyang-pansin ang una lagok.panoorin. sa halip na browserSync.reload ipinapasa namin ang pagtuturo sa array sass, na dapat isagawa kung ang mga file ay nabago. Sa loob nito, gaya ng naaalala mo, i-stream-update namin ang mga istilo sa page.

Minification at pagsasama-sama ng mga file

Halos anumang proyekto ay kailangang gumamit ng mga third-party na aklatan. Ang kanilang numero ay maaaring mula 5 hanggang infinity. Alinsunod dito, ang lahat ng mga ito ay dapat isama sa tapos na produkto. Magiging maganda na i-optimize ang buong bagay na ito, katulad:

• maliitin (i-compress) ang mga ginamit na aklatan
• bawasan ang bilang ng mga kahilingan sa server sa pamamagitan ng pagsasama-sama ng mga aklatan sa isang file

Magdagdag tayo ng ilang mga aklatan sa mga file ng pinagmulan ng proyekto. Para dito ginagamit ko Bower, pakete para sa NPM. I-install ang Bower:

Gumawa ng configuration file .bowerrc sa ugat ng proyekto para sa Bower, kung saan sasabihin namin dito kung saan i-save ang mga aklatan:

("directory": "src/libs/")

I-install natin, halimbawa, ang library jQuery at slider makinis:

bower at jquery slick-carousel

Ngayon ay maaari na nating simulan ang pagsasama-sama at pag-compress ng mga aklatan. Para dito gagamitin namin ang mga pakete gulp-concat At gulp-uglifyjs tungkol sa mga file ng JavaScript. I-install natin ang mga ito:

npm i --save-dev gulp-concat gulp-uglifyjs

Tungkol sa CSS – package gulp-cssnano. I-install:

npm i --save-dev gulp-cssnano

Karaniwang may suffix ang minified file .min. Tutulungan tayo ng package na idagdag ito gulp-rename. I-install:

npm i --save-dev gulp-rename

Magsimula tayo sa pamamagitan ng pagkonekta sa mga naka-install na plugin sa gulpfile.js:

concat = require("gulp-concat"), uglifyJs = require("gulp-uglifyjs"), cssNano = require("gulp-cssnano"), rename = require("gulp-rename");

JavaScript

Gumawa tayo ng pagtuturo na magbibigay-daan sa atin na i-compress at pagsamahin ang mga JavaScript file:

gulp.task("min-js", function() ( return gulp.src([ "src/libs/jquery/dist/jquery.min.js", "src/libs/slick-carousel/dist/slick.min .js" ]) .pipe(concat("libs.min.js")) .pipe(uglifyJs()) .pipe(gulp.dest("src/js")); ));

Sa loob ng isang hindi kilalang function na pahayag min-js Tinukoy muna namin ang mga path patungo sa mga file ng library ng JavaScript bilang isang array. Pagkatapos gamit ang concat, pinagsama namin ang mga aklatan sa isang file libs.min.js uglifyJs. At sa wakas, i-save ang resulta sa isang folder /src/js/.

Maaaring suriin ang mga tagubilin gamit ang command sa console:

Sa folder /src/js/ lalabas ang file libs.min.js, na pinagsasama at pinipiga ang mga file ng library ng JavaScript na ginamit sa proyekto.

CSS

Gawin natin ito sa catalog /src/css/ file libs.sass. Mag-i-import kami ng mga file ng CSS library dito. Halimbawa, gamit ang Bower, na-download ko ang library Bootstrap:

bower at bootstrap

Buksan natin ang file libs.sass at i-import ang Bootstrap CSS file dito:

@import "src/libs/bootstrap/dist/css/bootstrap"

Kaya, kokolektahin namin ang lahat ng CSS library file sa isang lugar, lalo na sa file libs.sass gamit ang import. Ngayon, gumawa tayo ng pagtuturo ng compression:

gulp.task("min-css", ["sass"] , function() ( return gulp.src("src/css/libs.css") .pipe(cssNano()) .pipe(rename(( suffix: ".min" ))) .pipe(gulp.dest("src/css")); ));

Bago ang compression, pinagsama-sama namin ang CSS mula sa SASS gamit ang pagtuturo sass, na ipinahiwatig namin sa array pagkatapos ng pangalan ng pagtuturo min-css.

Sa unang linya kumuha kami ng isang partikular na file, libs.css. Susunod, i-compress namin ito gamit cssNano. Pagkatapos ay gumagamit palitan ang pangalan magdagdag ng panlapi .min. I-save namin ang resulta sa isang folder /src/css/.

Sinusuri ang mga tagubilin:

Kung ginawa mo ang lahat ng tama, pagkatapos ay sa folder /src/css/ dapat lumitaw ang dalawang file. libs.css At libs.min.css. Ihambing ang kanilang mga sukat.

Awtomatikong pagdaragdag ng mga prefix ng vendor (Autoprefixer)

Kapag gumagamit ng mga bagong feature ng CSS, dapat kang magtakda ng mga prefix ng vendor para gumana nang tama ang mga istilo. Ang paggawa ng gayong mga bagay nang manu-mano ay isang walang pasasalamat na gawain. Kaya hayaan natin si Gulp na gawin ito para sa atin.

Mag-install muna tayo gulp-autoprefixer:

npm i --save-dev gulp-autoprefixer

Ikonekta natin ang naka-install na package sa gulpfile.js:

autoprefixer = nangangailangan("gulp-autoprefixer");

Okay, ngayon ay magagamit na natin autoprefixer sa mga tagubilin sass. Gawin natin pagkatapos ng tawag .pipe(sass()), dahil kailangang ilagay ang mga prefix ng vendor pagkatapos ma-convert ang SASS sa CSS. Magdagdag tayo ng bago tubo:

Pipe(autoprefixer([ "huling 10 bersyon" ], ( cascade: totoo )))

Ang unang parameter autoprefixer pumasa kami sa isang array kung saan ipinapahiwatig namin na gusto naming paganahin ang suporta para sa pinakabagong 10 bersyon ng browser. Ang pangalawang parameter ay ang mga setting, kung saan ipinapahiwatig namin na gusto naming makita ang magandang code sa output, i.e. paganahin ang cascading.

Sinusuri namin sa pamamagitan ng pagdaragdag sa pangunahing.sass bagong ari-arian baluktot. Patakbuhin ang mga tagubilin sass:

SA main.css dapat lumitaw ang mga prefix ng vendor. Ito ay napaka-simple, lahat ay awtomatikong gumagana. Kahanga-hanga!

Pangwakas na pagbuo ng proyekto

Ang huling bagay na nais kong hawakan sa gabay na ito para sa mga nagsisimula sa Gulp ay ang panghuling pagbuo ng proyekto. Para dito kailangan namin ng isang folder /dist/, na aming nilikha sa simula pa lamang. Dapat itong linisin bago ang bawat pagpupulong. Para dito gagamitin namin ang NPM package del. I-install natin ito:

npm i --save-dev del

Ikonekta natin ang pakete del V gulpfile.js:

del = nangangailangan("del");

Gumawa tayo ng mga tagubilin malinis upang linisin ang direktoryo / dist/ bago ang pagpupulong:

gulp.task("clean", function() ( return del.sync("dist"); ));

Ngayon ay maaari mong simulan ang direktang pag-assemble ng proyekto. Gumawa tayo ng mga tagubilin magtayo:

gulp.task("build", ["clean", "min-css", "min-js"], function() ( var buildCss = gulp.src([ "src/css/libs.min.css", "src/css/main.css" ]).pipe(gulp.dest("dist/css")); var buildFonts = gulp.src("src/fonts/**/*") .pipe(gulp.dest ("dist/fonts")); var buildJs = gulp.src("src/js/**/*") .pipe(gulp.dest("dist/js")); var buildHtml = gulp.src(" src/*.html") .pipe(gulp.dest("dist")); ));

Bago tumawag sa mga tagubilin magtayo nililinis namin ang folder /dist/ kung sakaling ang pagpupulong ay naisagawa na noon pa man. Pagkatapos ay i-compress at pinagsama namin ang mga file ng JavaScript at CSS gamit ang mga tagubilin min-js At min-css ayon sa pagkakabanggit. Kasabay nito, pinagsama-sama namin ang SASS sa CSS, dahil bago sundin ang mga tagubilin min-css naisakatuparan ang pagtuturo sass.

Sa loob ng katawan ng pagtuturo, kinokopya namin ang inihandang mga file ng proyekto sa direktoryo na may natapos na produkto /dist/. Suriin natin ang mga tagubilin:

Lahat ay gumagana nang mahusay! Sa folder /dist/ Ngayon ay mayroong isang tapos na produkto pagkatapos ng pagpupulong, na maaaring i-upload sa server ng produksyon.

Konklusyon

Ito ay nagtatapos sa gabay para sa mga nagsisimula sa pag-assemble ng mga proyekto sa Gulp. Tulad ng nakikita mo, ang lahat ay medyo simple. Sa paglipas ng panahon, maglalathala ako ng ilan pang mga post patungkol sa Gulp at sa mga plugin nito, kapag naunawaan ko na ang mga ito. Pansamantala, gamitin at i-automate ang iyong mga nakagawiang gawain sa frontend development ayon sa mga tagubiling ibinigay. Kung mayroon kang anumang mga katanungan, tanungin sila sa mga komento sa post.

( "pangalan": "bybtc-landing", "version": "1.0.0", "description": "Landing Page para sa byBTC", "main": "index.js", "scripts": ( "test" : "echo \"Error: walang test specified\" && exit 1" ), "repository": ( "type": "git", "url": "git+https://github.com/Neuropassenger/bybtc- landing.git" ), "keywords": [ "landing" ], "author": "Oleg Sokolov", "license": "ISC", "bugs": ( "url": "https://github.com /Neuropassenger/bybtc-landing/issues" ), "homepage": "https://github.com/Neuropassenger/bybtc-landing#readme", "devDependencies": ( "browser-sync": "^2.18.13" , "del": "^3.0.0", "gulp": "^3.9.1", "gulp-autoprefixer": "^4.0.0", "gulp-concat": "^2.6.1", " gulp-cssnano": "^2.1.2", "gulp-rename": "^1.2.2", "gulp-sass": "^3.1.0", "gulp-uglifyjs": "^0.6.2" ) )

var gulp = require("gulp"), sass = require("gulp-sass"), browserSync = require("browser-sync"), concat = require("gulp-concat"), uglifyJs = require("gulp- uglifyjs"), cssNano = require("gulp-cssnano"), rename = require("gulp-rename"), autoprefixer = require("gulp-autoprefixer"), del = require("del"); gulp.task("sass", function() ( return gulp.src("src/sass/**/*.sass") .pipe(sass()) .pipe(autoprefixer([ "huling 10 bersyon" ], ( cascade: true ))) .pipe(gulp.dest("src/css")) .pipe(browserSync.reload((stream: true ))); )); gulp.task("min-css", ["sass"] , function() ( return gulp.src("src/css/libs.css") .pipe(cssNano()) .pipe(rename(( suffix: ".min" ))) .pipe(gulp.dest("src/css")); )); gulp.task("min-js", function() ( return gulp.src([ "src/libs/jquery/dist/jquery.min.js", "src/libs/slick-carousel/dist/slick.min .js" ]) .pipe(concat("libs.min.js")) .pipe(uglifyJs()) .pipe(gulp.dest("src/js")); )); gulp.task("browser-sync", function() ( browserSync(( server: ( baseDir: "src") )); )); gulp.task("watch", ["browser-sync"], function() ( gulp.watch("src/sass/**/*.sass", ["sass"]); gulp.watch("src /js/**/*.js", browserSync.reload); gulp.watch("src/**/*.html", browserSync.reload); )); gulp.task("clean", function() ( return del.sync("dist"); )); gulp.task("build", ["clean", "min-css", "min-js"], function() ( var buildCss = gulp.src([ "src/css/libs.min.css", "src/css/main.css" ]).pipe(gulp.dest("dist/css")); var buildFonts = gulp.src("src/fonts/**/*") .pipe(gulp.dest ("dist/fonts")); var buildJs = gulp.src("src/js/**/*") .pipe(gulp.dest("dist/js")); var buildHtml = gulp.src(" src/*.html") .pipe(gulp.dest("dist")); ));

Sa artikulong ito, titingnan natin ang isang halimbawa ng kapaligiran ng Gulp na maaaring magamit para sa kumportableng front-end na pag-unlad ng isang proyekto sa web. Ang halimbawang ito ay na-configure bilang default upang lumikha ng mga site at web application batay sa Bootstrap 4 framework.

Ang proyektong tinalakay sa artikulong ito ay matatagpuan sa Github sa: https://github.com/itchief/gulp-project-bootstrap-4

Video para sa artikulong ito:

Mga tagubilin para sa pag-install ng Gulp environment

Upang lumikha ng isang kapaligiran, dapat ay mayroon kang mga sumusunod na programa na naka-install:

• "Node.js" (maaari mong i-download ang installer ng "Node.js" para sa iyong operating system mula sa pahinang ito; ang proyekto ay nangangailangan ng bersyon ng program na hindi bababa sa 10);
• "Gulp" (maaari mong i-install ang Gulp sa pamamagitan ng pagpapatakbo ng sumusunod na command sa console: npm install -g gulp-cli).

Ang susunod na hakbang ay ang pag-install ng npm packages at ang kanilang mga dependencies. Upang gawin ito, sa console (dapat nasa root directory ng proyekto), kailangan mong patakbuhin ang command:

Pag-install ng Npm

Ang utos na ito ay mag-i-install ng lahat ng mga pakete na kinakailangan para sa mismong kapaligiran at para sa frontend. Ginagawa ng npm ang mga pagkilos na ito ayon sa mga tagubiling nakasulat sa "package.json" na file.

Kapag ginagamit ang unang bersyon ng proyekto (1.0.0), na gumagamit ng Bower package manager, dapat kang magpatakbo ng isa pang command:

Pag-install ng bower

I-install ng program na ito ang mga frontend na pakete na tinukoy sa "bower.json" na file.

Paano gamitin ang kapaligiran ng Gulp?

Magbukas ng command prompt (dapat tumuro ang landas sa root folder ng proyekto) at ipasok ang gulp (normal mode):

Matapos ipasok ang utos na ito, magsisimula ang default na gawain, i.e. "default". Ang gawaing ito ay magpapatakbo naman ng isang serye ng iba pang mga gawain: "build", "webserver" at "watch".

Ang gawaing "build" ay bubuo ng proyekto para sa produksyon (ibig sabihin, tatakbo ito ng "clean:build", "html:build", "css:build", "js:build", "fonts:build" at "image:build" " "). Ilalagay ng mga gawaing ito ang mga resultang file ng proyekto sa folder na "assets/build".

Ang gawaing "webserver" ay idinisenyo upang maglunsad ng isang lokal na web server na may "live na reload" ng mga pahina sa browser. Pinapadali nitong tingnan ang isang proyekto at subukan ito.

Ang gawaing "panoorin" ay ginagamit upang subaybayan ang mga pagbabago sa mga source na file sa folder na "assets/src" at magsagawa ng iba't ibang gawain kung mangyari ito. Sa madaling salita, pinapayagan ka nitong awtomatikong patakbuhin ang mga kinakailangang gawain at panatilihing napapanahon ang mga resultang file (ang mga nilalaman ng folder na "assets/build".

Bilang karagdagan, maaari kang magsagawa ng pumipili (independiyenteng) pagpupulong ng isa o ibang bahagi ng proyekto.

Halimbawa, upang bumuo lamang ng CSS na bahagi ng site, ilagay lamang ang command:

Gulp css:build

Listahan ng iba pang mga gawain:

Gulp clean:build // para linisin ang directory na "assets/build" gulp html:build // to build HTML files gulp js:build // to build JS files gulp fonts:build // to build fonts gulp image:build // para sa pagpupulong ng imahe

Paglalarawan ng kapaligiran ng Gulp

Sa seksyong ito titingnan natin ang:

• pangunahing mga tool at istraktura ng file ng kapaligiran ng Gulp;
• kung paano ikonekta ang mga mapagkukunan ng Bootstrap sa proyekto at i-configure ang mga ito;
• kung paano mag-isa (mula sa simula) magpasimula ng proyekto ng Gulp at mag-install ng mga dependencies (nang hindi gumagamit ng handa na package.json)
• kung paano simulan ang Bower at i-install ang mga front-end na pakete mula sa simula (nang hindi gumagamit ng handa na "bower.json")*;
• mga nilalaman ng file ng tagabuo ng proyekto ng Gulp (gulpfile.js)

* Ang Bower package manager ay hindi na ginagamit sa proyekto mula noong bersyon 2.0.0.

Listahan ng mga kasangkapan

Ang kapaligiran na inilaan para sa pagbuo ng isang front-end na proyekto (site) ay binuo batay sa mga sumusunod na tool:

• Node.js (ang kapaligiran kung saan isasagawa ang kapaligiran);
• npm (package manager na kasama sa Node.js; ay gagamitin upang i-download ang Gulp, mga plugin at mga front-end na pakete);
• jQuery, Popover, Bootstrap (mga pakete na gagamitin sa pagbuo ng css at js na mga bahagi ng site);
• Gulp at ang mga plugin nito (gagamitin upang buuin ang proyekto at magsagawa ng iba pang mga gawain sa web).

Sa mga unang bersyon ng proyekto, ginamit din ang Bower package manager. Ginamit ito para sa paglo-load ng mga library ng jQuery, Popover at Bootstrap. Sa mga bersyon ng proyekto simula sa 2.0.0, nilo-load ang mga aklatang ito gamit ang npm.

Istraktura ng file ng isang proyekto ng Gulp

Ang istraktura ng file ng isang proyekto ay maaaring ayusin sa iba't ibang paraan. Maaaring depende ito sa mga kagustuhan ng isang partikular na developer at sa proyekto kung saan ito ginagawa.

Sa artikulong ito ay susundin namin ang sumusunod na istraktura:

Sa ugat ng proyekto mayroong isang folder na "assets" at mga file na "gulpfile.js", "package.json". Ang file na "gulpfile.js" ay maglalaman ng mga gawain para sa tagabuo ng proyekto ng Gulp.

Ang unang bersyon ng proyekto ay gumamit din ng ".bowerrc" at "bower.json" na mga file. Ang file na "bower.json" ay ang configuration file ng Bower manager, kung saan natukoy ang mga frontend package na kinakailangan para sa paglo-load. Sa proyektong ito ito ay ginamit upang i-load ang Bootstrap, jQuery at Popper.

Ang folder na "assets" ay naglalaman ng dalawang folder: "src" (para sa mga source file) at "build" (para sa mga natapos na file; ilalagay sila ng Gulp builder sa folder na ito). Ang folder na "src" ay naglalaman ng mga direktoryo na "fonts" (para sa mga font), "img" (para sa mga source na larawan), "js" (para sa mga js file), "style" (para sa mga istilo) at "template" (para sa mga HTML fragment) at ang file na "index.html".

Sa unang bersyon ng proyekto, ang "src" na folder ay naglalaman pa rin ng "bower_components" na direktoryo. Ito ay inilaan para sa mga sangkap na na-load gamit ang Bower. Ang kasalukuyang bersyon ay wala nito.

Ang direktoryo ng "js" ay naglalaman ng dalawang file: "main.js" at "my.js". Ang "my.js" na file ay ginagamit upang isulat ang iyong mga script, at ang "main.js" ay ginagamit upang tukuyin ang listahan ng mga file na ang mga nilalaman ay kailangang isama sa panghuling js file. Ang panghuling file ay sinadya bilang output file (sa "build" na direktoryo).

Ang direktoryo ng "estilo" ay nakalaan para sa mga istilo. Naglalaman ang direktoryo na ito ng tatlong file: "main.scss" (naglalaman ng listahan ng mga file na ang mga nilalaman ay kailangang isama sa final styles file), "my.scss" (ginagamit para magsulat ng sarili mong mga istilo) at "variables.scss" ( naglalaman ng mga variable ng SCSS, kung saan babaguhin namin ang mga istilo ng Bootstrap 4, at gagamitin din ito upang lumikha ng sarili naming mga variable).

Ang file na "index.html" ay ang pangunahing pahina ng ginawang proyekto. Bilang karagdagan sa "index.html", maaari kang maglagay ng iba pang mga pahina ng html sa direktoryong ito.

Ang direktoryo ng "template" ay inilaan para sa paglalagay ng mga fragment ng mga pahina ng HTML dito. Halimbawa, sa direktoryong ito maaari kang lumikha ng mga file na "head.html" at "footer.html", at i-import ang kanilang mga nilalaman (gamit ang syntax //= path_to_file) sa ilang mga pahina nang sabay-sabay. Gagawin nitong mas madali ang paggawa at pag-edit ng mga pahina ng html, dahil... ang mga indibidwal na bahagi ng mga pahina ay nasa magkakahiwalay na mga file.

Pagkonekta ng Bootstrap 4 na mapagkukunan sa proyekto at pag-set up ng mga ito

Mayroong iba't ibang mga paraan upang ikonekta ang Bootstrap 4 framework sa isang proyekto, pati na rin ang mga opsyon para sa pagtatrabaho dito.

Ang pinaka-kakayahang umangkop na opsyon ay ang paggamit ng mga source code. Sa kasong ito, hindi mo lamang magagawa Napakadaling baguhin ang mga default na istilo ng Bootstrap, ngunit kumonekta din sa proyekto tanging ang mga klase at sangkap na gagamitin dito.

Ang mga source code ng estilo ng Bootstrap 4 CSS ay nakasulat sa wikang SCSS at ipinakita sa pamamagitan ng malaking bilang ng maliliit na file.

Listahan ng mga SCSS file (matatagpuan sa "node_modules/bootstrap/scss/" na direktoryo): "functions.scss", "variables.scss", "mixins.scss", "variables.scss", "print.scss", " reboot. scss", "type.scss", "images.scss", "code.scss", "grid.scss", "tables.scss", "forms.scss", "buttons.scss", "transitions. scss" , "dropdown.scss" atbp.

Ang bawat naturang file ay gumaganap ng alinman sa isang partikular na gawain ng serbisyo o responsable para sa pag-istilo ng isang partikular na function ng balangkas o bahagi. Ang mga SCSS file ay may maikli at malinaw na pangalan. Gamit lamang ang mga ito maaari mong lubos na tumpak na maunawaan ang layunin ng bawat isa sa kanila.

Isinasagawa ang pagpapasadya o pagpapalit ng mga default na istilo ng Bootstrap 4 sa pamamagitan ng pag-override sa mga halaga ng variable ng SCSS. Para sa kaginhawahan, lahat ng mga variable ng SCSS ay kinokolekta sa isang lugar (sa file na "variables.scss"). Ngunit, ipinapayong muling tukuyin ang kanilang mga halaga, siyempre, hindi sa file na ito, ngunit sa iyong sarili (halimbawa, pagkakaroon ng parehong pangalan na "variables.scss", ngunit matatagpuan sa "assets/style/variables.scss").

Halimbawa, ang pagpapalit ng mga kulay ng tema tagumpay At panganib, ay ginagawa sa pamamagitan ng pagbabago ng mga halaga ng $green at $red variable:

// Ino-override ang mga default na value ng Bootstrap 4 na variable $red: #cc2eaa; $berde: #2ecc71;

tala na pagkatapos makopya ang mga variable ng Bootstrap 4 sa iyong CSS file ("assets/style/variables.scss"), kailangan mong alisin ang!default na tag sa kanila.

Ang!default na tag ay inilaan upang itakda ang variable ng SCSS sa default na halaga nito. Kung mayroon nang value ang variable ng SCSS, hindi itatakda ang bagong value, kung tinukoy kasama ang!default key.

Ang pagtukoy kung aling Bootstrap 4 source SCSS file ang dapat isama sa compilation sa CSS at alin ang hindi dapat gawin gamit ang SCSS file na "assets/style/main.scss". Sa madaling salita, ang mga nilalaman ng file na ito ang tutukoy sa hanay ng mga istilo na, pagkatapos ng compilation, ay ikokonekta sa web page.

Bilang karagdagan, ang mga file na "assets/style/variables.scss" (para sa overriding na mga variable ng Bootstrap) at "assets/style/my.scss" (para sa paggawa ng sarili mong mga istilo) ay konektado din sa file na ito.

Mga nilalaman ng file na "main.scss" (halimbawa):

// Pag-override sa mga default na halaga ng Bootstrap 4 na mga variable at pagtukoy ng iyong sariling @import na "mga variable"; // Pagkonekta sa kinakailangang SCSS sources Bootstrap 4 @import "../../../node_modules/bootstrap/scss/_functions"; @import "../../../node_modules/bootstrap/scss/_variables"; @import "../../../node_modules/bootstrap/scss/_mixins"; @import "../../../node_modules/bootstrap/scss/_root"; @import "../../../node_modules/bootstrap/scss/_reboot"; @import "../../../node_modules/bootstrap/scss/_type"; @import "../../../node_modules/bootstrap/scss/_images"; @import "../../../node_modules/bootstrap/scss/_code"; @import "../../../node_modules/bootstrap/scss/_grid"; @import "../../../node_modules/bootstrap/scss/_tables"; @import "../../../node_modules/bootstrap/scss/_forms"; @import "../../../node_modules/bootstrap/scss/_buttons"; @import "../../../node_modules/bootstrap/scss/_transitions"; @import "../../../node_modules/bootstrap/scss/_dropdown"; @import "../../../node_modules/bootstrap/scss/_button-group"; @import "../../../node_modules/bootstrap/scss/_input-group"; @import "../../../node_modules/bootstrap/scss/_custom-forms"; @import "../../../node_modules/bootstrap/scss/_nav"; @import "../../../node_modules/bootstrap/scss/_navbar"; @import "../../../node_modules/bootstrap/scss/_card"; @import "../../../node_modules/bootstrap/scss/_breadcrumb"; @import "../../../node_modules/bootstrap/scss/_pagination"; @import "../../../node_modules/bootstrap/scss/_badge"; @import "../../../node_modules/bootstrap/scss/_jumbotron"; @import "../../../node_modules/bootstrap/scss/_alert"; @import "../../../node_modules/bootstrap/scss/_progress"; @import "../../../node_modules/bootstrap/scss/_media"; @import "../../../node_modules/bootstrap/scss/_list-group"; @import "../../../node_modules/bootstrap/scss/_close"; @import "../../../node_modules/bootstrap/scss/_toasts"; @import "../../../node_modules/bootstrap/scss/_modal"; @import "../../../node_modules/bootstrap/scss/_tooltip"; @import "../../../node_modules/bootstrap/scss/_popover"; @import "../../../node_modules/bootstrap/scss/_carousel"; @import "../../../node_modules/bootstrap/scss/_spinners"; @import "../../../node_modules/bootstrap/scss/_utilities"; @import "../../../node_modules/bootstrap/scss/_print"; // Ikonekta ang iyong mga SCSS file @import "my";

Bilang karagdagan, ang ilang bahagi ng Bootstrap 4 ay nangangailangan din ng JavaScript code upang gumana.

Listahan ng mga Bootstrap 4 js file (matatagpuan sa "node_modules/bootstrap/js/dist/" na direktoryo): "util.js", "alert.js", "button.js", "carousel.js", "collapse. js ", "dropdown.js", "modal.js", "tooltip.js", "popover.js", "scrollspy.js", "tab.js" at "toast.js".

Ang pagtukoy kung aling Bootstrap 4 framework js file ang kailangang isama sa final project js file at kung alin ang hindi ginagawa gamit ang "main.js".

Ang pag-import ng mga kinakailangang file sa nagreresultang build/main.js ay isinasagawa gamit ang sumusunod na construction:

//= path_to_file

Gagawin ng Gulp plugin na "gulp-rigger" ang pagkilos na ito. Kung paano i-install at ikonekta ito ay ilalarawan sa ibaba.

Maaari ka ring mag-import ng jQuery, Popper (kinakailangan para sa pagpapatakbo ng mga bahagi ng Dropdown, Tooltip at Popover) at, kung kinakailangan, ang iyong sariling mga js file sa file na ito.

Mga nilalaman ng "main.js" na file (halimbawa):

// Import jQuery //= ../../../node_modules/jquery/dist/jquery.js // Import Popper //= ../../../node_modules/popper.js/dist/umd /popper.js // I-import ang kinakailangang Bootstrap 4 js file //= ../../../node_modules/bootstrap/js/dist/util.js //= ../../../node_modules/ bootstrap/js/dist/alert.js //= ../../../node_modules/bootstrap/js/dist/button.js //= ../../../node_modules/bootstrap/js/ dist/carousel.js //= ../../../node_modules/bootstrap/js/dist/collapse.js //= ../../../node_modules/bootstrap/js/dist/dropdown. js //= ../../../node_modules/bootstrap/js/dist/modal.js //= ../../../node_modules/bootstrap/js/dist/tooltip.js //= ../../../node_modules/bootstrap/js/dist/popover.js //= ../../../node_modules/bootstrap/js/dist/scrollspy.js //= ../. ./../node_modules/bootstrap/js/dist/tab.js //= ../../../node_modules/bootstrap/js/dist/toast.js // Mag-import ng iba pang js file //= my . js

Paano simulan ang isang proyekto ng Gulp at mag-install ng mga dependency mula sa simula?

Karaniwang nagsisimula ang pagbuo ng proyekto sa paggawa ng "package.json" (manifest) na file.

Ang file na "package.json" ay maglalaman ng pangkalahatang impormasyon tungkol sa proyekto (pangalan, bersyon, paglalarawan, may-akda, atbp.), pati na rin ang impormasyon tungkol sa mga pakete kung saan nakasalalay ang proyektong ito.

Upang lumikha ng isang manifest, kailangan mong pumunta sa root folder ng proyekto at ipasok ang command:

Npm init

Pagkatapos ipasok ang utos, dapat mong sagutin ang mga sumusunod na tanong:

• pangalan ng proyekto (pangalan) - "bootstrap-4";
• numero ng bersyon - "2.0.0";
• paglalarawan – "Simulan ang proyekto gamit ang Bootstrap 4";
• may-akda (may-akda) - "site";
• git repository - "";
• entry point, test command, lisensya, mga keyword – mga default na halaga.

Sa tanong na "Okay lang ba ito?" sagutin ang "oo" o pindutin ang Enter.

Bilang resulta, lalabas ang file na "package.json" sa root folder ng proyekto.

Ngayon ay i-install natin ang mga pakete na gagamitin natin sa proyekto gamit ang sumusunod na command:

Npm install package_name --save-dev // pag-install ng package, na may impormasyon tungkol dito na awtomatikong nakasulat sa "devDependencies" na seksyon ng "package.json" file npm install package_name --save-prod // pag-install ng package, na may impormasyon tungkol dito , ay awtomatikong isinusulat sa seksyong "dependencies" ng "package.json" na file

Tinutukoy ng key na "--save-dev" o "--save-prod" kung aling seksyon ng "package.json" file ang impormasyon tungkol dito mapupunta.

Listahan ng mga pakete na gagamitin sa proyekto:

Npm install gulp --save-dev // install gulp npm install browser-sync --save-dev // install browser-sync npm install gulp-autoprefixer --save-dev // install gulp-autoprefixer npm install gulp-cache - -save-dev // install gulp-cache npm install gulp-clean-css --save-dev // install gulp-clean-css npm install gulp-rimraf --save-dev // install gulp-clean-css npm install gulp-imagemin --save-dev // install gulp-imagemin npm install gulp-plumber --save-dev // install gulp-plumber npm install gulp-rigger --save-dev // install gulp-rigger npm install gulp- sass --save-dev // install gulp-sass npm install gulp-sourcemaps --save-dev // install gulp-sourcemaps npm install gulp-uglify --save-dev // install gulp-uglify npm install imagemin-jpeg- recompress --save-dev // install imagemin-jpeg-recompress npm install imagemin-pngquant --save-dev // install imagemin-pngquant npm install gulp-rename --save-dev // install imagemin-pngquant npm install jquery - -save-prod npm install popper.js --save-prod npm install bootstrap --save-prod

Pagkatapos i-install ang lahat ng mga dependency, ang package.json file ay magkakaroon ng sumusunod na nilalaman:

( "pangalan": "bootstrap-4", "bersyon": "2.0..com/itchief/gulp-project-bootstrap-4.git" ), "dependencies": ( "jquery": "^3.4.1" , "popper.js": "^1.14.7", "bootstrap": "^4.3.1" ), "devDependencies": ( "browser-sync": "^2.26.7", "gulp": "^ 4.0.2", "gulp-autoprefixer": "^6.1.0", "gulp-cache": "^1.1.2", "gulp-clean-css": "^4.2.0", "gulp-rimraf ": "^0.2.2", "gulp-imagemin": "^6.0.0", "gulp-plumber": "^1.2.1", "gulp-rigger": "^0.5.8", "gulp -sass": "^4.0.2", "gulp-sourcemaps": "^2.6.5", "gulp-uglify": "^3.0.2", "imagemin-jpeg-recompress": "^6.0.0 ", "imagemin-pngquant": "^8.0.0", "gulp-rename": "^1.4.0" ) )

Paano simulan ang Bower at mag-install ng mga frontend package mula sa simula?

Tukuyin natin ang folder kung saan magda-download si Bower ng mga pakete. Upang gawin ito, lumikha ng .bowerrc file at ilagay ang sumusunod dito:

("directory": "assets/src/bower_components/")

I-save natin ang .bowerrc file. Ngayon ang lahat ng mga bahagi ay mai-load sa bower_components na direktoryo na matatagpuan sa assets/src/ .

Simulan natin ang Bower (lumikha ng bower.json manifest file). Ang bower.json file ay maaaring gawin gamit ang command (sa project root folder):

Bower init Initialize Bower

Pagkatapos nito, kailangan mong sagutin ang mga sumusunod na tanong:

• pangalan ng proyekto (pangalan) - bootstrap-4;
• paglalarawan (paglalarawan) – Simulan ang proyekto sa Bootstrap 4 - website;
• may-akda (may-akda) – website;
• itakda ang kasalukuyang naka-install na mga bahagi bilang mga dependency - Y (Oo);
• gusto mo bang markahan ang package na ito bilang pribado na pumipigil dito na hindi sinasadyang ma-publish sa registry - Y (Oo);
• Para sa iba pang mga tanong, iiwan namin ang mga sagot na inaalok ng programa bilang default;

Bilang resulta ng mga hakbang na ito, gagawa ng bower.json file.

I-load natin ang Bootstrap 4 at ang mga pakete na nakasalalay sa (Popper at jQuery) sa aming proyekto gamit ang Bower.

Upang gawin ito, ipasok ang sumusunod na command sa console:

I-install ng bower ang bootstrap#v4.0.0-beta --save

Ang -save switch ay kinakailangan upang magsulat ng impormasyon tungkol sa package sa seksyon ng dependencies ng bower.json file.

Bilang resulta, ang bower.json ay magkakaroon ng sumusunod na nilalaman:

( "name": "bootstrap-4", "description": "Start project on Bootstrap 4 - site", "authors": [ "site" ], "license": "ISC", "keywords": , "homepage ": "", "ignore": [ "**/.*", "node_modules", "bower_components", "assets/src/bower_components/", "test", "tests" ], "dependencies": ( " jquery": "^3.2.1", "bootstrap": "^v4.0.0-beta" ) )

Kung ayaw mong simulan ang Bower (bower.json) gamit ang bower init na utos at manu-manong mag-install ng mga package, maaari ka lang gumawa ng bower.json file (halimbawa, gamit ang isang file manager) at i-paste ang nilalaman ng teksto sa itaas dito. . Upang mag-install ng mga dependency sa proyekto, ipasok lamang ang sumusunod na command:

Pag-install ng bower

Paglalarawan ng file ng tagabuo ng proyekto ng Gulp (gulpfile.js)

Ang lahat ng mga aksyon na ginawa bago ay paghahanda. Ang lahat ng functionality na gagawin ng nilikhang kapaligiran ay tutukuyin ng "gulpfile.js" na file.

Ang file na "gulpfile.js" ay isang listahan ng mga gawain.

Ang mga pangunahing gawain na gagawin ng file na ito:

• pagkolekta ng ilang style file sa isa, pagsasama-sama ng nagreresultang SCSS sa CSS, pagdaragdag ng mga autoprefix, pagpapaliit ng CSS at paglikha ng source map;
• pag-import ng lahat ng kinakailangang js file sa isa, pagliit ng file na ito at paggawa ng source map;
• pagkolekta ng html file, paglilipat ng mga font, pagproseso (pag-compress) ng mga imahe at awtomatikong pag-update ng mga pahina gamit ang Browser Sync.

Bilang karagdagan, upang maiwasan ang pagpapatakbo ng mga gawaing ito kapag manu-mano ang pagpapalit ng mga source file, gagawa kami ng isa pang gawaing "panoorin". Susubaybayan nito ang mga pagbabago sa file at awtomatikong magpapatakbo ng ilang mga gawain.

Ang code para sa file na "gulpfile.js" (gamit ang Gulp 4):

"gamitin ang mahigpit"; /* path sa source file (src), sa mga natapos na file (build), gayundin sa mga kailangang subaybayan ang mga pagbabago (panoorin) */ var path = ( build: ( html: "assets/build/", js : "assets/build/js/", css: "assets/build/css/", img: "assets/build/img/", mga font: "assets/build/fonts/", src: ( html: "assets /src/*.html", js: "assets/src/js/main.js", style: "assets/src/style/main.scss", img: "assets/src/img/**/*. *", mga font: "assets/src/fonts/**/*.*", panoorin: ( html: "assets/src/**/*.html", js: "assets/src/js/** / *.js", css: "assets/src/style/**/*.scss", img: "assets/src/img/**/*.*", mga font: "assets/srs/fonts/* * /*.*" ), malinis: "./assets/build/*" ); /* server settings */ var config = ( server: ( baseDir: "./assets/build" ), notify: false ); /* connect gulp and plugins */ var gulp = require("gulp"), // connect Gulp webserver = require("browser-sync"), // server para sa pagtatrabaho at awtomatikong pag-update ng mga page tubero = require("gulp-plumber "), // module para sa pagsubaybay sa mga error rigger = require("gulp-rigger"), // module para sa pag-import ng mga nilalaman ng isang file sa isa pang sourcemaps = require("gulp-sourcemaps"), // module para sa pagbuo ng mapa ng sass source files = require("gulp-sass"), // module para sa pag-compile ng SASS (SCSS) sa CSS autoprefixer = require("gulp-autoprefixer"), // module para sa awtomatikong pagtatakda ng mga autoprefix cleanCSS = require("gulp- clean-css" ), // plugin para sa pagpapaliit ng CSS uglify = require("gulp-uglify"), // module para sa pagliit ng JavaScript cache = require("gulp-cache"), // module para sa pag-cache ng imagemin = require(" gulp-imagemin" ), // plugin para sa pag-compress ng PNG, JPEG, GIF at SVG na mga imahe jpegrecompress = require("imagemin-jpeg-recompress"), // plugin para sa jpeg compression pngquant = require("imagemin-pngquant"), / / plugin para sa compression png rimraf = require("gulp-rimraf"), // plugin para sa pagtanggal ng mga file at directory rename = require("gulp-rename"); /* tasks */ // simulan ang server gulp.task("webserver", function () ( webserver(config); )); // collecting html gulp.task("html:build", function () ( return gulp.src(path.src.html) // pagpili sa lahat ng html file sa tinukoy na path.pipe(plumber()) // tracking errors . pipe(rigger()) // import attachments.pipe(gulp.dest(path.build.html)) // upload tapos files.pipe(webserver.reload(( stream: true ))); // reboot ang server )); // collect styles gulp.task("css:build", function () ( return gulp.src(path.src.style) // get main.scss .pipe(plumber()) // for error tracking.pipe( sourcemaps.init()) // simulan ang sourcemap .pipe(sass()) // scss -> css .pipe(autoprefixer()) // add prefixes.pipe(gulp.dest(path.build.css)) .pipe (rename(( suffix: ".min"))) .pipe(cleanCSS()) // maliitin ang CSS .pipe(sourcemaps.write(". /")) // write sourcemap .pipe(gulp.dest(path.build.css)) // upload to build .pipe(webserver.reload((stream: true ))); // reboot ang server )); / / collect js gulp.task("js:build", function () ( return gulp.src(path.src.js) // kunin ang main.js file .pipe(plumber()) // para sa pagsubaybay ng error. pipe( rigger()) // import lahat ng tinukoy na file sa main.js .pipe(gulp.dest(path.build.js)) .pipe(rename(( suffix: ".min"))) .pipe(sourcemaps. init( )) //initialize sourcemap .pipe(uglify()) //minify js .pipe(sourcemaps.write("./")) //write sourcemap .pipe(gulp.dest(path.build.js)) // ilagay ang natapos na file.pipe(webserver.reload(( stream: true ))); // i-reboot ang server )); // paglilipat ng mga font gulp.task("fonts:build", function () ( return gulp. src(path. src.fonts) .pipe(gulp.dest(path.build.fonts)); )); // processing images gulp.task("image:build", function () ( return gulp.src(path .src.img ) // path na may mga source ng larawan.pipe(cache(imagemin([ // image compression imagemin.gifsicle(( interlaced: true )), jpegrecompress(( progressive: true, max: 90, min: 80 ))) , pngquant() , imagemin.svgo(( plugins: [( removeViewBox: false )] )) ]))) .pipe(gulp.dest(path.build.img)); // pag-upload ng mga natapos na file )); // pagtanggal ng build directory gulp.task("clean:build", function () ( return gulp.src(path.clean, (read: false )) .pipe(rimraf()); )); // clearing the cache gulp.task("cache:clear", function () ( cache.clearAll(); )); // build gulp.task("build", gulp.series("clean:build", gulp.parallel("html:build", "css:build", "js:build", "fonts:build", " larawan:build"))); // magpatakbo ng mga gawain kapag nagbago ang mga file gulp.task("watch", function () ( gulp.watch(path.watch.html, gulp.series("html:build")); gulp.watch(path.watch.css , gulp.series("css:build")); gulp.watch(path.watch.js, gulp.series("js:build")); gulp.watch(path.watch.img, gulp.series(" image:build")); gulp.watch(path.watch.fonts, gulp.series("fonts:build")); )); // default task gulp.task("default", gulp.series("build", gulp.parallel("webserver","watch")));

Ang code sa file na "gulpfile.js" ay naglalaman ng mga komento. Sa kanilang tulong, ipinaliwanag kung ano ang ginagawa nito o ang fragment ng mga tagubilin.

Ang paglikha ng isang gawain sa Gulp ay napaka-simple:

// paggawa ng gulp task (nametask ang pangalan ng task) gulp.task("nametask", function() ( // actions that the task should perform... ));

Ang mga gawain sa gulp ay binuo nang napakasimple. Sa karamihan ng mga kaso, ang kanilang balangkas ng mga aksyon ay maaaring katawanin tulad ng sumusunod:

• kumuha ng data mula sa mga source file;
• iproseso ang source data gamit ang gulp plugins;
• i-save ang resulta (mga file) sa direktoryo ng "build".

Kung gumagamit ka ng Gulp 3, ang mga nilalaman ng "gulpfile.js" na file ay dapat na ang mga sumusunod:

"gamitin ang mahigpit"; /* mga parameter para sa gulp-autoprefixer */ var autoprefixerList = [ "Chrome >= 45", "Firefox ESR", "Edge >= 12", "Explorer >= 10", "iOS >= 9", "Safari >= 9", "Android >= 4.4", "Opera >= 30" ]; /* path sa source file (src), sa mga natapos na file (build), gayundin sa mga kailangang subaybayan ang mga pagbabago (panoorin) */ var path = ( build: ( html: "assets/build/", js : "assets/build/js/", css: "assets/build/css/", img: "assets/build/img/", mga font: "assets/build/fonts/", src: ( html: "assets /src/*.html", js: "assets/src/js/main.js", style: "assets/src/style/main.scss", img: "assets/src/img/**/*. *", mga font: "assets/src/fonts/**/*.*", panoorin: ( html: "assets/src/**/*.html", js: "assets/src/js/** / *.js", css: "assets/src/style/**/*.scss", img: "assets/src/img/**/*.*", mga font: "assets/srs/fonts/* * /*.*" ), malinis: "./assets/build/*" ); /* server settings */ var config = ( server: ( baseDir: "./assets/build" ), notify: false ); /* connect gulp and plugins */ var gulp = require("gulp"), // connect Gulp webserver = require("browser-sync"), // server para sa pagtatrabaho at awtomatikong pag-update ng mga page tubero = require("gulp-plumber "), // module para sa pagsubaybay sa mga error rigger = require("gulp-rigger"), // module para sa pag-import ng mga nilalaman ng isang file sa isa pang sourcemaps = require("gulp-sourcemaps"), // module para sa pagbuo ng mapa ng sass source files = require("gulp-sass"), // module para sa pag-compile ng SASS (SCSS) sa CSS autoprefixer = require("gulp-autoprefixer"), // module para sa awtomatikong pagtatakda ng mga autoprefix cleanCSS = require("gulp- clean-css" ), // plugin para sa pagpapaliit ng CSS uglify = require("gulp-uglify"), // module para sa pagliit ng JavaScript cache = require("gulp-cache"), // module para sa pag-cache ng imagemin = require(" gulp-imagemin" ), // plugin para sa pag-compress ng PNG, JPEG, GIF at SVG na mga imahe jpegrecompress = require("imagemin-jpeg-recompress"), // plugin para sa jpeg compression pngquant = require("imagemin-pngquant"), / / plugin para sa compression png rimraf = require("gulp-rimraf"), // plugin para sa pagtanggal ng mga file at directory rename = require("gulp-rename"); /* tasks */ // simulan ang server gulp.task("webserver", function () ( webserver(config); )); // collecting html gulp.task("html:build", function () ( return gulp.src(path.src.html) // pagpili sa lahat ng html file sa tinukoy na path.pipe(plumber()) // tracking errors . pipe(rigger()) // import attachments.pipe(gulp.dest(path.build.html)) // upload tapos files.pipe(webserver.reload(( stream: true ))); // reboot ang server )); // collect styles gulp.task("css:build", function () ( return gulp.src(path.src.style) // get main.scss .pipe(plumber()) // for error tracking.pipe( sourcemaps.init()) // simulan ang sourcemap .pipe(sass()) // scss -> css .pipe(autoprefixer(( // magdagdag ng mga prefix na browser: autoprefixerList ))) .pipe(gulp.dest(path.build. css)) .pipe(rename(( suffix: ".min"))) .pipe(cleanCSS()) // maliitin ang CSS .pipe(sourcemaps.write(". /")) // write sourcemap .pipe(gulp.dest(path.build.css)) // upload to build .pipe(webserver.reload((stream: true ))); // reboot ang server )); / / collect js gulp.task("js:build", function () ( return gulp.src(path.src.js) // kunin ang main.js file .pipe(plumber()) // para sa pagsubaybay ng error. pipe( rigger()) // import lahat ng tinukoy na file sa main.js .pipe(gulp.dest(path.build.js)) .pipe(rename(( suffix: ".min"))) .pipe(sourcemaps. init( )) //initialize sourcemap .pipe(uglify()) //minify js .pipe(sourcemaps.write("./")) //write sourcemap .pipe(gulp.dest(path.build.js)) // ilagay ang natapos na file.pipe(webserver.reload(( stream: true ))); // i-reboot ang server )); // paglilipat ng mga font gulp.task("fonts:build", function () ( return gulp. src(path. src.fonts) .pipe(gulp.dest(path.build.fonts)); )); // processing images gulp.task("image:build", function () ( return gulp.src(path .src.img ) // path na may mga source ng larawan.pipe(cache(imagemin([ // image compression imagemin.gifsicle(( interlaced: true )), jpegrecompress(( progressive: true, max: 90, min: 80 ))) , pngquant() , imagemin.svgo(( plugins: [( removeViewBox: false )] )) ]))) .pipe(gulp.dest(path.build.img)); // pag-upload ng mga natapos na file )); // pagtanggal ng build directory gulp.task("clean:build", function () ( return gulp.src(path.clean, (read: false )) .pipe(rimraf()); )); // clearing the cache gulp.task("cache:clear", function () ( cache.clearAll(); )); // build gulp.task("build", [ "clean:build", "html:build", "css:build", "js:build", "fonts:build", "image:build" ]); // magpatakbo ng mga gawain kapag binago ng mga file ang gulp.task("watch", function () ( gulp.watch(path.watch.html, ["html:build"]); gulp.watch(path.watch.css, [" css:build"]); gulp.watch(path.watch.js, ["js:build"]); gulp.watch(path.watch.img, ["image:build"]); gulp.watch(path .watch.fonts, ["fonts:build"]); )); // default task gulp.task("default", [ "build", "webserver", "watch" ]);

Ang manwal na ito ay naglalaman ng isang paglalarawan ng mga kapaki-pakinabang at pinakakaraniwang ginagamit na mga tool sa harap. Magagawa mong matutunan ang proseso ng pag-install ng mga tool at ang mga pangunahing punto ng pagtatrabaho sa kanila.

NPM

Panimula

Sa panahon ng pagbuo ng isang proyekto, kadalasang kinakailangan na magdagdag ng mga aklatan at plugin ng third-party. Bilang resulta, kailangang hanapin ng developer ang kinakailangang dependency, i-download, i-unpack ang archive at kopyahin ang mga file sa proyekto. Tutulungan ng mga manager ng package na i-automate ang nakagawiang gawaing ito.

Tagapamahala ng Package– software na nagpapahintulot sa iyo na pamahalaan ang proseso ng pag-install, pag-uninstall, pag-configure at pag-update ng iba't ibang mga bahagi.

Ang pagdaragdag ng mga aklatan ng third-party gamit ang isang manager ng package ay pinapalitan ng ilang mga utos sa terminal.

Ang isa sa mga manager ng package na ginagamit sa mga proyekto sa frontend ay ang NPM.

npm(Node.js Package Manager) ay isang package manager na kasama sa Node.js. Ginagamit para mag-download ng mga package mula sa npm cloud server, o para mag-upload ng mga package sa server na ito.

Opisyal na site

Simula ng trabaho

Upang mai-install ang npm kailangan mong i-download at i-install ang NodeJS (awtomatikong mai-install ang npm): https://nodejs.org/en/.

Paggamit

Pag-install ng mga pakete

Ang package ay isa o higit pang mga JavaScript file na kumakatawan sa ilang uri ng library o tool. Upang mag-install ng package gamit ang npm, kailangan mong patakbuhin ang sumusunod na command:

Pag-install ng Npm<название пакета>

Upang i-install ang package sa buong mundo, gamitin ang key -g. Pagkatapos ng pag-install, ang pakete kasama ang mga mapagkukunan ay matatagpuan sa direktoryo node_modules/.

Suriin ang bersyon

Upang suriin ang kasalukuyang bersyon ng npm, kailangan mong patakbuhin ang command:

Pagse-set up ng configuration file

file package.json naglalaman ng impormasyon tungkol sa iyong aplikasyon: pangalan, bersyon, dependencies, atbp. Ang anumang direktoryo na naglalaman ng file na ito ay binibigyang kahulugan bilang isang pakete ng Node.js.

Para gumawa ng file package.json kailangan mong patakbuhin ang utos:

Npm init

Pagkatapos nito, kakailanganin mong punan ang ilang impormasyon tungkol sa proyekto.

Ang file na ito ay mag-iimbak ng mga pangalan at bersyon ng lahat ng mga pakete na kailangan sa proyekto. Gamit ang command pag-install ng npm maaari mong i-download ang lahat ng mga pakete na nasa package.json.

Upang mag-install ng isang partikular na package at awtomatikong i-save ito sa package.json file, gamitin ang command:

Pag-install ng Npm<название пакета>--save-dev

Mga alternatibo

Sinulid

Mga kakaiba

• Paglikha ng isang web server at awtomatikong i-reload ang pahina sa browser kapag nagse-save ng code, sinusubaybayan ang mga pagbabago sa mga file ng proyekto.
• Gamit ang iba't ibang JavaScript, CSS at HTML preprocessors (CoffeeScript, Less, Sass, Stylus, Jade, atbp.).
• Minification ng CSS at JS code, pati na rin ang optimization at concatenation ng mga indibidwal na file ng proyekto sa isa.
• Awtomatikong paggawa ng mga prefix ng vendor (mga prefix sa pangalan ng mga katangian ng CSS na idinaragdag ng mga manufacturer ng browser para sa mga hindi karaniwang katangian) para sa CSS.
• Pamamahala ng mga file at folder sa loob ng isang proyekto - paggawa, pagtanggal, pagpapalit ng pangalan.
• Ilunsad at kontrolin ang pagpapatupad ng mga panlabas na utos ng operating system.
  Paggawa gamit ang mga imahe - compression, paglikha ng mga sprite, pagbabago ng laki (png, jpg, svg, atbp.).
• I-deploy (ipadala sa isang panlabas na server) ang isang proyekto sa pamamagitan ng FTP, SFTP, atbp.
  Pagkonekta at paggamit ng walang limitasyong bilang ng mga Node.js at Gulp utility, program at plugin sa isang proyekto.
• Paglikha ng iba't ibang mga mapa ng proyekto at automation ng iba pang manu-manong paggawa.

Simula ng trabaho

Dapat na naka-install ang NodeJS at npm sa system.

Hakbang 1: Upang mai-install ang GulpJS sa buong mundo gamit ang npm package manager, kailangan mong patakbuhin ang command:

Npm install gulp -g

Hakbang 2: Kailangan mong i-install ito para sa application:

Npm install --save-dev gulp

Ang pag-load ng mga karagdagang plugin na maaaring magamit kapag ang pagbuo ng proyekto ay ginagawa din gamit ang npm na may sumusunod na command:

Pag-install ng Npm<название плагина>--save-dev

Ang lahat ng mga naka-install na plugin ay matatagpuan sa direktoryo node_modules/.

Paggamit

Hakbang 1: Una kailangan mong kumonekta lagok sa proyekto. Upang gawin ito sa file gulpfile.js isulat ang linya:

Var gulp = nangangailangan("gulp");

Function nangangailangan() nagbibigay-daan sa iyo upang ikonekta ang mga plugin mula sa folder node_modules/.

Hakbang 2: Paggamit ng variable lagok maaari kang lumikha ng mga gawain upang bumuo ng proyekto:

Gulp.task("exampleTask", function() ());

Pamamaraan gawain tumatagal ng dalawang parameter: isang pangalan at isang function na may katawan ng gawain.
Ang pagtuturo na ito ay maaari na ngayong kumpletuhin. Upang gawin ito, isulat sa console:

Gulp exampleTask

Pangunahing Utos

Nasa ibaba ang isang mas kumplikadong halimbawa ng isang pagtuturo:

Gulp.task("exampleTask", function () ( return gulp.src("source-files") .pipe(plugin()) .pipe(gulp.dest("folder")); ));

Tingnan natin ang mga utos na ginamit sa halimbawang ito:

• gulp.src- pagpili ng mga file ng mapagkukunan ng proyekto para sa pagproseso ng plugin;
• .pipe(plugin())– pagtawag sa Gulp plugin upang iproseso ang file;
• .pipe(gulp.dest('folder')) – i-output ang resultang file sa destination folder.

Mga mask ng file

Ang gulp.src function ay kumukuha ng file mask bilang isang parameter. Mga halimbawa ng maskara:

• ./ – kasalukuyang direktoryo;
• ../ – direktoryo ng magulang;
• js/index.js– index.js file sa js folder;
• js/*.js– lahat ng mga file na may extension ng js sa js folder;
• js/**/*.js– lahat ng mga file na may extension ng js sa js folder at sa mga subdirectory nito;
• !js/*.js– pagbubukod ng mga file na may extension ng js sa js folder.

Batis

Ang paggamit ng mga thread ay isa sa pinakamahalagang bentahe ng GulpJS.

Binibigyang-daan ka ng mga stream na ipasa ang ilang data nang sunud-sunod mula sa isang function patungo sa isa pa, na ang bawat isa ay nagsasagawa ng ilang mga aksyon gamit ang data na ito.

Function gulp.src() lumilikha ng isang stream ng mga bagay na kumakatawan sa mga file na ipinasa dito bilang isang parameter. Ang karagdagang paggamit ng mga function tubo isang conveyor ay binuo kung saan ang isang daloy ng mga bagay ay ipinadala. Ang isang plugin ay ipinapasa sa function na ito bilang isang parameter, na sa ilang paraan ay nagpoproseso ng stream ng mga bagay.

Nasa ibaba ang isang halimbawa ng paggamit ng mga thread. Ang halimbawang ito ay gumagamit ng mga third-party na plugin gulp-jshint At gulp-concat na kailangang mai-install at konektado sa gulpfile.js.

Function gulp.src kumukuha ng mga file sa pamamagitan ng maskara js/*.js. Nagpapatakbo ng JSHint at nagpi-print ng resulta. Pagkatapos ay pinagsama-sama nito ang mga file at sa dulo ay nai-save ang nagresultang file pagkatapos ng pagsasama-sama sa isang direktoryo dist/.

Gulp.task("example", function () ( return gulp.src("js/*.js") .pipe(jshint()) .pipe(concat("index.js")) .pipe(gulp.dest ("dist")); ));

Mga plugin ng third party

Tingnan natin ang isang halimbawa ng paggamit ng mga third-party na plugin. Upang gawin ito, gagawa kami ng tagubilin para sa pagsasama-sama ng mga js file:

Hakbang 1: Una kailangan mong paganahin ang plugin na may utos na nangangailangan:

Var concat = nangangailangan("gulp-concat");

Hakbang 2: Pagkatapos ay kailangan mong lumikha ng isang gawain para sa pagsasama-sama ng mga file sa js extension na matatagpuan sa js/ direktoryo. Sa dulo, ang resultang file ay inilalagay sa dist/js na direktoryo:

Gulp.task("concat", function () ( return gulp.src("js/*.js") .pipe(concat("index.js")) .pipe(gulp.dest("dist/js") );));

Gulp concat

karagdagang impormasyon

Maaari mo ring tukuyin ang isang gawain na magiging sanhi ng pagpapatupad ng iba pang mga gawain.

Gulp.task("build", ["html", "css"]);

Bilang karagdagan, mayroong isang pamamaraan panoorin upang subaybayan ang mga pagbabago sa mga file:

Gulp.watch("mask ng mga file na panonoorin", ["pangalan ng gawain na isasagawa kapag nagbago ang mga file"]);

SA gulpfile.js maaari kang lumikha ng isang default na gawain:

Gulp.task("default", ["task1", ​​​​ "task2"]);

Ang gawaing ito ay inilunsad mula sa console na may utos:

Mga pangunahing plugin

• gulp-autoprefixer– Awtomatikong naglalagay ng prefix sa mga katangian ng CSS;
• gulp-browser-sync– lumilikha ng isang koneksyon, pagkatapos nito ay awtomatikong nire-refresh ang pahina kapag nagbago ang mga file ng kliyente o kahit server;
• gulp-uncss– pag-optimize ng mga CSS file. Sinusuri ng plugin ang HTML code at hinahanap ang lahat ng hindi nagamit at nadobleng mga estilo;
• gulp-csso- CSS minifier;
• gulp-htmlmin– simpleng HTML minifier;
• gulp-htmlhint- HTML validator;
• gulp-uglify– JavaScript minifier;
• gulp-concat– pagsasama-sama ng file;
• gulp-webserver– nagpapahintulot sa iyo na lumikha at magpatakbo ng isang server;
• gulp-jshint– pagsuri sa kalidad ng JS code;
• lagok-jasmine– pagpapatakbo ng mga pagsubok sa jasmine;
• gulp-jsdoc– pagbuo ng dokumentasyon ng JSDoc.

Makakahanap ka ng kumpletong listahan ng mga plugin ng Gulp sa sumusunod na link:
http://gulpjs.com/plugins/

Mga alternatibo

GruntJS

Mga kakaiba

• Asynchronous na suporta sa pagsubok.
• Ang kakayahang maglagay ng mga tagamasid sa iba't ibang bagay.

Simula ng trabaho

Upang ikonekta si Jasmine sa iyong proyekto, kailangan mong i-download ang library at isama ang mga sumusunod na file sa pangunahing pahina ng HTML:

• lib/jasmine-*/jasmine.js- ang balangkas mismo;
• lib/jasmine-*/jasmine-html.js- pag-format ng mga resulta sa HTML form;
• lib/jasmine-*/jasmine.css- hitsura ng resulta ng pagsubok;
• SpecRunner.html- isang file na dapat buksan sa browser upang magpatakbo ng mga pagsubok.

Pag-synchronize sa mga instrumento

GulpJS

Maaaring isama si Jasmine sa pagbuo ng proyekto ng GulpJS:

Hakbang 1: Una kailangan mong i-install ang gulp-jasmine plugin:

Npm install gulp-jasmine --save-dev

Hakbang 2: Pagkatapos ay kailangan mong ikonekta ang plugin sa assembly file at lumikha ng isang pagsubok na gawain sa paglulunsad:

Var jasmine = nangangailangan("gulp-jasmine"); gulp.task("jasmine", function() ( gulp.src("test files") .pipe(jasmine()); ));

KarmaJS

(Ang pagtatrabaho sa tool na ito ay inilarawan nang mas detalyado sa dulo ng artikulo)

Upang ikonekta si Jasmine sa KarmaJS kailangan mo:

Hakbang 1: I-install ang KarmaJS:

Npm install -g karma-cli

Hakbang 2: I-install ang mga plugin na kinakailangan upang magpatakbo ng mga pagsubok na nakasulat sa Jasmine sa Chrome at PhantomJS browser:

Npm i-install ang karma-jasmine karma-chrome-launcher karma-phantomjs-launcher

Hakbang 3: I-install ang Jasmine mismo:

Npm install -g jasmine

Hakbang 4: Sa karma configuration file, ikonekta ang mga plugin at tukuyin ang path sa mga pagsubok.

Paggamit

Mga keyword

• ilarawan – kahulugan ng isang set ng pagsubok;
• ito - kahulugan ng pagsubok;
• inaasahan – tumutukoy sa mga inaasahan na sinusuri sa pagsusulit.

Ang paglalarawan at pag-andar nito ay tumatagal ng dalawang parameter: ang una ay ang pangalan, ang pangalawa ay ang function na may code.

Halimbawa ng pangunahing pagsubok

describe("test suite name", function () ( it("test name", function () ( expect(2+2).toBe(4); )); ));

Mga pamamaraan para sa pagsusuri ng mga resulta

• expect().toBe()– pagsuri sa mga variable para sa pagkakapantay-pantay (‘===’);
• asahan().not.toBe()– pagsuri sa mga variable para sa pagkakapantay-pantay (‘!==’);
• expect().toEqual()– pagsuri para sa pagkakapantay-pantay ng mga variable at bagay, kabilang ang mga nilalaman;
• expect().toBeDefined()- suriin para sa pagkakaroon;
• expect().toBeUndefined()– suriin para sa hindi pag-iral;
• expect().toBeNull()– pagsuri sa variable na halaga para sa null;
• expect().toBeTruthy()- pagpapatunay ng katotohanan;
• expect().toBeFalsy()– suriin kung may kamalian;
• expect().toBeLessThan()– pagsuri na ang halaga ay dapat na mas mababa sa;
• expect().toBeGreaterThan()– pagsuri na ang halaga ay dapat na mas malaki kaysa sa;
• expect().toBeCloseTo()– pagsuri na ang halaga ay dapat na malapit sa numero;
• expect().toMatch()– pagsuri para sa pagsunod sa isang regular na expression;
• expect().toContain()– pagsuri para sa nilalaman sa array;
• expect().toThrow()– suriin para sa pagkahagis ng isang pagbubukod;
• expect().toHaveBeenCalled()– pagsuri sa function call.

Mga karagdagang function

Upang maiwasan ang pagkopya ng anumang lohika na ginagamit sa mga pagsubok, ginagamit ang mga function beforeEach/afterEach. Ang mga ito ay pinapatakbo bago/pagkatapos ng bawat pagsubok ayon sa pagkakabanggit.

Ginagamit ang mga function upang subukan ang mga asynchronous na tawag tumatakbo At hinihintay.

• tumatakbo– tumatanggap ng isang asynchronous na function para sa pagpapatupad;
• hinihintay– tumatagal ng tatlong parameter: ang una ay isang function na dapat bumalik totoo, kung asynchronous na tawag sa function tumatakbo ay naisakatuparan, ang pangalawa ay isang mensahe ng error, ang pangatlo ay ang paghihintay sa mga millisecond.

describe("isang halimbawa ng pagsubok sa isang asynchronous na tawag", function () ( var result = 0; function asyncFunc() ( setTimeout(function() ( result = result + 2; ), 500); ) it("test name" , function ( ) ( runs(function () ( asyncFunc(); ));waisFor(function() ( return result === 2; ), "ang halaga ay hindi nagbago", 2000); )); ));

Mga tagamasid

Ang kakayahang subaybayan ang mga function na tawag ay tapos na gamit spyOn. Ang function na ito ay tumatagal ng dalawang parameter: ang una ay ang object kung saan tinawag ang function, ang pangalawa ay ang pangalan ng function na kailangang subaybayan.

If(“function call check”, function () ( spyOn(exampleObject, "exampleFunction"); exampleObject.exampleFunction(); expect(exampleObject.exampleFunction).toHaveBeenCalled(); ));

Kapag sinubukan gamit spyOn Maaari mong subaybayan ang bilang ng mga tawag, ang kanilang mga parameter at ang bawat tawag nang hiwalay.

Upang lumikha ng isang function na walang pagpapatupad, maaari mong gamitin createSpy. Function createSpy kumukuha ng pangalan ng function para sa pagkakakilanlan.

If("function call check", function () ( var example = createSpy("EXAMPLE"); halimbawa("param1", "param2"); expect(example.identify).toHaveBeenCalledWith("param1", "param2") ; expect(example.calls.length).toEqual(1); ));

Ang paggawa ng isang stub object ay ginagawa gamit createSpyObj. Bilang mga parameter createSpyObj tumatagal ang pangalan ng bagay at isang hanay ng mga string, na isang listahan ng mga pamamaraan ng stub object.

Mga alternatibo

Mocha

Paggamit

Ang dokumentasyon ay nabuo mula sa mga komento ng source code.

Setyembre 24 , 2016

Sasakupin ang mga sumusunod na isyu: pagtatrabaho sa mga istilong sass gamit ang mga sourcemap, pag-gluing at pag-compress ng mga js file, pagbuo ng requirejs gamit ang rjs, html preprocessing, paglilinis at pagkopya ng mga file, pag-optimize ng imahe, pagpapataas ng lokal na web server at monitoring mode - mga gawain sa panonood. Maligayang pagdating sa artikulo, magkakaroon ng maraming kawili-wiling bagay!
P.S. Mayroong maraming materyal, kaya ang artikulo ay mahahati sa 3 bahagi: ang mga pangunahing kaalaman sa pagpupulong at organisasyon ng proyekto, pagsulat ng isang pagsubok na aplikasyon sa Backbone + Require.js at ang aktwal na pagpupulong gamit ang gulp.

Bakit kailangan mong bumuo ng frontend?

Ang isa sa pinakamahalagang prinsipyo sa pag-unlad ay ang modularity. Paghahati sa code ng proyekto sa maraming maliliit, perpektong maluwag na konektado na mga module-modul. Nalalapat ito hindi lamang sa javascript code. Nalalapat ito sa mga istilo, mga template ng html, at iba't ibang mga aklatan.

Ang istraktura ng isang simpleng application na nakasulat sa Backbone + Require ay maaaring magmukhang ganito.

At ito ay isang maliit na proyekto ng pagsubok; sa isang tunay na aplikasyon ay maaaring may daan-daan at libu-libong mga file. Ang pagpilit sa browser ng user na gumawa ng daan-daang mga kahilingan sa http ay hindi makatao, kung tutuusin. Dapat nating tiyakin na ang serbisyong isinusulat natin ay maglo-load nang mabilis hangga't maaari. Samakatuwid, ang isa sa pinakamahalagang gawain ng mga tool sa pagpupulong ay minification, pagbabawas ng bilang ng mga file na ginamit sa isang proyekto, pagdikit ng mga ito sa mga bundle. Sa output dapat tayong magkaroon ng mas maigsi na istraktura, halimbawa, tulad nito:

Ang pagkakaiba ay malinaw na nakikita: sa halip na dose-dosenang mga file, mayroon kaming isang index.html, isang css file, na-optimize at naka-compress na mga imahe sa isang hiwalay na folder, bagaman hindi ito nakikita sa screenshot :-)

At din ang pinaka-kagiliw-giliw na bagay: sa js folder nakatanggap lamang kami ng 3 naka-compress na mga file.
P.S. Sasabihin ko sa iyo mamaya kung bakit tatlo at hindi isa.
Tandaan na ito ang aktwal na istraktura ng application ng pagsubok na isusulat namin sa ilang sandali.

Inilarawan ko lang ang isang dahilan para gumamit ng mga tool sa build, ngunit sapat na ito para makapagsimula kang gumamit ng gulp, grunt, webpack o katulad na bagay sa iyong mga proyekto. Bukod dito, hindi mahalaga kung nagsusulat kami ng isang malaking serbisyo, isang maliit na SPA (tulad ng sa aming artikulo) o isang landing page. Ang mga prinsipyo ng pagpupulong ay pareho para sa lahat ng mga proyekto at naiiba lamang sa iba't ibang mga gawain at diskarte sa paglutas ng mga ito. Sa aming halimbawa, gagawa kami ng istraktura na maaaring lumawak hangga't gusto namin sa hinaharap, ngunit ang output ay palaging isang maayos na stack ng mga file, na handang i-upload sa iyong production site - ang production site.

Paano maayos na ayusin ang isang proyekto.

Ang prinsipyo ay ito: mayroong isang seksyon na may mga file ng pag-unlad, mayroong isang seksyon na may mga nakolektang file, at lahat ng iba pa na pinaglilingkuran ng bagay na ito. Gumawa tayo ng 2 folder sa root ng proyekto: src at build. Sa src at sa src lamang kami magtatrabaho, gagawa ng mga bagong file, i-edit ang mga ito at sa pangkalahatan ay magsaya. Sa screenshot sa itaas, kung saan mayroong ilang dosenang mga file, eksaktong nakita mo ang mga nilalaman ng src folder ng aming proyekto sa pagsubok. At nasa ibaba lamang ang ilang maayos na mga file mula sa build folder. Awtomatiko lamang itong nabuo, gamit ang mga tool sa pagpupulong; hindi mo kailangang mag-edit ng kahit ano doon. Gayunpaman, sa bawat build, ang mga nilalaman nito ay na-overwrite ng mga bagong file (at sa mode ng pag-unlad ay walang build folder sa lahat - ito ay tinanggal upang hindi maging isang nakakasira ng mata)

Bilang karagdagan sa src at build, ang root ay maglalaman ng mga file package.json, gulpfile.js, ang node_modules folder at, opsyonal, .gitignore (kung nagtatrabaho ka sa Git). Maaari mo ring makita ang folder ng mga log - ito ay isang produkto ng apache at isang matagal nang ugali ng pagpapanatili ng mga log ng proyekto sa sarili nitong folder, siyempre, hindi kasama ito mula sa Git repository :-)

Ito ang hitsura ng buong istraktura ng proyekto:

Sa palagay ko walang mga katanungan tungkol sa mga nilalaman ng build, ngunit ipapaliwanag ko nang mas detalyado ang tungkol sa src:

• 1. html - index.html, ang root index file ng proyekto. Bakit hindi agad sa root src? Dahil ito ay preprocessed at malilikha ng gulp. Malalaman natin kung paano mamaya, kapag naging seryoso tayo sa pagpupulong.
• 2. img - mga imahe, hindi naka-compress, regular
• 3. js - lahat ng javascript na paggalaw ng proyekto, modelo at view ng Backbone
• 4. lib - mga third-party na aklatan, tulad ng backbone.js, require.js, lodash.js at iba pa
• 5. script - js script na kailangan sa isang production site, ngunit hindi kailangan sa development mode. Ito ay tumutukoy sa mga code para sa analytics, iba't ibang mga eksperimento at iba pang bagay sa marketing.
• 6. estilo - sass file na may mga estilo. Ang naka-assemble na css file ay ilalagay sa parehong folder (para lamang sa development mode)
• 7. tpl - mga template ng html. Ginagamit ng Backbone view gamit ang require.js text plugin

Ang hitsura ng application ng pagsubok ay medyo simple. Maaari mong sabihin na ang ganitong uri ng kalokohan ay ginagawa gamit ang ilang linya ng html at css code na walang isang js file.
Ngunit ang aming layunin ay hindi upang magpinta ng isang magandang larawan, ngunit upang lumikha ng isang solidong istraktura ng proyekto at isaalang-alang ang maraming aspeto ng pagbuo hangga't maaari. Kapag ang proyekto ay lumago sa daan-daang mga file, magiging handa kami para sa kasawiang ito at madaling makayanan ang tumaas na mga volume. Samakatuwid, sa kabila ng liit at panlabas na kahabag-habag ng aplikasyon sa pagsubok, matututunan natin ang mga prinsipyo ng pagpupulong para sa malalaki at kumplikadong mga proyekto.

Anong mga problema sa pagpupulong ang malulutas natin?

Ipaalala ko sa iyo na napagkasunduan namin ang dalawang build mode: development at production. Isusulat namin ang lahat ng aming mga gawain na isinasaisip ang dalawang mode na ito. Hindi namin kailangan ang lahat ng mga operasyon sa panahon ng proseso ng pag-unlad, at hindi lahat sa pagpupulong para sa produksyon.

Narito ang isang listahan ng kung ano ang aming gagawin pagkatapos isulat ang aplikasyon sa pagsusulit:

• 1. Paglilinis ng mga file at folder mula sa mga resulta ng nakaraang build
• 2. Pagbuo ng css mula sa sass file, na may at walang compression
• 3. Pagkonekta ng mga sourcemap sa mga istilo, kasabay nito ay ipapakita ko ang isang halimbawa kung bakit ito kinakailangan
• 4. Pagbuo ng js bundle gamit ang requirejs
• 5. Pagdikit at pag-compress ng mga indibidwal na js file (analytics)
• 6. HTML preprocessing
• 7. Pag-optimize ng imahe at compression
• 8. Pagtaas ng lokal na web server
• 9. Mga gawain ng pagsubaybay sa mga file kapag nagtatrabaho sa mode ng pag-unlad - manood ng mga gawain
• 10. Pagkolekta ng mga indibidwal na gawain sa isang tambak - mga pangwakas na gawain para sa paggawa ng produksyon at gawaing pagpapaunlad

Kaya, tinalakay namin kung bakit kailangan naming bumuo ng isang frontend sa lahat, nagpasya sa istraktura ng proyekto, nasuri nang detalyado kung ano ang gusto namin mula sa build, at nakipag-usap sa mga pangkalahatang tuntunin tungkol sa application ng pagsubok. Sa susunod na bahagi ng artikulo, magsusulat kami ng simpleng Backbone application kasabay ng Require.js. Kung hindi ka pamilyar sa Backbone at/o Require.js, walang dapat ipag-alala. Sa totoo lang, may maliit na Backbone code sa application. Madali mong magagamit ang iyong paboritong library sa halip o magsulat lamang ng javascript/jquery code at laktawan ang requirejs na seksyon ng configuration.

Gentleman's kit para sa developer ng Front-end

Hindi lihim na ang isang modernong front-end na developer ay dapat mayroong isa sa mga tool sa pagpupulong ng proyekto sa kanyang arsenal, tulad ng Gulp o Ungol. Hanggang sa ilang panahon, nagkaroon ng monopolyo si Grunt sa bagay na ito, ngunit nagpasya ang isang grupo ng mga developer na humiwalay sa Grunt na lumikha ng sarili nilang magaan at mabilis na task manager na Gulp.

Sa artikulong ito, maghahanda kami ng starter package mula sa simula para magamit sa mga proyekto sa hinaharap.

Anong mga teknolohiya ang ginagamit natin?

• Platform ng software: Node.js
• CSS pre-processor: Stylus
• Task manager: Gulp

Bakit kailangan ng isang frontender ng task manager?

Hanggang kamakailan lamang, ako mismo ay nagtaka kung bakit kailangan kong gumugol ng oras sa pag-set up ng task manager config, kung gumagawa na ako ng magandang trabaho sa mga layout ng layout, hanggang sa nagsimula akong gumamit ng CSS pre-processors.

Ang mga pre-processor ng CSS ay talagang maginhawa at nagpapabilis sa pagsulat ng mga istilo, ngunit ang pag-compile ng code na nakasulat sa isang pre-processor sa regular na CSS ay hindi isang ganap na walang kuwentang gawain na maaaring malutas sa isang pindutan. Dito tayo tinutulungan ng task manager. Ang conversion ng code ay hindi lamang nangyayari sa pag-click ng isang pindutan, lahat ay nangyayari online nang wala ang iyong paglahok (siyempre, kung i-configure mo nang tama ang lahat).

Siyempre, ang mga gawain ng task manager ay higit pa sa mga prosesong nauugnay sa pag-convert ng pre-processor code sa purong CSS. Ang tagabuo ng proyekto ay tumatalakay din sa minification, concatenation, checking code para sa mga error, pag-assemble ng mga imahe sa mga sprite, pag-optimize ng mga imahe para sa web, atbp. Gumawa ka lang ng maraming lohikal na pinaghihiwalay na mga file sa iyong proyekto, na pagkatapos ay maginhawang kinokolekta sa isang direktoryo, naproseso na at handa nang gamitin sa browser. Ngunit higit pa tungkol doon sa ibang pagkakataon, ngunit ngayon magsimula tayo sa paghahanda.

Ini-install ang Node.js

Kung alam mo kung paano mag-install ng node.js sa iyong system at ginagamit mo ito, maaari kang ligtas na lumipat sa susunod na pamagat.

Nais kong agad na balaan ka na ang lahat ng inilarawan na pagkilos ay may kaugnayan para sa Mac OS X, ngunit sa pangkalahatan ay naaangkop sa iba Unix mga sistema Pag-unlad sa pamamagitan ng task manager at command line sa Windows medyo mas mahirap at hindi ilalarawan dito. Gayunpaman, kung gumagamit ka pa rin ng Windows at hindi pa handang isuko ito, maaari kong imungkahi ang opsyon na gumamit ng virtual machine na may naka-install na Ubuntu, Ginagamit ko ang opsyong ito sa aking home system, na sa pangkalahatan ay medyo maginhawa.

Kaya, una sa lahat, kailangan naming i-download at i-install ang node.js package sa aming system upang gumana sa node sa pamamagitan ng console. Pumunta sa opisyal na website ng node.js at i-download ang pinakabagong stable na bersyon para sa iyong system. Kapag na-install na, ang node command ay dapat na available sa iyong command line. Upang suriin kung tumatakbo ang iyong node, ilagay ang command sa command line

dapat ipakita ng tugon ang bersyon ng naka-install na node.js. Kung okay na ang lahat, we move on.

Istraktura ng direktoryo ng proyekto

Sa aming mga proyekto ay gagamit kami ng pinag-isang bersyon ng istraktura:

Paunlarin - direktoryo ng ugat ng pag-unlad└─simula - direktoryo ng proyekto├─bumuo - build binuo ng task manager├─mapagkukunan - lahat ng source file para sa development (.psd, atbp.)├─src - direktoryo ng pag-unlad│├─css - Direktoryo ng pag-unlad ng istilo││├─mga larawan - lahat ng mga static na imahe││├─mga sprite - imahe na nakolekta sa isang sprite││├─bahagyang - pasadyang estilo ng mga file│││├─mixins.styl - pasadyang mixins│││└─styles.styl - mga pasadyang istilo││├─nagbebenta - iba pang mga panlabas na estilo ng mga file││└─styles.styl - pangunahing estilo ng file│├─mga font - direktoryo ng font│├─img - catalog ng mga dynamic na imahe│├─js - Direktoryo ng pag-unlad ng JavaScript││├─_*.js - side js file││├─_main.js - pangunahing custom na js││└─main.js - pangunahing js file│├─.htaccess - config para sa server│├─*.html - mga file ng layout ng pahina│├─pages.html - isang file na may mga link sa lahat ng mga pahina ng template│├─index.html - index file ng layout ng pahina│└─isama - Direktoryo ng mga kasamang markup file│ └─*.html - kasama ang mga markup file (header.html, atbp.)├─package.json - npm package manager config├─gulpfile.js - Gulp config├─stylus.template.bigote - mask para sa pagbabasa ng mga sprite├─TODO - todo sheet└─.gitignore - config para sa Git

Pag-install

Sa console, gamit ang cd command, pumunta sa root development directory, lumikha ng direktoryo para sa aming project mkdir start at pumunta dito.

I-install natin ang aming istraktura para sa proyekto sa pamamagitan ng console:

mkdir build resource src src/css src/css/images src/css/sprites src/css/partial src/css/vendor src/js src/template src/template/isama ang src/img src/fonts

Gumawa tayo ng mga paunang file sa istraktura ng proyekto:

touch gulpfile.js stylus.template.mustache .gitignore src/.htaccess src/TODO src/css/styles.styl src/css/partial/styles.styl src/css/partial/mixins.styl src/js/main.js src/js/_main.js src/template/pages.html src/template/index.html src/template/include/header.html src/template/include/footer.html

Gumawa tayo ng package.json

Ang lahat ng mga pop-up na tanong ay maaaring i-click sa pamamagitan ng Enter, itatakda ng node ang mga ito sa mga default na halaga, o maaari mong punan ang mga iminungkahing field.

.gitignore

Sinasabi namin sa Git kung aling mga direktoryo ang babalewalain at hindi i-upload sa repositoryo:

/node_modules/ /build/ /resource/

Ang direktoryo ng node_modules ay lilitaw sa ibang pagkakataon pagkatapos i-install ang mga plugin at maglalaman ng lahat ng mga plugin ng node para sa proyekto.

src/.htaccess

Nag-install kami ng karagdagang gzip compression at caching para sa server:

AddOutputFilterByType I-DEFLATE ang text/html text/plain text/xml text/css text/javascript application/javascript # Ihatid ang mga gzip compressed CSS file kung mayroon silang # at tinatanggap ng kliyente ang gzip. RewriteCond "%(HTTP:Accept-encoding)" "gzip" RewriteCond "%(REQUEST_FILENAME)\.gz" -s RewriteRule "^(.*)\.css" "$1\.css\.gz" # Serve gzip compressed JS file kung mayroon silang # at tinatanggap ng kliyente ang gzip. RewriteCond "%(HTTP:Accept-encoding)" "gzip" RewriteCond "%(REQUEST_FILENAME)\.gz" -s RewriteRule "^(.*)\.js" "$1\.js\.gz" # Ihatid ang tamang nilalaman uri, at maiwasan ang mod_deflate double gzip. RewriteRule "\.css\.gz$" "-" RewriteRule "\.js\.gz$" "-" # Ihatid ang tamang uri ng pag-encode. Idagdag ng header ang Content-Encoding gzip # Pilitin ang mga proxy na i-cache ang mga gzipped at # non-gzipped na css/js na file nang hiwalay. Idugtong ng header ang Vary Accept-Encoding ExpiresActive sa ExpiresByType application/javascript "access plus 1 buwan" ExpiresByType image/jpg "access plus 1 buwan" ExpiresByType image/jpeg "access plus 1 buwan" ExpiresByType image/gif "access plus 1 buwan" ExpiresByType image/png "access plus 1 buwan" ExpiresByType text/css "access plus 1 buwan"

src/css/styles.styl

Isama natin ang mga custom na style file sa pangunahing style file:

@import "partial/styles"

Pakitandaan na para sa connection.styl file, hindi tinukoy ang extension, ayon sa semantics ng Stylus pre-processor code. Upang magsama ng mga istilo sa isa pang extension, halimbawa .css, kinakailangan ang huli.

GAGAWIN

Ang pahinang ito ay naglalaman ng isang development todo sheet. Maaari kang magbasa nang higit pa tungkol sa pagtatrabaho sa file na ito sa pahina ng plugin ng PlainTasks para sa Sublime Text.

Nakumpleto nito ang pag-install ng istraktura.

Pag-install ng mga plugin gamit ang npm package manager

Kasama sa Node.js bilang default ang npm package manager, na ang mga repository ay naglalaman ng maraming plugin na gagamitin namin.

Pag-install ng Gulp plugin

Una kailangan naming i-install ang Gulp sa buong mundo (na may -g switch) sa aming system

npm i-install gulp -g

Isang beses mo lang kailangang gawin ito, hindi kinakailangan ang karagdagang pandaigdigang pag-install.

Ngayon ay kailangan mong i-install nang lokal ang Gulp sa iyong direktoryo ng proyekto

npm install gulp --save-dev

Ang --save-dev switch ay nangangahulugan na ang impormasyon tungkol sa plugin (pangalan sa repositoryo at ang bersyon nito) ay idaragdag sa package.json config at maaalala ito para sa proyektong ito. Dahil hindi kami nag-iimbak ng mabigat na folder na may mga node_modules na plugin sa Git, ang impormasyon tungkol sa mga naka-install na plugin na naka-save sa config ay magbibigay-daan sa iyong i-deploy ang lahat ng kinakailangang plugin sa proyekto gamit ang isang npm i command lang.

Mayroong mga pagdadaglat para sa bawat utos, upang maisulat natin ang utos sa itaas sa mas maikling format

Sa hinaharap, gagamitin din namin ang pinaikling format ng command.

Stylus plugin para sa Gulp

Sa aming mga proyekto ginagamit namin ang Stylus pre-processor, na gumagana nang mahusay at nag-compile sa node.

I-install:

npm i gulp-stylus -D

Mga plugin sa pagpoproseso ng CSS

Autoprefixer- awtomatikong ipinapasok ang mga prefix -ms- -o- -moz- -webkit- sa mga kinakailangang katangian:

npm i gulp-autoprefixer -D

CSS minification- pinaliit ng plugin ang output CSS file, inaalis ang mga hindi kinakailangang espasyo at tab:

npm i gulp-minify-css -D

Mga plugin sa pagpoproseso ng imahe

Pagsasama-sama ng mga larawan sa mga sprite- hindi mo na kailangang gumastos ng mga oras ng mahalagang oras sa pagsasama-sama ng lahat ng mga imahe sa mga sprite at pagkatapos ay kalkulahin ang kanilang mga coordinate, awtomatikong gagawin ng plugin na ito ang lahat para sa iyo:

npm i gulp.spritesmith -D

Magdagdag tayo ng mask para sa pagkalkula ng mga posisyon sa mga sprite sa naunang ginawang stylus.template.mustache file:

((#item)) $((pangalan)) = ((px.x)) ((px.y)) ((px.offset_x)) ((px.offset_y)) ((px.width)) (( px.height)) ((px.total_width)) ((px.total_height)) "(((escaped_image)))"; ((/mga item))

Magdagdag tayo ng mga espesyal na mixin sa mixins.styl:

SpriteWidth($sprite) lapad $sprite spriteHeight($sprite) taas $sprite spritePosition($sprite) background-position $sprite $sprite spriteImage($sprite) background-image url($sprite) sprite($sprite) kung !match( "hover", selector()) && !match("active", selector()) spriteImage($sprite) spritePosition($sprite) spriteWidth($sprite) spriteHeight($sprite)

Ikonekta natin ang mga mixin at ang nabuong file na may mga coordinate sa pangunahing styles file na src/css/styles.styl:

@import "partial/sprite" @import "partial/mixins"

Pakitandaan na ang mga sprite file ay dapat isama bago ang user styles @import "partial/styles"

Pag-optimize ng mga larawan para sa web- Awtomatikong puputulin ng plugin ang lahat ng hindi kinakailangang impormasyon mula sa iyong mga larawan at i-compress ang mga ito sa pinakamainam na laki, na sa ilang mga kaso ay magbibigay-daan sa iyong bawasan ang dami ng mga larawan nang hanggang 90%:

npm i gulp-imagemin -D

Mga plugin sa pagpoproseso ng JavaScript

JS minification- pinaliit ng plugin ang iyong JS code hangga't maaari, na binabawasan ang oras ng paglo-load nito:

npm i gulp-uglify -D

JS Error Tracking- lubusang susuriin ng plugin ang iyong JS code upang matukoy ang lahat ng hindi pagkakapare-pareho at ipakita ang mga ito sa console:

npm at jshint gulp-jshint -D

Mga plugin sa pagpoproseso ng HTML

Kasama ang mga file- pinapayagan ka ng plugin na mag-imbak ng mga static na bahagi ng site, tulad ng header, footer, tabi, atbp., sa magkahiwalay na mga file at ikonekta ang mga ito sa anumang bahagi ng isa pang file. Sa kaso ng maliliit na pagbabago sa header, hindi na kailangang baguhin ang dose-dosenang, o kahit na daan-daang html na pahina ng template:

npm i gulp-rigger -D

Ang plugin ay katugma din sa JS.

Ikonekta natin ang custom na JS sa pangunahing JS file na src/js/main.js na may sumusunod na construction:

//= _main.js

Isama natin ang mga file na header.html at footer.html sa index.html

//= isama/header.html//= isama/footer.html

Iba pang mga plugin

LiveReload- ang plugin ay nag-aalis ng pangangailangan na i-reload ang pahina sa browser sa bawat oras na makita ang mga pagbabago, ngayon ito ay awtomatikong nangyayari kapag nagse-save ng binagong file:

npm i gulp-connect -D

Pag-iwas sa Gulp mula sa pag-crash- minsan nangyayari na ang Gulp ay maaaring mag-crash sa labas ng mode ng panonood kung ang mga kritikal na error ay nangyari (pangunahin dahil sa JS). Sinusubukan ng plugin na ito na panatilihing tumatakbo ang mga proseso ng Gulp hangga't maaari:

npm i gulp-plumber -D

Pagpapalit ng pangalan ng mga file- ang pinakakaraniwang gawain na may mga pangalan ng file. Binibigyang-daan ka ng plugin na ganap na palitan ang pangalan ng mga file, baguhin ang extension, magdagdag ng mga prefix at postfix, halimbawa, upang i-convert ang isang file tulad ng style.styl sa style.min.css:

npm i gulp-rename -D

Mas malinis- kung minsan ay may pangangailangan na ganap na linisin ang direktoryo ng build, narito ang isang plugin na tumulong sa amin:

Sourcemap- upang manatiling nababasa ang iyong mga file sa pamamagitan ng pag-debug ng browser pagkatapos ng minification, kailangan mong magdagdag ng sourcemap sa minified na mga file:

npm i gulp-sourcemaps -D

Mga advanced na feature sa panonood- ang plugin ay ginagawang matalino ang relo, ngayon ay hindi nito na-overwrite ang lahat ng mga file sa build kapag isang file lang ang binago, ang partikular na binagong file ay na-overwrit, na nakakatipid ng oras at mga mapagkukunan:

npm i gulp-watch -D

Tingnan natin ang package.json

Pagkatapos ma-install ang lahat ng mga plugin, tingnan natin ang aming package.json. Dapat itong magmukhang ganito:

( "name": "start", "version": "1.0.0", "description": "Start pack for Front-end develop", "author": "Ivan Ivanov", "license": "MIT", "dependencies": (), "devDependencies": ( "gulp": "latest", "gulp-autoprefixer": "latest", "gulp-connect": "latest", "gulp-imagemin": "latest", "jshint": "pinakabago", "jshint-stylish": "pinakabago", "gulp-jshint": "pinakabago", "gulp-minify-css": "pinakabago", "gulp-plumber": "pinakabago", "gulp-rename": "pinakabago", "gulp-rigger": "pinakabago", "gulp-sourcemaps": "pinakabago", "gulp-stylus": "pinakabago", "gulp-uglify": "pinakabago", "gulp-watch": "pinakabago", "gulp.spritesmith": "pinakabago", "rimraf": "pinakabago") )

Sa halip na pinakabago, sa iyong kaso ay tutukuyin ang mga partikular na bersyon ng mga naka-install na plugin. kasi Lumilikha kami ng aming starter package, na gagamitin sa maraming proyekto, inirerekomenda din na palitan ang mga halaga ng bersyon ng pinakabagong upang palaging mai-install ang pinakabagong mga bersyon ng mga plugin sa proyekto.

Dapat ding lumabas ang isang direktoryo ng node_modules sa folder ng proyekto, na nag-iimbak ng lahat ng mga file ng plugin ng node. Ang lahat ng mga kinakailangang plugin ay naka-install, maaari kang magpatuloy sa mga setting ng Gulp config.

Pagse-set up ng gulpfile.js

gulpfile.js- ito ang pangunahing configuration file ng aming task manager; dito namin iimbak ang lahat ng mga setting at command.

Ang lahat ng gawain ng Gulp ay bumaba sa gawain ( Ingles gawain). Ang gawain ay isang hiwalay na independiyenteng function na may pangalan. Ang bawat gawain ay maaaring tawagan nang hiwalay.

Compatibility mode sa mga modernong pamantayan

Una, sa simula ng file, paganahin lang natin ang compatibility mode ayon sa mga modernong pamantayan:

"gamitin ang mahigpit";

Maaari kang matuto nang higit pa tungkol sa direktiba na ito.

Sinisimulan ang plugin

Ang mga plugin ay sinisimulan gamit ang sumusunod na konstruksyon:

var initPlugin = nangangailangan("plugin-name");

Alinsunod sa disenyong ito, sinisimulan namin ang lahat ng aming mga plugin:

Var gulp = require("gulp"), //main gulp plugin stylus = require("gulp-stylus"), //preprocessor stylus prefixer = require("gulp-autoprefixer"), //arrangement of autoprefixes cssmin = require( " gulp-minify-css"), //css minification uglify = require("gulp-uglify"), //js minification jshint = require("gulp-jshint"), //js error tracking rigger = require("gulp -rigger"), //working with kasama sa html at js imagemin = require("gulp-imagemin"), //minimizing images spritesmith = require("gulp.spritesmith"), //merged images into sprites rimraf = require( "rimraf"), //paglilinis ng mga sourcemaps = nangangailangan("gulp-sourcemaps"), //sourcemaps rename = require("gulp-rename"), //pagpapalitan ng pangalan ng mga file tubero = require("gulp-plumber"), // fuse to stop gulp watch = require("gulp-watch"), //pagpapalawak ng mga kakayahan watch connect = require("gulp-connect"); //livereload

Mga Path Constant

Para sa kaginhawahan, agad nating tukuyin ang lahat ng mga landas at maskara:

Var path = ( build: ( // Dito namin ipahiwatig kung saan ilalagay ang mga file na handa pagkatapos ng assembly html: "build/", js: "build/js/", css: "build/css/", img: "build/ css/ images/", mga font: "build/fonts/", htaccess: "build/", contentImg: "build/img/", sprites: "src/css/images/", spritesCss: "src/css/partial /" ), src: ( //Paths mula sa kung saan kukunin ang mga source html: "src/template/*.html", //The syntax src/template/*.html ay nagsasabi ng gulp na gusto naming kunin ang lahat ng file gamit ang extension .html js: "src/ js/[^_]*.js",//Sa mga estilo at script kailangan lang namin ng mga pangunahing file jshint: "src/js/*.js", css: "src/css/styles .styl", cssVendor: "src /css/vendor/*.*", //Kung gusto naming mag-imbak ng mga file ng library nang hiwalay, i-uncomment ang linya ng img: "src/css/images/**/*.*", //Syntax img/**/*.* ay nangangahulugang - kunin ang lahat ng file ng lahat ng extension mula sa folder at mula sa mga subdirectory na font: "src/fonts/**/*.*", contentImg: "src/img/**/ *.*", sprites: "src/css/ sprites/*.png", htaccess: "src/.htaccess" ), panoorin: ( //Dito ipinapahiwatig namin kung aling mga file ang gusto naming panoorin para sa mga pagbabago html: "src/ template/**/*.html", js: "src/js/**/*.js", css: "src/css/**/*.*", img: "src/css/images/* */*.*", contentImg: "src/ img/**/*.*", mga font: "src/fonts/**/*.*", htaccess: "src/.htaccess", sprite: "src /css/sprites/*.png" ), clean : "./build", //mga direktoryo na maaaring linisin outputDir: "./build" //initial root directory para sa pagsisimula ng miniserver );

Pakitandaan na maaari kaming gumamit ng mga name mask:

• *.js- lahat ng mga file na may extension ng js
• [^_]*.js- lahat ng mga file na may extension ng js, hindi kasama ang mga nagsisimula sa isang underscore
• *.* - anumang mga file na may anumang extension sa loob ng kasalukuyang direktoryo
• /**/*.html- lahat ng mga file na may extension na .html sa loob ng kasalukuyang direktoryo at lahat ng mga direktoryo ng bata

Gawain

Ngayon na ang lahat ng mga constant ay nakasulat, maaari kang magsimulang magsulat ng mga gawain. Ang lahat ng mga gawain ay may sumusunod na istraktura:

Gulp.task("taskName", function())( //some functions ));

Mini-server at LiveReload

Una sa lahat, iko-configure namin ang lokal na server at LiveReload:

// Local server for development gulp.task("connect", function())( connect.server(( //set up server configs root: , //root directory para sa pagpapatakbo ng server port: 9999, //which port we gagamit ng livereload: true //pasimulan ang gawain ng LiveReload )); ));

Malamang, madalas mong kailangang magtrabaho sa ilang mga proyekto nang sabay-sabay. Pinapayagan ka ng server na magpatakbo ng maraming mga server nang sabay-sabay; sapat na upang irehistro ang iyong sariling port para sa iba't ibang mga proyekto.

Bumuo ng HTML

// gawain para sa pagbuo ng html gulp.task("html:build", function () ( gulp.src(path.src.html) // Pumili ng mga file kasama ang gustong path.pipe(rigger()) // Patakbuhin ito rigger . pipe(gulp.dest(path.build.html)) //upload ang mga ito sa build folder .pipe(connect.reload()) //At i-reboot ang aming server para sa mga update ));

Bumuo ng JS

// suriin ang js para sa mga error at i-output ang mga ito sa console gulp.task("jshint:build", function() ( return gulp.src(path.src.jshint) //piliin ang mga file kasama ang nais na path.pipe(jshint( )) //patakbuhin ito sa pamamagitan ng jshint .pipe(jshint.reporter("jshint-stylish")); //style error output sa console )); // JavaScript building gulp.task("js:build", function () ( gulp.src(path.src.js) // Hanapin ang aming pangunahing file.pipe(rigger()) // Patakbuhin ito sa rigger .pipe( sourcemaps .init()) //Initialize sourcemap .pipe(uglify()) //I-compress ang aming js .pipe(sourcemaps.write()) //Write maps.pipe(rename((suffix: ".min"))) / /idagdag ang suffix.min sa output file.pipe(gulp.dest(path.build.js)) //upload ang natapos na file para bumuo ng .pipe(connect.reload()) //At i-reboot ang server )) ;

Sprite build

Ang lahat ng mga imahe na isasama sa mga sprite ay inilalagay sa src/css/sprites/ direktoryo at, pagkatapos tumakbo sa Gulp, sila ay naging isang solong imahe ng sprite. Hindi ka dapat maglagay ng mga logo at background sa mga sprite na walang malinaw na sukat.

// build sprites gulp.task("sprites:build", function () ( var spriteData = gulp.src(path.src.sprites) // piliin kung saan kukuha ng mga imaheng pagsasamahin sa isang sprite.pipe(spritesmith(( imgName : " sprite.png", //pangalan ng sprite image cssName: "sprite.styl", //pangalan ng istilo kung saan namin iniimbak ang mga posisyon ng mga imahe sa sprite imgPath: "images/sprite.png", / /path kung saan ang sprite ay cssFormat: "stylus", //format kung saan namin pinoproseso ang mga posisyon cssTemplate: "stylus.template.mustache", //mask file cssVarMap: function(sprite) ( sprite.name = "s-" + sprite.name //ang pangalan ng bawat sprite ay bubuuin ng file name at ang construction na "s-" sa simula ng pangalan ) ))); spriteData.img.pipe(gulp.dest(path.build.sprites) ); // path kung saan nai-save natin ang larawan spriteData.css.pipe(gulp.dest(path .build.spritesCss)); // path kung saan ise-save natin ang mga style ));

Para magpakita ng sprite, gumamit lang ng mixin. Halimbawa, para sa file na lorem.png, ang pagpili mula sa sprite ay magiging ganito:

Lorem sprite($s-lorem)

Ngayon ang object na may class .lorem ay kukuha ng mga sukat ng imahe at ang imahe mismo bilang background.

Bumuo ng mga static na imahe

Ang mga static na larawan ay mga larawang ginagamit sa isang template ng layout.

// build static images gulp.task("image:build", function () ( gulp.src(path.src.img) //Piliin ang aming images.pipe(imagemin(( //Compress them progressive: true, // compression.jpg svgoPlugins: [(removeViewBox: false)], //compression.svg interlaced: true, //compression.gif optimizationLevel: 3 //compression degree mula 0 hanggang 7 ))) .pipe(gulp.dest(path. build.img)) //upload sa build .pipe(connect.reload()) //reboot ang server ));

Bumuo ng mga dynamic na larawan

Ang mga dinamikong larawan ay mga larawan ng nilalaman na magbabago sa site at kasama sa antas ng template para lamang sa pagpapakita. Halimbawa, maaaring ito ay mga larawan para sa balita, atbp.

// build dynamic images gulp.task("imagescontent:build", function() ( gulp.src(path.src.contentImg) .pipe(imagemin(( //Compress them progressive: true, //compression.jpg svgoPlugins: [(removeViewBox: false)], //compression.svg interlaced: true, //compression.gif optimizationLevel: 3 //compression degree mula 0 hanggang 7 ))) .pipe(gulp.dest(path.build.contentImg)) //upload to build .pipe(connect.reload()) //reboot the server ));

Bumuo ng CSS

// pagbuo ng custom css gulp.task("cssOwn:build", function () ( gulp.src(path.src.css) //Piliin ang aming main style file.pipe(sourcemaps.init()) //initialize soucemap . pipe(stylus(( compress: true, "include css": true ))) //Compile stylus .pipe(prefixer(( browser: ["huling 3 bersyon", "> 1%", "ie 8", "ibig sabihin 7"] ))) //Add vendor prefixes.pipe(cssmin()) //Compress.pipe(sourcemaps.write()) //write sourcemap .pipe(rename((suffix: ".min"))) / /idagdag ang suffix.min sa pangalan ng output file.pipe(gulp.dest(path.build.css)) //upload to build .pipe(connect.reload()) //reboot the server ));

Paghiwalayin ang gawain para sa mga panlabas na istilo:

// building vendor css gulp.task("cssVendor:build", function () ( gulp.src(path.src.cssVendor) // Kunin ang vendor folder .pipe(sourcemaps.init()) //initialize soucemap .pipe ( cssmin()) //Compress.pipe(sourcemaps.write()) //write sourcemap .pipe(gulp.dest(path.build.css)) //upload to build .pipe(connect.reload()) / / i-reboot ang server));

Magdagdag din tayo ng gawain para sa pagbuo ng pangkalahatang CSS:

// buuin ang buong css gulp.task("css:build", [ "cssOwn:build", // "cssVendor:build" ]);

Kung kailangan mong iproseso ang mga panlabas na istilo nang hiwalay sa mga istilo ng tahanan at i-upload ang mga ito bilang hiwalay na mga file, kailangan mong alisin sa komento ang linyang “cssVendor:build”

Pagbuo ng font

// build fonts gulp.task("fonts:build", function() ( gulp.src(path.src.fonts) .pipe(gulp.dest(path.build.fonts)) //upload to build ));

Build.htaccess

// build htaccess gulp.task("htaccess:build", function() ( gulp.src(path.src.htaccess).pipe(gulp.dest(path.build.htaccess)) //upload to build ));

Pangkalahatang pagtatayo

Upang hindi natin kailangang buuin ang bawat bahagi nang hiwalay, magsulat tayo ng isang gawain para sa pangkalahatang pagbuo:

// build everything gulp.task("build", [ "html:build", "jshint:build", "js:build", "sprites:build", "css:build", "fonts:build", " htaccess:build", "image:build", "imagescontent:build" ]);

Nililinis ang build

Minsan kailangan mong ganap na linisin ang direktoryo ng build. Narito ang sumusunod na gawain ay tutulong sa atin:

// linisin ang build folder gulp.task("clean", function (cb) ( rimraf(path.clean, cb); ));

Panoorin o subaybayan ang mga pagbabago sa real time

Ang isa sa pinakamahalaga at kapaki-pakinabang na pag-andar ng Gulp ay ang pag-andar ng relo, na nagbibigay-daan sa iyo na subaybayan sa real time ang lahat ng mga pagbabago sa mga file na ginawa at, depende dito, magsagawa ng mga partikular na aksyon:

// watch gulp.task("watch", function())( //build html in case of change watch(, function(event, cb) ( gulp.start("html:build"); )); // bumuo ng mga sprite kung sakaling magbago ang relo(, function(event, cb) ( gulp.start("sprites:build"); )); //bumuo ng mga imaheng ayon sa konteksto kung sakaling baguhin ang relo(, function(event, cb) ( gulp .start(" imagescontent:build"); )); //build css in case of change watch(, function(event, cb) ( gulp.start("css:build"); )); //check js in case of change watch(, ["jshint"]); //build js in case of change watch(, function(event, cb) ( gulp.start("js:build"); )); //build static images sa kaso ng pagbabago ng relo(, function (kaganapan, cb) ( gulp.start("image:build"); )); //build ng mga font kung sakaling baguhin ang relo(, function(event, cb) ( gulp.start( "fonts:build"); )) ; //build htaccess in case of change watch(, function(event, cb) ( gulp.start("htaccess:build"); )); ));

Mga default na aksyon

Ang mga default na aksyon ay kung anong mga gawain ang gagawin ng task manager kapag ipinasok mo ang gulp command sa console:

// default actions gulp.task("default", ["build", "watch", "connect"]);

Sa aming kaso, gaya ng dati, bubuo kami ng aming proyekto, paganahin ang mode ng panonood at simulan ang server.

Mga Utos ng Command Line

Ang lahat ng gulp command para sa command line ay binubuo ng dalawang bahagi: ang gulp command mismo at ang pangalan ng gawain na pinaghihiwalay ng isang puwang. Narito ang isang listahan ng mga utos na naaangkop sa aming config:

• gulp - pangunahing utos, nagsisimula sa default na gawain
• gulp build - buuin ang lahat
• gulp watch - ilunsad na relo
• gulp clean - nililinis ang build directory
• gulp connect - simulan ang server
• gulp html:build - HTML build
• gulp jshint:build - suriin ang JS para sa mga error
• gulp js:build - JS build
• gulp sprites:build - sprite build
• gulp image:build - bumuo ng mga static na imahe
• gulp imagecontent:build - bumuo ng mga dynamic na larawan
• gulp cssOwn:build - custom na CSS build
• gulp cssVendor:build - bumuo ng panlabas na CSS
• gulp css:build - pangkalahatang CSS build
• gulp fonts:build - pagbuo ng font
• gulp htaccess:build - build.htaccess

Sa puntong ito, kumpleto na ang configuration ng gulpfile.js.

Kopyahin ang starter package sa proyekto

Una, dumaan tayo sa console sa folder kung saan tayo nagde-develop, halimbawa cd develop/example at kopyahin ang lahat mula sa direktoryo ng starter package hanggang sa aming project cp -a ~/develop/start/. ~/develop/example/

Ang paraan ng pagkopya na ito ay ang pinaka-maginhawa, dahil... tumpak na kokopyahin ang lahat, kabilang ang mga nakatagong file.gitignore, atbp.

Konklusyon

Gamit ang gabay na ito, naghanda kami ng panimulang pakete para sa paggamit ng Gulp sa aming mga proyekto sa pagpapaunlad ng Front-end.

Available din ang package na ito sa GitHub

Mag-post ng Scriptum

Ang artikulong ito ay hindi pangwakas at ia-update depende sa mga pagbabago at pagpapahusay.