Веб-беттерді жүктеуді оңтайландыру және т.б. үшін кескіндерді, JS және CSS файлдарын қысыңыз. Бұл процесті жеңілдету үшін біз сізге Андрей Горохов үнемі жетілдіретін Gulp 4 жобалық жинағын пайдалануды ұсынамыз. Төменде сіз жүктеп алу сілтемелерін таба аласыз, бірақ қазір негізгі тармақтарды қарастырайық: сипаттама және орнату.

Gulp жобасының құрылысшысы

Gulp - жоба құрастырушы, жоғарыда сипатталған тапсырмаларды автоматтандыруға арналған құрал. Бұл жұмысыңызды жылдамдатуға және жобаңызды шығаруға дұрыс дайындауға көмектеседі.

Жинақты Github репозиторийінен немесе Git пәрмен жолы арқылы жүктеп алуға болады. Болашақта сіз оны қажеттіліктеріңізге сәйкес реттей аласыз.

Ерекшеліктер

• БЕМ бойынша сыныптарды атау
• BEM құрылымы қолданылады
• SCSS препроцессоры қолданылады
• браузерлерде заманауи JavaScript (ES6) қолдауы үшін Babel транспилерін пайдаланады
• Webpack JavaScript модульдерін құру үшін пайдаланылады
• Bootstrap негізіндегі CSS смарт-торы жылдам бейімделетін орналасу үшін пайдаланылады
• қатаң кодтық нұсқаулық қолданылады

Орнату

• NodeJS (қажет болса) және Yarn орнатыңыз
• Git арқылы құрастыруды жүктеп алыңыз: git clone https://github.com/andreyalexeich/gulp-scss-starter.git
• gulp жаһандық түрде орнату: жіп жаһандық қосу gulp-cli
• жинақпен жүктелген қалтаға өтіңіз: cd gulp-scss-starter
• қажетті тәуелділіктерді жүктеп алыңыз: жіп
• бастау үшін пәрменді енгізіңіз: yarn run dev (әзірлеу режимі)
• жобаны құру үшін жіпті іске қосу пәрменін енгізіңіз (құрастыру режимі)

Егер сіз бәрін дұрыс жасасаңыз, браузеріңіз жергілікті сервермен ашылуы керек. Құрастыру режимі жобаны оңтайландыруды қамтиды: кескіндерді қысу, серверге жүктеп салу үшін CSS және JS файлдарын кішірейту.

Орнату кезінде қиындықтар туындаса, мына бейнені қараңыз:

Файл құрылымы

gulp-scss-starter ├── dist ├── gulp-tasks ├── src │ ├── блоктар │ ├── қаріптер │ │── қаріптер │ │──js │ ├─── ├── стильдер │ ├── көріністер │ └── .htaccess ├── gulpfile.babel.js ├── webpack.config.js ├── package.json ├── .babelrc.js ├──..js .─rc.js ├─ ─ .stylelintrc ├── .stylelintignore └── .gitignore

• Қалта түбірі:
  • .babelrc.js - Babel параметрлері
  • .bemrc.js - BEM параметрлері
  • .eslintrc.json - ESLint параметрлері
  • .gitignore – Git файлдарын бақылауға рұқсат бермейді
  • .stylelintrc - Stylelint параметрлері
  • .stylelintignore – Stylelint файлдарын қадағалауға тыйым салады
  • gulpfile.babel.js - Gulp параметрлері
  • webpack.config.js - Webpack параметрлері
  • package.json - тәуелділіктер тізімі
• src қалтасы - әзірлеу кезінде пайдаланылады:
  • BEM блоктары: src/блоктар
  • қаріптер: src/қаріптер
  • суреттер: src/img
  • JS файлдары: src/js
  • сайт беттері: src/views/pages
  • SCSS файлдары: src/стильдер
  • HTML файлдары: src/views
  • gzip (шығынсыз қысу) параметрлері бар Apache веб-серверінің конфигурация файлы: src/.htaccess
• Dist қалтасы - жергілікті әзірлеу сервері іске қосылатын қалта (yarn run dev іске қосылғанда)
• Folder gulp-tasks - Gulp тапсырмалары бар қалта

Командалар

• yarn run lint:style - SCSS файлдарын тексеріңіз. VSCode үшін плагинді орнату қажет. WebStorm немесе PHPStorm үшін Тілдер мен жақтаулар - Стиль кестелері - Stylelint ішінде Stylelint қосу керек (файлды сақтау кезінде қателер автоматты түрде түзетіледі)
• yarn run lint:style --fix - SCSS файлдарындағы қателерді түзетеді
• yarn run dev - жобаны әзірлеуге арналған серверді іске қосыңыз
• yarn run build - серверді іске қоспай-ақ оңтайландырумен жобаны құру
• yarn run құрастыру көріністері - Pug файлдарын құрастырыңыз
• жіпті іске қосу құрастыру стильдері - SCSS файлдарын құрастыру
• yarn run құрастыру сценарийлері - JS файлдарын құрастыру
• yarn run build images - кескіндерді құрастыру
• yarn run build webp - кескіндерді .webp пішіміне түрлендіру
• yarn run build sprites - спрайттарды құрастыру
• yarn run build fonts - қаріптерді құрастыру
• yarn run build favicons - фавикондарды құрастыру
• yarn run build gzip - Apache конфигурациясын құрастыру

Веб-сайтты әзірлеуге компоненттік тәсіл

• Әрбір BEM блогында src/blocks/modules ішінде өз қалтасы бар
• бір BEM блогының қалтасында бір HTML файлы, бір SCSS файлы және бір JS файлы бар (егер блок сценарийді пайдаланса)
  • Блоктың HTML файлы src/views/index.html файлына (немесе блок шақырылатын қажетті бет файлына) импортталады.
  • SCSS блок файлы src/blocks/modules/_modules.scss файлына импортталады.
  • Блок JS файлы src/js/import/modules.js ішіне импортталады

BEM блогы бар қалта құрылымының мысалы:

Блоктар ├── модульдер │ ├──тақырып │ │ ├── header.html │ │ ├── header.js │ │ ├──scs тақырыбы.

Сәйкес қалта мен файлдарды қолмен жасамау үшін BEM блок қалтасын жасау үшін консольде bem create my-block пәрменін енгізіңіз, мұнда my-block BEM блогының атауы болып табылады.

Жоба беттері

• Жоба беттері src/views/pages қалтасында орналасқан
  • басты бет: src/views/index.html

Қаріптер

• қаріптер src/fonts қалтасында
  • .woff және .woff2 пішімдерін пайдаланыңыз
  • қаріптер src/styles/base/_fonts.scss файлында қамтылған
  • Осы қызметті пайдаланып жергілікті қаріптерді түрлендіруге болады

Суреттер

• суреттер src/img қалтасында болады
  • Фавиконды құруға арналған кескін src/img/favicon қалтасында орналасуы және кемінде 1024px x 1024px өлшемі болуы керек.
  • суреттер автоматты түрде .webp пішіміне түрлендіріледі. Қолдану туралы толық ақпарат.

Үшінші тарап кітапханалары

• барлық үшінші тарап кітапханалары node_modules қалтасында орнатылған
  • оларды жүктеп алу үшін yarn add package_name пәрменін пайдаланыңыз
  • кітапхананың JS файлдарын қосу үшін оларды BEM блогының JS файлының ең басында импорттаңыз (яғни, сценарий пайдаланатын BEM блогы), мысалы:

  $-дан импорттаңыз «jQuery»;

  • кітапхана стилі файлдарын қосу үшін оларды src/styles/vendor/_libs.scss файлына импорттаңыз
  • JS файлдары мен кітапханалардың стиль файлдарын дербес өзгерту мүмкін емес

⚠️ Егер жобаңызда бірнеше бетке қосылуы қажет бірнеше кітапхана пайдаланылса, қателерді болдырмау үшін сізге қажет:

• src/js/import жолы бойымен беттер қалтасын жасаңыз
• беттер қалтасында бет үшін js файлын жасаңыз, мысалы, pageA.js және сол жерде тек осы бетте пайдаланылатын кітапхананы импорттаңыз.
  • қосымша беттер үшін бірдей қадамды орындаңыз
• webpack.config.js файлында JS бет файлдарын кіру нүктесіне қосыңыз, мысалы:

Кіру: (негізгі: " ./src/js/index.js",А бет: " ./src/js/import/pages/pageA.js",б бет: " ./src/js/import/pages/pageB.js" }

• қажетті беттерге құрастырылған JS файлдарын қосыңыз

CSS смарт-торы

Коллекторға Дмитрий Лавриктің смарт-grid CSS торы кіреді. Ол SCSS-те миксиндерді қолдану арқылы түзетудегі қажетсіз сыныптардан арылуға мүмкіндік береді және бейімделу орналасуын жылдамдатады. Конфигурация Bootstrap торына сәйкес орнатылып қойған. Қолдану мысалы:

Элементтер ( @include row-flex (); @include md (justify-content, center); .item ( @include col (); @include size (3); @include size-md (5); @include size- xs (10)

24 қыркүйек , 2016

Келесі мәселелер қарастырылатын болады: бастапқы карталарды пайдаланып sass стильдерімен жұмыс істеу, js файлдарын желімдеу және қысу, rjs көмегімен талапты құрастыру, html алдын ала өңдеу, файлдарды тазалау және көшіру, кескінді оңтайландыру, жергілікті веб-серверді көтеру және бақылау режимі - тапсырмаларды қарау. Мақалаға қош келдіңіз, көптеген қызықты нәрселер болады!
P.S. Материал өте көп, сондықтан мақала 3 бөлікке бөлінеді: құрастыру және жобаны ұйымдастыру негіздері, Backbone + Require.js жүйесінде сынақ өтінімін жазу және gulp көмегімен нақты құрастыру.

Неліктен фронталды құрастыру қажет?

Дамудағы ең маңызды принциптердің бірі модульдік болып табылады. Жоба кодын көптеген шағын, өте жақсы байланысқан модульдерге бөлу. Бұл тек JavaScript кодына ғана қатысты емес. Бұл стильдерге, html үлгілеріне және әртүрлі кітапханаларға қатысты.

Backbone + Require тілінде жазылған қарапайым қолданбаның құрылымы келесідей болуы мүмкін.

Бұл нақты қолданбада жүздеген және мыңдаған файлдар болуы мүмкін шағын сынақ жобасы; Пайдаланушының браузерін жүздеген http сұрауларын жасауға мәжбүрлеу, аз дегенде, адамгершілікке жатпайды. Біз жазатын қызмет мүмкіндігінше тез жүктелуін қамтамасыз етуіміз керек. Сондықтан құрастыру құралдарының маңызды міндеттерінің бірі - кішірейту, жобада қолданылатын файлдардың санын азайту, оларды дестелерге жабыстыру. Нәтижеде біз қысқаша құрылымға ие болуымыз керек, мысалы, келесідей:

Айырмашылық анық көрінеді: ондаған файлдардың орнына бізде бір index.html, бір CSS файлы, оңтайландырылған және қысылған кескіндер бөлек қалтада бар, бірақ бұл скриншотта көрінбейді :-)

Сондай-ақ ең қызықтысы: js қалтасында біз тек 3 қысылған файлды алдық.
P.S. Неліктен бір емес, үшеу екенін кейінірек айтамын.
Бұл біз жақын арада жазатын сынақ қосымшасының нақты құрылымы екенін ескеріңіз.

Мен құрастыру құралдарын пайдаланудың бір себебін ғана сипаттадым, бірақ бұл сіздің жобаларыңызда gulp, grunt, webpack немесе ұқсас нәрсені пайдалануды бастау үшін жеткілікті. Сонымен қатар, біз үлкен қызмет, шағын SPA (біздің мақаладағыдай) немесе қону бетін жазып жатқанымыз маңызды емес. Құрастыру принциптері барлық жобалар үшін бірдей және тек тапсырмалардың әртүрлілігімен және оларды шешу тәсілдерімен ерекшеленеді. Біздің мысалда біз болашақта өзімізге ұнайтындай кеңейе алатын құрылымды жасаймыз, бірақ нәтиже әрқашан сіздің өндірістік сайтыңызға - өндірістік сайтқа жүктеп салуға дайын файлдардың ұқыпты дестесі болады.

Жобаны қалай дұрыс ұйымдастыру керек.

Принцип мынада: әзірлеу файлдары бар бөлім бар, жиналған файлдары бар бөлім бар және осы материал қызмет ететін барлық басқа нәрсе. Жоба түбірінде 2 қалтаны жасайық: src және құрастыру. src және тек src-де біз жұмыс істейміз, жаңа файлдар жасаймыз, оларды өңдейміз және жалпы көңіл көтереміз. Жоғарыдағы скриншотта бірнеше ондаған файлдар бар, сіз біздің сынақ жобамыздың src қалтасының мазмұнын дәл көрдіңіз. Төменде құрастыру қалтасындағы бірнеше таза файлдар бар. Ол құрастыру құралдарының көмегімен ғана автоматты түрде жасалады; Дегенмен, әрбір құрастыру кезінде оның мазмұны жаңа файлдармен қайта жазылады (және әзірлеу режимінде құрастыру қалтасы мүлде жоқ - ол көзге ұрып қалмас үшін жойылады)

src және build файлдарына қоса, түбірде package.json, gulpfile.js файлдары, node_modules қалтасы және міндетті түрде .gitignore (Git-пен жұмыс істесеңіз) болады. Сондай-ақ журналдар қалтасын көруге болады - бұл apache өнімі және жоба журналдарын өз қалтасында сақтаудың бұрыннан қалыптасқан әдеті, әрине, оны Git репозиторийінен алып тастайды :-)

Бүкіл жоба құрылымы осылай көрінеді:

Менің ойымша, құрастыру мазмұны туралы сұрақтар жоқ, бірақ мен src туралы толығырақ түсіндіремін:

• 1. html – index.html, жобаның түбірлік индекс файлы. Неліктен бірден src түбірінде емес? Өйткені ол алдын ала өңделеді және жұту арқылы жасалады. Қалай болатынын сәл кейінірек, жиналысқа шындап кіріскенде білетін боламыз.
• 2. img - кескіндер, қысылмаған, қалыпты
• 3. js - жобаның барлық JavaScript қозғалысы, үлгі және Backbone көрінісі
• 4. lib - үшінші тарап кітапханалары, мысалы, backbone.js, require.js, lodash.js және т.б.
• 5. сценарийлер – өндіріс сайтында қажет, бірақ әзірлеу режимінде қажет емес js сценарийлері. Бұл аналитикаға, әртүрлі эксперименттерге және басқа маркетингтік заттарға арналған кодтарға қатысты.
• 6. стильдер – стильдері бар sass файлдары. Жиналған CSS файлы бір қалтаға орналастырылады (тек әзірлеу режимі үшін)
• 7. tpl – html шаблондары. Require.js мәтіндік плагинін пайдаланып, Backbone көріністері арқылы пайдаланылады

Сынақ қолданбасының көрінісі өте қарапайым. Мұндай сұмдық бір JS файлынсыз html және css кодының бірнеше жолымен жасалады деп айта аласыз.
Бірақ біздің мақсатымыз әдемі сурет салу емес, жобаның берік құрылымын жасау және құрылыстың мүмкіндігінше көп аспектілерін қарастыру. Жоба жүздеген файлдарға дейін өскенде, біз бұл бақытсыздыққа дайын боламыз және ұлғайтылған көлемдерді оңай жеңе аламыз. Сондықтан, тестілеудің шағын және сыртқы жағымсыздығына қарамастан, біз үлкен және күрделі жобалар үшін құрастыру принциптерін үйренеміз.

Қандай құрастыру мәселелерін шешеміз?

Еске сала кетейін, біз екі құрастыру режимі: әзірлеу және өндіру туралы келіскен болатынбыз. Біз барлық тапсырмаларды осы екі режимді ескере отырып жазамыз. Бізге әзірлеу кезінде барлық операциялар қажет емес, сонымен қатар өндіріс үшін құрастыру кезінде де қажет емес.

Сынақ өтінімін жазғаннан кейін біз не істейтініміздің тізімі:

• 1. Алдыңғы құрастыру нәтижелерінен файлдар мен қалталарды тазалау
• 2. Sass файлдарынан сығумен және қысусыз CSS құру
• 3. Бастапқы карталарды стильдерге қосу, мен бұл не үшін қажет екенін мысалмен көрсетемін
• 4. requirejs көмегімен js бумасын құру
• 5. Жеке js файлдарын желімдеу және қысу (аналитика)
• 6. HTML алдын ала өңдеу
• 7. Кескінді оңтайландыру және қысу
• 8. Жергілікті веб-серверді көтеру
• 9. Әзірлеу режимінде жұмыс істеу кезіндегі файлдарды бақылау тапсырмалары - қарау тапсырмалары
• 10. Жеке тапсырмаларды үйіндіге жинау - өндірістік құрылыстар мен өңдеу жұмыстарының соңғы тапсырмалары

Сонымен, біз неліктен фронтенді құруымыз керек екенін талқыладық, жобаның құрылымын шештік, құрастырудан не қалайтынымызды егжей-тегжейлі талдадық және сынақ қосымшасы туралы жалпы түрде сөйлестік. Мақаланың келесі бөлігінде Require.js-пен бірге қарапайым Backbone қосымшасын жазамыз. Егер сіз Backbone және/немесе Require.js қолданбасымен таныс болмасаңыз, алаңдайтын ештеңе жоқ. Шындығында, қолданбада аз ғана Backbone коды бар. Оның орнына сүйікті кітапханаңызды оңай пайдалана аласыз немесе жай ғана JavaScript/jQuery кодын жазып, requirejs конфигурация бөлімін өткізіп жібере аласыз.

Бұл нұсқаулық пайдалы және ең жиі қолданылатын алдыңғы қатарлы құралдардың сипаттамасын қамтиды. Сіз құралдарды орнату процесін және олармен жұмыс істеудің негізгі сәттерін біле аласыз.

NPM

Кіріспе

Жобаны әзірлеу кезінде көбінесе үшінші тарап кітапханалары мен плагиндерін қосу қажет. Нәтижесінде әзірлеушіге қажетті тәуелділікті іздеу, жүктеп алу, мұрағатты ашу және файлдарды жобаға көшіру қажет. Пакет менеджерлері бұл әдеттегі жұмысты автоматтандыруға көмектеседі.

Пакет менеджері– әртүрлі компоненттерді орнату, жою, конфигурациялау және жаңарту процесін басқаруға мүмкіндік беретін бағдарламалық құрал.

Пакет менеджері арқылы үшінші тарап кітапханаларын қосу терминалдағы бірнеше пәрменмен ауыстырылады.

Frontend жобаларында пайдаланылатын пакет менеджерлерінің бірі NPM болып табылады.

npm(Node.js пакет менеджері) — Node.js құрамына кіретін бума менеджері. Npm бұлттық серверінен пакеттерді жүктеп алу немесе осы серверге бумаларды жүктеп салу үшін пайдаланылады.

Ресми сайт

Жұмыстың басталуы

Npm орнату үшін NodeJS жүктеп алып, орнату керек (npm автоматты түрде орнатылады): https://nodejs.org/en/.

Қолданылуы

Пакеттерді орнату

Бума дегеніміз кітапхана немесе құрал түрін көрсететін бір немесе бірнеше JavaScript файлдары. Npm көмегімен буманы орнату үшін келесі пәрменді орындау керек:

Npm орнату<название пакета>

Буманы ғаламдық деңгейде орнату үшін кілтті пайдаланыңыз -g.Орнатқаннан кейін пакет көздерімен бірге каталогта орналасады node_modules/.

Нұсқаны тексеру

Ағымдағы npm нұсқасын тексеру үшін пәрменді орындау керек:

Конфигурация файлын орнату

Файл package.jsonқолданбаңыз туралы ақпаратты қамтиды: аты, нұсқасы, тәуелділіктер және т.б. Осы файлды қамтитын кез келген каталог Node.js бумасы ретінде түсіндіріледі.

Файл жасау үшін package.jsonпәрменді орындау керек:

Npm init

Осыдан кейін сіз жоба туралы кейбір ақпаратты толтыруыңыз керек.

Бұл файл жобаға қажетті барлық бумалардың атаулары мен нұсқаларын сақтайды. Пәрменді пайдалану npm орнатубар барлық пакеттерді жүктеп алуға болады package.json.

Белгілі бір буманы орнату және оны package.json файлында автоматты түрде сақтау үшін пәрменді пайдаланыңыз:

Npm орнату<название пакета>--save-dev

Баламалар

Жіп

Ерекшеліктер

• Веб-сервер құру және кодты сақтау кезінде браузерде бетті автоматты түрде қайта жүктеу, жоба файлдарындағы өзгерістерді бақылау.
• Әртүрлі JavaScript, CSS және HTML препроцессорларын қолдану (CoffeeScript, Less, Sass, Stylus, Jade және т.б.).
• CSS және JS кодын минимизациялау, сонымен қатар жеке жоба файлдарын оңтайландыру және біріктіру.
• CSS үшін жеткізуші префикстерін (браузер өндірушілері стандартты емес сипаттар үшін қосатын CSS сипаттарының атына префикстер) автоматты түрде жасау.
• Жобадағы файлдар мен қалталарды басқару – жасау, жою, атын өзгерту.
• Сыртқы операциялық жүйе командаларының орындалуын іске қосыңыз және басқарыңыз.
  Суреттермен жұмыс – қысу, спрайт жасау, өлшемін өзгерту (png, jpg, svg, т.б.).
• FTP, SFTP және т.б. арқылы жобаны орналастыру (сыртқы серверге жіберу).
  Жобада Node.js және Gulp утилиталарының, бағдарламаларының және плагиндерінің шексіз санын қосу және пайдалану.
• Әртүрлі жобалық карталарды жасау және басқа да қол еңбегін автоматтандыру.

Жұмыстың басталуы

NodeJS және npm жүйеде орнатылуы керек.

1-қадам: GulpJS жүйесін npm бума менеджері арқылы жаһандық деңгейде орнату үшін келесі пәрменді орындау керек:

Npm орнату gulp -g

2-қадам:Оны қолданба үшін орнату керек:

Npm орнату --save-dev gulp

Жобаны құру кезінде пайдалануға болатын қосымша плагиндерді жүктеу келесі пәрменмен npm көмегімен орындалады:

Npm орнату<название плагина>--save-dev

Барлық орнатылған плагиндер каталогта орналасқан node_modules/.

Қолданылуы

1-қадам:Алдымен қосылу керек жұтужобаға. Мұны файлда орындау үшін gulpfile.jsжолды жаз:

Var gulp = талап ету("gulp");

Функция талап ету()қалтадан плагиндерді қосуға мүмкіндік береді node_modules/.

2-қадам:Айнымалыны пайдалану жұтужобаны құру үшін тапсырмалар жасай аласыз:

Gulp.task("exampleTask", функция() ());

Әдіс тапсырмаекі параметрді қабылдайды: атау және тапсырма денесі бар функция.
Бұл нұсқаулықты енді аяқтауға болады. Мұны істеу үшін консольге жазыңыз:

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

Негізгі командалар

Төменде нұсқаулықтың күрделі мысалы келтірілген:

Gulp.task("exampleTask", функция () (қайтару gulp.src("source-файлдар") .pipe(plugin()) .pipe(gulp.dest("қалта")); ));

Осы мысалда қолданылатын командаларды қарастырайық:

• gulp.src– плагин арқылы өңдеу үшін жобаның бастапқы файлдарын таңдау;
• .pipe(плагин())– файлды өңдеу үшін Gulp плагинін шақыру;
• .pipe(gulp.dest('folder')) – алынған файлды тағайындалған қалтаға шығару.

Файл маскалары

gulp.src функциясы файл маскасын параметр ретінде қабылдайды. Маска мысалдары:

• ./ – ағымдағы каталог;
• ../ – ата-аналық каталог;
• js/index.js– js қалтасындағы index.js файлы;
• js/*.js– js қалтасындағы js кеңейтімі бар барлық файлдар;
• js/**/*.js– js қалтасындағы js кеңейтімі бар барлық файлдар және оның ішкі каталогтары;
• !js/*.js– js қалтасындағы js кеңейтімі бар файлдарды алып тастау.

Ағындар

Жіптерді пайдалану GulpJS-тің маңызды артықшылықтарының бірі болып табылады.

Ағындар кейбір деректерді бір функциядан екіншісіне дәйекті түрде беруге мүмкіндік береді, олардың әрқайсысы осы деректермен кейбір әрекеттерді орындайды.

Функция gulp.src()оған параметр ретінде берілген файлдарды көрсететін нысандар ағынын жасайды. Функцияларды әрі қарай пайдалану құбырконвейер салынған, ол арқылы заттардың ағыны тасымалданады. Бұл функцияға қандай да бір түрде нысандар ағынын өңдейтін параметр ретінде плагин беріледі.

Төменде ағындарды пайдалану мысалы берілген. Бұл мысал үшінші тарап плагиндерін пайдаланады gulp-jshintЖәне жұтқыншақорнату және қосу қажет gulpfile.js.

Функция gulp.srcфайлдарды маска арқылы қабылдайды js/*.js. JSHint іске қосып, нәтижені басып шығарады. Содан кейін ол файлдарды біріктіреді және соңында алынған файлды каталогта біріктіргеннен кейін сақтайды дист/.

Gulp.task("мысал", функция () (қайтару gulp.src("js/*.js") .pipe(jshint()) .pipe(concat("index.js")) .pipe(gulp.dest («дист»));

Үшінші тарап плагиндері

Үшінші тарап плагиндерін пайдалану мысалын қарастырайық. Ол үшін js файлдарын біріктіру нұсқаулығын жасаймыз:

1-қадам:Алдымен плагинді талап ету пәрменімен қосу керек:

Var concat = талап ("gulp-concat");

2-қадам:Содан кейін js/ каталогында орналасқан js кеңейтімі бар файлдарды біріктіру тапсырмасын жасау керек. Соңында алынған файл dist/js каталогына орналастырылады:

Gulp.task("concat", функция () (қайтару gulp.src("js/*.js") .pipe(concat("index.js")) .pipe(gulp.dest("dist/js") );

Тұншығу

қосымша ақпарат

Сондай-ақ, басқа тапсырмалардың орындалуына себеп болатын тапсырманы анықтауға болады.

Gulp.task("құру", ["html", "css"]);

Сонымен қатар, әдіс бар қарауфайлдардағы өзгерістерді бақылау үшін:

Gulp.watch("қаралатын файлдар маскасы", ["файлдар өзгерген кезде орындалатын тапсырманың аты"]);

IN gulpfile.jsәдепкі тапсырманы жасауға болады:

Gulp.task("әдепкі", ["тапсырма1", "тапсырма2"]);

Бұл тапсырма консольден пәрменмен іске қосылады:

Негізгі плагиндер

• gulp-автопрефиксері– CSS сипаттарын автоматты түрде префикстер;
• gulp-browser-синхрондау– қосылым жасайды, содан кейін клиент немесе тіпті сервер файлдары өзгерген кезде ол бетті автоматты түрде жаңартады;
• gulp-uncss– CSS файлдарын оңтайландыру. Плагин HTML кодын талдайды және барлық пайдаланылмаған және қайталанатын мәнерлерді табады;
• gulp-csso– CSS минификаторы;
• gulp-htmlmin– қарапайым HTML минификаторы;
• gulp-htmlhint– HTML валидаторы;
• жұту - жексұрындық– JavaScript минификаторы;
• жұтқыншақ– файлды біріктіру;
• gulp-webserver– сервер құруға және іске қосуға мүмкіндік береді;
• gulp-jshint– JS кодының сапасын тексеру;
• жұт-жасмин– жасмин сынақтарын жүргізу;
• gulp-jsdoc– JSDoc құжаттамасын құру.

Gulp плагиндерінің толық тізімін келесі сілтемеден таба аласыз:
http://gulpjs.com/plugins/

Баламалар

GruntJS

Ерекшеліктер

• Асинхронды тестілеуді қолдау.
• Әртүрлі объектілерге бақылаушыларды орналастыру мүмкіндігі.

Жұмыстың басталуы

Жасминді жобаға қосу үшін кітапхананы жүктеп алып, негізгі HTML бетіне келесі файлдарды қосу керек:

• lib/jasmine-*/jasmine.js- рамканың өзі;
• lib/jasmine-*/jasmine-html.js- нәтижелерді HTML форматында пішімдеу;
• lib/jasmine-*/jasmine.css- сынақ нәтижесінің пайда болуы;
• SpecRunner.html- сынақтарды орындау үшін браузерде ашылуы керек файл.

Құралдармен синхрондау

GulpJS

Жасминді GulpJS жобасының құрамына қосуға болады:

1-қадам:Алдымен gulp-jasmine плагинін орнату керек:

Npm орнату gulp-jasmine --save-dev

2-қадам:Содан кейін плагинді құрастыру файлына қосып, сынақты іске қосу тапсырмасын жасау керек:

Var жасмин = талап ету («гулп-жасмин»); gulp.task("жасмин", function() ( gulp.src("сынақ файлдары") .pipe(жасмин()); ));

KarmaJS

(осы құралмен жұмыс істеу мақаланың соңында толығырақ сипатталған)

Жасминді KarmaJS-ке қосу үшін сізге қажет:

1-қадам: KarmaJS орнату:

Npm орнату -g karma-cli

2-қадам: Chrome және PhantomJS браузерлерінде Jasmine тілінде жазылған сынақтарды орындау үшін қажетті плагиндерді орнатыңыз:

Npm карма-жасмин карма-хром-іске қосушы карма-phantomjs-launcher орнату

3-қадам:Жасминнің өзін орнатыңыз:

Npm орнату -g жасмин

4-қадам:Карма конфигурация файлында плагиндерді қосыңыз және сынақтарға жолды көрсетіңіз.

Қолданылуы

Түйінді сөздер

• сипаттау – сынақ жиынын анықтау;
• ол – тест анықтамасы;
• күту – сынақта тексерілетін күтулерді анықтайды.

Сипаттама және ол функциялары екі параметрді қабылдайды: біріншісі - атау, екіншісі - коды бар функция.

Негізгі сынақ мысалы

describe("сынақ топтамасының атауы", функция () ( it("сынақ атауы", функция () ( wait(2+2).toBe(4); )); ));

Нәтижелерді тексеру әдістері

• expect().toBe()– айнымалыларды теңдікке тексеру (‘===’);
• wait().not.toBe()– айнымалылардың теңдігін тексеру (‘!==’);
• expect().toEqual()– айнымалылар мен объектілердің, соның ішінде мазмұнының теңдігін тексеру;
• wait().toBeDefined()- бар-жоғын тексеру;
• wait().toBeUndefined()– жоқтығын тексеру;
• expect().toBeNull()– нөл үшін айнымалы мәнін тексеру;
• wait().toBeTruthy()- шындықты тексеру;
• wait().toBeFalsy()- жалғандықты тексеру;
• expect().toBeLessThan()– мәннің аз болуын тексеру;
• wait().toBeGreaterThan()– мәннің үлкен болуын тексеру;
• wait().toBeCloseTo()– мәннің санға жақын болуын тексеру;
• wait().toMatch()– тұрақты тіркеске сәйкестігін тексеру;
• wait().toContain()– массивтегі мазмұнды тексеру;
• wait().toThrow()– ерекше жағдайды шығаруды тексеру;
• wait().toHaveBeenCalled()– функция шақыруын тексеру.

Қосымша функциялар

Тесттерде қолданылатын кез келген логиканы көшірмеу үшін функциялар пайдаланылады beforeEach/afterEach. Олар сәйкесінше әрбір сынақтан бұрын/ кейін орындалады.

Функциялар асинхронды шақыруларды тексеру үшін пайдаланылады жүгіредіЖәне күтеді.

• жүгіреді– асинхронды функцияны орындауға қабылдайды;
• күтеді– үш параметрді қабылдайды: біріншісі – қайтарылатын функция рас,функцияда асинхронды шақыру болса жүгіредіорындалды, екіншісі - қате туралы хабар, үшіншісі - миллисекундтарда күту.

describe(“асинхронды шақыруды сынау мысалы”, функция () ( var нәтиже = 0; function asyncFunc() ( setTimeout(функция() ( нәтиже = нәтиже + 2; ), 500); ) it(“сынақ атауы” , функция ( ) ( runs(функция () ( asyncFunc(); )); waitsFor(функция() (қайтару нәтижесі === 2; ), “мән өзгерген жоқ”, 2000); ));

Бақылаушылар

Функция шақыруларын қадағалау мүмкіндігі арқылы жүзеге асырылады spyOn. Бұл функция екі параметрді қабылдайды: біріншісі - функция шақырылатын объект, екіншісі - бақылауды қажет ететін функцияның аты.

If("функция шақыруын тексеру", функция () ( spyOn(exampleObject, "exampleFunction"); exampleObject.exampleFunction(); күту(exampleObject.exampleFunction).toHaveBeenCalled(); ));

Қолдану арқылы сыналған кезде spyOnҚоңыраулар санын, олардың параметрлерін және әрбір қоңырауды бөлек бақылауға болады.

Іске асырусыз функция жасау үшін пайдалануға болады тыңшылық жасау. Функция тыңшылық жасаусәйкестендіру үшін функция атауын алады.

Егер («функция шақыруын тексеру», функция () ( var мысал = createSpy («МЫСАЛ»); мысал («param1», «param2»); expect(example.identify).toHaveBeenCalledWith («param1», «param2») күту(example.calls.length).toEqual(1));

Түпнұсқа нысанын жасау арқылы орындалады createSpyObj. Параметрлер ретінде createSpyObjнысанның атын және жолдар массивін қабылдайды, ол stub нысанының әдістерінің тізімі болып табылады.

Баламалар

Мока

Қолданылуы

Құжаттама бастапқы код түсініктемелерінен жасалады.

Бұл мақалада біз веб-жобаның ыңғайлы фронтальды дамуы үшін пайдалануға болатын Gulp ортасының мысалын қарастырамыз. Бұл мысал Bootstrap 4 негізіне негізделген сайттар мен веб-қосымшаларды жасау үшін әдепкі бойынша конфигурацияланған.

Осы мақалада талқыланған жоба Github сайтында орналасқан: https://github.com/itchief/gulp-project-bootstrap-4

Осы мақалаға арналған бейне:

Gulp ортасын орнату нұсқаулары

Ортаны жасау үшін сізде келесі бағдарламалар орнатылған болуы керек:

• "Node.js" (осы беттен амалдық жүйеңізге арналған "Node.js" орнатушысын жүктеп алуға болады; жоба кемінде 10 бағдарлама нұсқасын қажет етеді);
• «Gulp» (консольде келесі пәрменді іске қосу арқылы Gulp орнатуға болады: npm install -g gulp-cli).

Келесі қадам - ​​npm бумаларын және олардың тәуелділіктерін орнату. Ол үшін консольде (жобаның түбірлік каталогында болуы керек) пәрменді орындау керек:

Npm орнату

Бұл пәрмен ортаның өзі үшін де, фронтенд үшін де қажет барлық бумаларды орнатады. npm бұл әрекеттерді "package.json" файлында жазылған нұсқауларға сәйкес орындайды.

Bower пакетінің менеджерін пайдаланатын жобаның бірінші нұсқасын (1.0.0) пайдаланған кезде басқа пәрменді орындау керек:

Bower орнату

Бұл бағдарлама "bower.json" файлында көрсетілген алдыңғы бумаларды орнатады.

Gulp ортасын қалай пайдалануға болады?

Пәрмен жолын ашыңыз (жол жобаның түбірлік қалтасын көрсетуі керек) және gulp (қалыпты режим) енгізіңіз:

Осы пәрменді енгізгеннен кейін әдепкі тапсырма басталады, яғни. «әдепкі». Бұл тапсырма өз кезегінде басқа тапсырмалар қатарын орындайды: «құру», «веб-сервер» және «қарау».

«Құру» тапсырмасы өндіріске арналған жобаны құрастырады (яғни ол «clean:build», «html:build», «css:build», «js:build», «fonts:build» және «image:build» іске қосылады ""). Бұл тапсырмалар нәтижелі жоба файлдарын "активтер/құрастыру" қалтасына орналастырады.

«Веб-сервер» тапсырмасы браузердегі беттердің «жанды қайта жүктелуімен» жергілікті веб-серверді іске қосуға арналған. Бұл жобаны көруді және оны тексеруді өте жеңілдетеді.

«Көру» тапсырмасы «assets/src» қалтасындағы бастапқы файлдардағы өзгерістерді бақылау және бұл орын алса, әртүрлі тапсырмаларды орындау үшін пайдаланылады. Басқаша айтқанда, ол қажетті тапсырмаларды автоматты түрде орындауға және нәтижесінде алынған файлдарды («активтер/құрастыру» қалтасының мазмұны) жаңартып отыруға мүмкіндік береді.

Сонымен қатар, сіз жобаның бір немесе басқа бөлігін таңдамалы (тәуелсіз) құрастыруды орындай аласыз.

Мысалы, сайттың тек CSS бөлігін құру үшін пәрменді енгізіңіз:

Gulp css: құрастыру

Басқа тапсырмалар тізімі:

Gulp clean:build // "assets/build" каталогын тазалау үшін gulp html:build // HTML файлдарын құру үшін gulp js:build // JS файлдарын құру үшін gulp fonts:build // қаріптерді құру үшін gulp image:build // кескінді құрастыру үшін

Gulp ортасының сипаттамасы

Бұл бөлімде біз қарастырамыз:

• Gulp ортасының негізгі құралдары мен файлдық құрылымы;
• Bootstrap көздерін жобаға қосу және оларды конфигурациялау;
• Gulp жобасын қалай дербес (нөлден бастап) инициализациялау және тәуелділіктерді орнату (дайын package.json қолданбай)
• Bower-ті инициализациялау және алдыңғы пакеттерді нөлден орнату (дайын “bower.json” қолданбай)*;
• Gulp жобасы құрастырушы файлының мазмұны (gulpfile.js)

* Bower пакетінің менеджері жобада 2.0.0 нұсқасынан бері пайдаланылмаған.

Құралдар тізімі

Фронттік жобаны (сайтты) әзірлеуге арналған орта келесі құралдар негізінде құрастырылған:

• Node.js (орта орындалатын орта);
• npm (Node.js құрамына кіретін бума менеджері; Gulp, плагиндер мен алдыңғы пакеттерді жүктеп алу үшін пайдаланылады);
• jQuery, Popover, Bootstrap (сайттың CSS және JS бөліктерін құру үшін пайдаланылатын пакеттер);
• Gulp және оның плагиндері (жобаны құру және басқа веб-тапсырмаларды орындау үшін пайдаланылады).

Жобаның алғашқы нұсқаларында Bower пакетінің менеджері де қолданылды. Ол jQuery, Popover және Bootstrap кітапханаларын жүктеу үшін пайдаланылды. 2.0.0-ден басталатын жоба нұсқаларында бұл кітапханалар npm арқылы жүктеледі.

Gulp жобасының файлдық құрылымы

Жобаның файлдық құрылымы әртүрлі тәсілдермен ұйымдастырылуы мүмкін. Бұл белгілі бір әзірлеушінің қалауына да, ол жасалып жатқан жобаға да байланысты болуы мүмкін.

Бұл мақалада біз келесі құрылымды ұстанамыз:

Жобаның түбірінде «активтер» қалтасы және «gulpfile.js», «package.json» файлдары бар. "gulpfile.js" файлында Gulp жобасын құрастырушыға арналған тапсырмалар болады.

Жобаның бірінші нұсқасында «.bowerrc» және «bower.json» файлдары да пайдаланылды. «bower.json» файлы Bower менеджерінің конфигурация файлы болып табылады, оның негізінде жүктеуге қажетті фронталды пакеттер анықталды. Бұл жобада ол Bootstrap, jQuery және Popper жүктеу үшін пайдаланылды.

«Активтер» қалтасында екі қалта бар: «src» (бастапқы файлдар үшін) және «құрастыру» (дайын файлдар үшін; Gulp құрастырушы оларды осы қалтаға орналастырады). «src» қалтасында «қаріптер» (қаріптер үшін), «img» (бастапқы кескіндер үшін), «js» (js файлдары үшін), «стиль» (стильдер үшін) және «үлгі» (HTML фрагменттері үшін) каталогтары бар. және "index.html" файлы.

Жобаның бірінші нұсқасында «src» қалтасында әлі де «bower_components» каталогы болды. Ол Bower көмегімен жүктелген құрамдастарға арналған. Ағымдағы нұсқада ол жоқ.

"js" каталогында екі файл бар: "main.js" және "my.js". "my.js" файлы сценарийлерді жазу үшін пайдаланылады, ал "main.js" мазмұны соңғы js файлына қосылуы қажет файлдар тізімін анықтау үшін пайдаланылады. Қорытынды файл шығыс файл ретінде қарастырылады («құрастыру» каталогында).

«Стиль» каталогы стильдер үшін сақталған. Бұл каталогта үш файл бар: "main.scss" (мазмұны соңғы стильдер файлына қосылуы қажет файлдар тізімін қамтиды), "my.scss" (өз мәнерлеріңізді жазу үшін пайдаланылады) және "variables.scss" ( құрамында SCSS айнымалы мәндері бар, олардың көмегімен біз Bootstrap 4 мәнерлерін өзгертеміз, сонымен қатар оны өз айнымалыларымызды жасау үшін пайдаланамыз).

«index.html» файлы құрылған жобаның негізгі беті болып табылады. Бұл каталогқа "index.html" -ден басқа басқа html беттерін орналастыруға болады.

«Үлгі» каталогы оған HTML беттерінің фрагменттерін орналастыруға арналған. Мысалы, бұл каталогта сіз "head.html" және "footer.html" файлдарын жасай аласыз және олардың мазмұнын (/= path_to_file синтаксисін пайдалана отырып) бірден бірнеше бетке импорттай аласыз. Бұл html беттерін жасауды және өңдеуді жеңілдетеді, себебі... беттердің жеке бөліктері қазірдің өзінде бөлек файлдарда болады.

Bootstrap 4 көздерін жобаға қосу және оларды орнату

Bootstrap 4 негізін жобаға қосудың әртүрлі жолдары, сонымен қатар онымен жұмыс істеу опциялары бар.

Ең икемді нұсқа - бастапқы кодтарды пайдалану. Бұл жағдайда сіз ғана емес Әдепкі Bootstrap мәнерлерін өзгерту өте оңай, сонымен қатар жобаға қосылыңыз тек онда қолданылатын сыныптар мен компоненттер.

Bootstrap 4 CSS стильдерінің бастапқы кодтары SCSS тілінде жазылғанжәне шағын файлдардың үлкен саны арқылы ұсынылады.

SCSS файлдарының тізімі ("node_modules/bootstrap/scss/" каталогында орналасқан): "functions.scss", "variables.scss", "mixins.scss", "variables.scss", "print.scss", " қайта жүктеу, scss, "type.scss", "images.scss", "code.scss", "grid.scss", "tables.scss", "forms.scss", "buttons.scss", "өтулер. scss", "dropdown.scss" т.б.

Әрбір осындай файл белгілі бір қызмет тапсырмасын орындайды немесе құрылымның немесе құрамдастың белгілі бір функциясын сәндеуге жауапты. SCSS файлдарының қысқа және түсінікті атаулары болады. Тек солардың көмегімен сіз олардың әрқайсысының мақсатын нақты түсіне аласыз.

Bootstrap 4 әдепкі мәнерлерін теңшеу немесе өзгерту орындалады SCSS айнымалы мәндерін қайта анықтау арқылы. Ыңғайлы болу үшін барлық SCSS айнымалылары бір жерде жиналады («variables.scss» файлында). Бірақ, олардың мәндерін, әрине, осы файлда емес, өз файлында қайта анықтаған жөн (мысалы, «variables.scss» атауы бірдей, бірақ «assets/style/variables.scss» ішінде орналасқан).

Мысалы, тақырып түстерін өзгерту жетістікЖәне Қауіп, $green және $red айнымалылардың мәндерін өзгерту арқылы орындалады:

// Bootstrap 4 айнымалыларының әдепкі мәндерін қайта анықтау $red: #cc2eaa; $жасыл: #2ecc71;

назар аударыңыз Bootstrap 4 айнымалы мәндерін CSS файлыңызға («assets/style/variables.scss») көшіргеннен кейін олардан!әдепкі тегін алып тастау керек.

!default тегі SCSS айнымалы мәнін әдепкі мәніне орнатуға арналған. Егер SCSS айнымалысының мәні әлдеқашан болса, онда!әдепкі кілтпен көрсетілген жаңа мән орнатылмайды.

Қандай Bootstrap 4 бастапқы SCSS файлдары CSS компиляциясына қосылуы керек, ал қайсысы болмау керек екенін көрсету "assets/style/main.scss" SCSS файлы арқылы орындалады. Басқаша айтқанда, компиляциядан кейін веб-бетке қосылатын стильдер жиынын анықтайтын осы файлдың мазмұны.

Бұған қоса, «assets/style/variables.scss» (Bootstrap айнымалы мәндерін қайта анықтау үшін) және «assets/style/my.scss» (өз мәнерлеріңізді жасау үшін) файлдары да осы файлға қосылған.

«main.scss» файлының мазмұны (мысал):

// Bootstrap 4 айнымалыларының әдепкі мәндерін қайта анықтау және өзіңіздің @import "айнымалыларыңызды" анықтау; // Қажетті SCSS көздерін қосу 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/_ашылмалы"; @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"; // SCSS файлдарыңызды @import "my" қосыңыз;

Сонымен қатар, кейбір Bootstrap 4 құрамдастары жұмыс істеу үшін JavaScript кодын қажет етеді.

Bootstrap 4 js файлдарының тізімі ("node_modules/bootstrap/js/dist/" каталогында орналасқан): "util.js", "alert.js", "button.js", "carousel.js", "collapse. js ", "dropdown.js", "modal.js", "tooltip.js", "popover.js", "scrollspy.js", "tab.js" және "toast.js".

Соңғы жобаның js файлына қандай Bootstrap 4 фреймворк js файлдарын қосу керек екенін және қайсысы "main.js" арқылы орындалмайтынын анықтау.

Нәтижедегі build/main.js файлына қажетті файлдарды импорттау келесі конструкция арқылы жүзеге асырылады:

//= файлға_жол

Gulp плагині «gulp-rigger» бұл әрекетті орындайды. Оны орнату және қосу әдісі төменде сипатталады.

Бұл файлға jQuery, Popper (Ашылмалы тізім, Tooltip және Popover құрамдастарының жұмысы үшін қажет) және қажет болса, өзіңіздің JS файлдарыңызды импорттай аласыз.

"main.js" файлының мазмұны (мысал):

// jQuery импорттау //= ../../../node_modules/jquery/dist/jquery.js // Popper импорттау //= ../../../node_modules/popper.js/dist/umd /popper.js // Қажетті Bootstrap 4 js файлдарын импорттау //= ../../../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/ашылатын тізім. 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 // Басқа JS файлдарын импорттау //= менің . js

Gulp жобасын инициализациялау және тәуелділіктерді нөлден қалай орнатуға болады?

Жобаны әзірлеу әдетте «package.json» (манифест) файлын жасаудан басталады.

"package.json" файлында жоба туралы жалпы ақпарат (аты, нұсқасы, сипаттамасы, авторы, т.б.), сондай-ақ осы жоба тәуелді пакеттер туралы ақпарат болады.

Манифест жасау үшін жобаның түбірлік қалтасына өтіп, пәрменді енгізу керек:

Npm init

Пәрменді енгізгеннен кейін келесі сұрақтарға жауап беру керек:

• жоба атауы (атауы) – «bootstrap-4»;
• нұсқа нөмірі – «2.0.0»;
• сипаттамасы – «Bootstrap 4 пайдалану арқылы жобаны бастау»;
• автор (автор) – «сайт»;
• git репозиторийі – «»;
• кіру нүктесі, сынақ пәрмені, лицензия, кілт сөздер – әдепкі мәндер.

«Бұл дұрыс па?» Деген сұраққа. «иә» деп жауап беріңіз немесе Enter пернесін басыңыз.

Нәтижесінде жобаның түбірлік қалтасында «package.json» файлы пайда болады.

Енді келесі пәрменді пайдаланып жобада қолданатын пакеттерді орнатамыз:

Npm install package_name --save-dev // буманы орнату, ол туралы ақпарат автоматты түрде "package.json" файлының "devDependencies" бөліміне жазылады npm install package_name --save-prod // буманы орнату, ақпаратпен бірге ол туралы , автоматты түрде "package.json" файлының "тәуелділіктер" бөліміне жазылады

"--save-dev" немесе "--save-prod" пернесі ол туралы ақпарат "package.json" файлының қай бөліміне түсетінін анықтайды.

Жобада қолданылатын пакеттер тізімі:

Npm орнату gulp --save-dev // gulp орнату npm браузерді синхрондау --save-dev // браузерді синхрондау npm орнату gulp-autoprefixer --save-dev // gulp-autoprefixer орнату npm gulp-кэшті орнату - -save-dev // gulp-cache орнату npm орнату gulp-clean-css --save-dev // gulp-clean-css орнату npm орнату gulp-rimraf --save-dev // gulp-clean-css npm орнату gulp-imagemin --save-dev // gulp-imagemin npm орнату gulp-plumber --save-dev // gulp-plumber орнату npm gulp-rigger орнату --save-dev // gulp-rigger npm орнату gulp- sass --save-dev // gulp-sass npm орнату gulp-sourcemaps --save-dev // gulp-sourcemaps орнату npm орнату gulp-uglify --save-dev // gulp-uglify npm орнату imagemin-jpeg- recompress --save-dev // imagemin-jpeg-recompress орнату npm орнату imagemin-pngquant --save-dev // орнату imagemin-pngquant npm орнату gulp-rename --save-dev // imagemin-pngquant npm орнату jQuery - -save-prod npm орнату popper.js --save-prod npm bootstrap орнату --save-prod

Барлық тәуелділіктерді орнатқаннан кейін package.json файлында келесі мазмұн болады:

( "name": "bootstrap-4", "версия": "2.0..com/itchief/gulp-project-bootstrap-4.git" ), "тәуелділіктер": ( "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" ) )

Bower-ті инициализациялау және фронтон пакеттерін нөлден қалай орнатуға болады?

Bower бумаларды жүктеп алатын қалтаны анықтайық. Ол үшін .bowerrc файлын жасаңыз және оған келесіні енгізіңіз:

(«каталог»: «assets/src/bower_components/» )

.bowerrc файлын сақтайық. Енді барлық компоненттер assets/src/ ішінде орналасқан bower_components каталогына жүктеледі.

Bower инициализациясын алайық (bower.json манифест файлын жасаңыз). bower.json файлын пәрмен арқылы жасауға болады (жобаның түбірлік қалтасында):

Bower Init Bower Initialize

Осыдан кейін сіз келесі сұрақтарға жауап беруіңіз керек:

• жоба атауы (атауы) – bootstrap-4;
• сипаттама (сипаттама) – Bootstrap 4 жүйесінде жобаны бастау – веб-сайт;
• автор (автор) – веб-сайт;
• ағымдағы орнатылған құрамдастарды тәуелділіктер ретінде орнату – Y (Иә);
• Сіз бұл буманы тізілімге кездейсоқ жариялануын болдырмайтын жеке деп белгілегіңіз келе ме – Y (Иә);
• Басқа сұрақтар бойынша біз бағдарлама ұсынған жауаптарды әдепкі бойынша қалдырамыз;

Осы қадамдардың нәтижесінде bower.json файлы жасалады.

Bootstrap 4 және оған байланысты пакеттерді (Popper және jQuery) Bower арқылы жобамызға жүктейік.

Ол үшін консольге келесі пәрменді енгізіңіз:

Bower install bootstrap#v4.0.0-beta --сақтау

-save қосқышы bower.json файлының тәуелділіктер бөліміне бума туралы ақпаратты жазу үшін қажет.

Нәтижесінде, bower.json келесі мазмұнға ие болады:

(«аты»: «bootstrap-4», «сипаттама»: «Bootstrap 4-те жобаны бастау - сайт», «авторлар»: [ «сайт» ], «лицензия»: «ISC», «кілт сөздер»: , «негізгі бет ": "", "елемеу": [ "**/.*", "түйін_модульдері", "bower_components", "assets/src/bower_components/", "test", "tests" ], "тәуелділіктер": ( " jquery": "^3.2.1", "bootstrap": "^v4.0.0-бета" ) )

Bower init пәрменін пайдаланып Bower (bower.json) инициализациясын және бумаларды қолмен орнатқыңыз келмесе, жай ғана bower.json файлын (мысалы, файл менеджерін пайдалану) жасап, оған жоғарыдағы мәтін мазмұнын қоюға болады. . Жобаға тәуелділіктерді орнату үшін келесі пәрменді енгізіңіз:

Bower орнату

Gulp жобасы құрастырушы файлының сипаттамасы (gulpfile.js)

Бұрын жасалған барлық әрекеттер дайындық болды. Жасалған орта орындайтын барлық функциялар "gulpfile.js" файлымен анықталады.

"gulpfile.js" файлы тапсырмалар тізімі болып табылады.

Бұл файл орындайтын негізгі тапсырмалар:

• бірнеше стиль файлдарын біреуіне жинау, алынған SCSS-ті CSS-ге компиляциялау, автопрефикстерді қосу, CSS кішірейту және бастапқы картаны құру;
• барлық қажетті js файлдарын бір файлға импорттау, бұл файлды азайту және бастапқы картаны жасау;
• html файлын жинау, қаріптерді тасымалдау, кескіндерді өңдеу (сығу) және Browser Sync көмегімен беттерді автоматты түрде жаңарту.

Бұған қоса, бастапқы файлдарды қолмен өзгерту кезінде осы тапсырмаларды орындамау үшін біз басқа «қарау» тапсырмасын жасаймыз. Ол файл өзгерістерін бақылайды және белгілі бір тапсырмаларды автоматты түрде іске қосады.

"gulpfile.js" файлының коды (Gulp 4 арқылы):

«қатаң пайдалану»; /* бастапқы файлдарға (src), дайын файлдарға (құрастыру), сондай-ақ өзгерістерін бақылау қажет (қарау) жолдар */ var path = ( құрастыру: ( html: "assets/build/", js : "assets/build/js/", css: "assets/build/css/", img: "assets/build/img/", қаріптер: "assets/build/fonts/", src: ( html: "assets" /src/*.html", js: "assets/src/js/main.js", стиль: "assets/src/style/main.scss", img: "assets/src/img/**/*. *", қаріптер: "assets/src/fonts/**/*.*", қарау: ( html: "assets/src/**/*.html", js: "assets/src/js/** / *.js", css: "assets/src/style/**/*.scss", img: "assets/src/img/**/*.*", қаріптер: "assets/srs/fonts/* * /*.*" ), таза: "./assets/build/*" ); /* сервер параметрлері */ var config = ( сервер: ( baseDir: "./assets/build" ), хабарлау: false ); /* gulp және плагиндерді қосу */ var gulp = талап("gulp"), // Gulp веб-серверін қосу = талап ету("браузер-синхрондау"), // жұмыс істеуге арналған сервер және беттерді автоматты түрде жаңарту plumber = талап ("gulp-plumber "), // қателерді бақылау модулі rigger = require("gulp-rigger"), // бір файлдың мазмұнын басқа sourcemaps ішіне импорттау модулі = require("gulp-sourcemaps"), // картаны құруға арналған модуль sass бастапқы файлдарының саны = require("gulp-sass"), // SASS (SCSS) CSS автопрефиксіне компиляциялауға арналған модуль = талап ("gulp-autoprefixer"), // автопрефикстерді автоматты түрде орнатуға арналған модуль cleanCSS = талап ("gulp- clean-css" ), // CSS кішірейтуге арналған плагин uglify = require("gulp-uglify"), // JavaScript кэшін азайтуға арналған модуль = require("gulp-cache"), // imagemin кэштеу модулі = талап(" gulp-imagemin" ), // PNG, JPEG, GIF және SVG кескіндерін қысуға арналған плагин jpegrecompress = талап ету("imagemin-jpeg-recompress"), // jpeg сығуға арналған плагин pngquant = талап ("imagemin-pngquant"), / / сығуға арналған плагин png rimraf = require("gulp-rimraf"), // файлдар мен каталогтарды жоюға арналған плагин = rename("gulp-rename"); /* тапсырмалар */ // серверді іске қосу gulp.task("веб-сервер", функция () ( webserver(config); )); // html жинау gulp.task("html:build", function () ( қайтару gulp.src(path.src.html) // көрсетілген path.pipe(plumber()) бойынша барлық html файлдарын таңдау) // қателерді қадағалау pipe(rigger()) // import attachments.pipe(gulp.dest(path.build.html)) // upload ready files.pipe(webserver.reload(( stream: true ))) // серверді қайта жүктеңіз )); // стильдерді жинау gulp.task("css:build", function () ( қайтару gulp.src(path.src.style) // main.scss .pipe(plumber()) алу // қатені қадағалау.pipe( sourcemaps.init()) // sourcemap .pipe(sass()) // scss -> css .pipe(autoprefixer()) // префикстерді қосу.pipe(gulp.dest(path.build.css)) .pipe (атын өзгерту(( жұрнақ: ".min" ))) .pipe(cleanCSS()) // CSS .pipe(sourcemaps.write(") кішірейтіңіз. /")) // sourcemap жазу .pipe(gulp.dest(path.build.css)) // .pipe құрастыруға жүктеп салу(webserver.reload(( ағын: шын ))); // серверді қайта жүктеңіз )); / / collect js gulp.task("js:build", function () ( қайтару gulp.src(path.src.js) // қателерді бақылау үшін main.js файлын алыңыз .pipe(plumber()) //. pipe( rigger()) // барлық көрсетілген файлдарды main.js ішіне импорттау .pipe(gulp.dest(path.build.js)) .pipe(қайта атау(( жұрнақ: ".min" ))) .pipe(sourcemaps. init( )) //sourcemap .pipe(uglify()) //кішірейту js .pipe(sourcemaps.write("./")) //sourcemap .pipe(gulp.dest(path.build.js)) жазу // дайын файлды орналастырыңыз. src(жол. src.fonts) .pipe(gulp.dest(path.build.fonts)); // кескіндерді өңдеу gulp.task("image:build", функция () (қайтару gulp.src(path.src. img) ) // сурет көздері бар жол.pipe(кэш(imagemin([ // кескінді сығу imagemin.gifsicle(( аралас: шын )), jpegrecompress(( прогрессивті: шын, макс: 90, мин: 80 )), pngquant () , imagemin.svgo(( плагиндер: [( removeViewBox: false )] )) ]))) .pipe(gulp.dest(path.build.img)); // дайын файлдарды жүктеп салу )); // құрастыру каталогын жою gulp.task("clean:build", function () ( қайтару gulp.src(path.clean, (оқы: false )) .pipe(rimraf()); )); // кэшті тазалау gulp.task("кэш:таза", функция () ( cache.clearAll(); )); // build gulp.task("Build", gulp.series("clean:build", gulp.parallel("html:build", "css:build", "js:build", "fonts:build", " сурет:құру»))); // файлдар өзгерген кезде тапсырмаларды орындау 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")(path.watch.img, gulp.series("); image:build"); gulp.watch(path.watch.fonts, gulp.series("fonts:build")); )); // әдепкі тапсырма gulp.task("әдепкі", gulp.series("құрастыру", gulp.parallel("веб-сервер","қарау")));

"gulpfile.js" файлындағы код түсініктемелерден тұрады. Олардың көмегімен нұсқаулардың осы немесе басқа фрагменті не істейтіні түсіндіріледі.

Gulp бағдарламасында тапсырма жасау өте қарапайым:

// gulp тапсырмасын құру (nametask – тапсырманың аты) gulp.task("nametask", function() ( // тапсырма орындауы керек әрекеттер... ));

Gulp тапсырмалары өте қарапайым құрастырылған. Көп жағдайда олардың әрекет шеңберін келесідей көрсетуге болады:

• бастапқы файлдардан деректерді алу;
• gulp плагиндері арқылы бастапқы деректерді өңдеу;
• нәтижені (файлдарды) «құрастыру» каталогына сақтаңыз.

Gulp 3 қолданбасын пайдалансаңыз, "gulpfile.js" файлының мазмұны келесідей болуы керек:

«қатаң пайдалану»; /* gulp-autoprefixer параметрлері */ var autoprefixerList = [ "Chrome >= 45", "Firefox ESR", "Edge >= 12", "Explorer >= 10", "iOS >= 9", "Safari >=" 9", "Android >= 4.4", "Opera >= 30" ]; /* бастапқы файлдарға (src), дайын файлдарға (құрастыру), сондай-ақ өзгерістерін бақылау қажет (қарау) жолдар */ var path = ( құрастыру: ( html: "assets/build/", js : "assets/build/js/", css: "assets/build/css/", img: "assets/build/img/", қаріптер: "assets/build/fonts/", src: ( html: "assets" /src/*.html", js: "assets/src/js/main.js", стиль: "assets/src/style/main.scss", img: "assets/src/img/**/*. *", қаріптер: "assets/src/fonts/**/*.*", қарау: ( html: "assets/src/**/*.html", js: "assets/src/js/** / *.js", css: "assets/src/style/**/*.scss", img: "assets/src/img/**/*.*", қаріптер: "assets/srs/fonts/* * /*.*" ), таза: "./assets/build/*" ); /* сервер параметрлері */ var config = ( сервер: ( baseDir: "./assets/build" ), хабарлау: false ); /* gulp және плагиндерді қосу */ var gulp = талап("gulp"), // Gulp веб-серверін қосу = талап ету("браузер-синхрондау"), // жұмыс істеуге және беттерді автоматты түрде жаңартуға арналған сервер plumber = талап ("gulp-plumber "), // қателерді бақылау модулі rigger = require("gulp-rigger"), // бір файлдың мазмұнын басқа sourcemaps ішіне импорттау модулі = require("gulp-sourcemaps"), // картаны құруға арналған модуль sass бастапқы файлдарының саны = require("gulp-sass"), // SASS (SCSS) CSS автопрефиксіне компиляциялауға арналған модуль = талап ("gulp-autoprefixer"), // автопрефикстерді автоматты түрде орнатуға арналған модуль cleanCSS = талап ("gulp- clean-css" ), // CSS кішірейтуге арналған плагин uglify = require("gulp-uglify"), // JavaScript кэшін азайтуға арналған модуль = require("gulp-cache"), // imagemin кэштеу модулі = талап(" gulp-imagemin" ), // PNG, JPEG, GIF және SVG кескіндерін қысуға арналған плагин jpegrecompress = талап ету("imagemin-jpeg-recompress"), // jpeg сығуға арналған плагин pngquant = талап ("imagemin-pngquant"), / / сығуға арналған плагин png rimraf = require("gulp-rimraf"), // файлдар мен каталогтарды жоюға арналған плагин = rename("gulp-rename"); /* тапсырмалар */ // серверді іске қосу gulp.task("веб-сервер", функция () ( webserver(config); )); // html жинау gulp.task("html:build", function () ( қайтару gulp.src(path.src.html) // көрсетілген path.pipe(plumber()) бойынша барлық html файлдарын таңдау) // қателерді қадағалау pipe(rigger()) // import attachments.pipe(gulp.dest(path.build.html)) // upload ready files.pipe(webserver.reload(( stream: true ))) // серверді қайта жүктеңіз )); // стильдерді жинау gulp.task("css:build", function () ( қайтару gulp.src(path.src.style) // main.scss .pipe(plumber()) алу // қатені қадағалау.pipe( sourcemaps.init()) // sourcemap .pipe(sass()) // scss -> css .pipe(autoprefixer(( // браузерлер префикстерін қосу: autoprefixerList ))) .pipe(gulp.dest(path.build. css)) .pipe(rename(( жұрнақ: ".min" ))) .pipe(cleanCSS()) // CSS .pipe(sourcemaps.write(") кішірейтіңіз. /")) // sourcemap жазу .pipe(gulp.dest(path.build.css)) // .pipe құрастыруға жүктеп салу(webserver.reload(( ағын: шын ))); // серверді қайта жүктеңіз )); / / collect js gulp.task("js:build", function () ( қайтару gulp.src(path.src.js) // қателерді бақылау үшін main.js файлын алыңыз .pipe(plumber()) //. pipe( rigger()) // барлық көрсетілген файлдарды main.js ішіне импорттау .pipe(gulp.dest(path.build.js)) .pipe(қайта атау(( жұрнақ: ".min" ))) .pipe(sourcemaps. init( )) //sourcemap .pipe(uglify()) //кішірейту js .pipe(sourcemaps.write("./")) //sourcemap .pipe(gulp.dest(path.build.js)) жазу // дайын файлды орналастырыңыз. src(жол. src.fonts) .pipe(gulp.dest(path.build.fonts)); // кескіндерді өңдеу gulp.task("image:build", функция () (қайтару gulp.src(path.src. img) ) // сурет көздері бар жол.pipe(кэш(imagemin([ // кескінді сығу imagemin.gifsicle(( аралас: шын )), jpegrecompress(( прогрессивті: шын, макс: 90, мин: 80 )), pngquant () , imagemin.svgo(( плагиндер: [( removeViewBox: false )] )) ]))) .pipe(gulp.dest(path.build.img)); // дайын файлдарды жүктеп салу )); // құрастыру каталогын жою gulp.task("clean:build", function () (қайтару gulp.src(path.clean, ( оқу: жалған )) .pipe(rimraf()); )); // кэшті тазалау gulp.task("кэш:таза", функция () ( cache.clearAll(); )); // build gulp.task("build", [ "clean:build", "html:build", "css:build", "js:build", "fonts:build", "image:build" ]); // файлдар өзгерген кезде тапсырмаларды орындау 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(жол). .watch.fonts, ["fonts:build"]); // әдепкі тапсырма gulp.task("әдепкі", [ "құрастыру", "веб-сервер", "қарау" ]);

Front-end әзірлеушісіне арналған джентльмен жинағы

Жасыратыны жоқ, қазіргі заманғы фронт-end әзірлеушісінің арсеналында жобаны құрастыру құралдарының бірі болуы керек, мысалы Гүлпнемесе Грунт. Біраз уақытқа дейін Grunt бұл мәселеде монополия болды, бірақ Grunt-тен бөлінген әзірлеушілер тобы өздерінің жеңіл және жылдам тапсырмалар менеджері Gulp құруға шешім қабылдады.

Бұл мақалада біз болашақ жобаларда пайдалану үшін бастапқы пакетті нөлден дайындаймыз.

Біз қандай технологияларды қолданамыз?

• Бағдарламалық қамтамасыз ету платформасы: Node.js
• CSS алдын ала процессоры: Стилус
• Тапсырмалар менеджері: Гүлп

Неліктен фронтендерге тапсырма менеджері қажет?

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

CSS препроцессорлары шын мәнінде ыңғайлы және стильдерді жазуды тездетеді, бірақ алдын ала процессорда жазылған кодты кәдімгі CSS-ге құрастыру бір түйме арқылы шешілетін мүлдем тривиальды тапсырма емес. Міне, тапсырма менеджері бізге көмекке келеді. Кодты түрлендіру бір түймені басу арқылы ғана болмайды, бәрі сіздің қатысуыңызсыз онлайн режимінде болады (әрине, егер сіз бәрін дұрыс конфигурацияласаңыз).

Әрине, тапсырмалар менеджерінің тапсырмалары алдын ала процессор кодын таза CSS-ге түрлендірумен байланысты процестерден әлдеқайда асып түседі. Жобаны құрастырушы сонымен қатар кішірейту, біріктіру, қателер бар-жоғын тексеру, кескіндерді спрайттарға жинау, веб үшін кескіндерді оңтайландыру және т.б. Сіз жай ғана жобаңызда логикалық түрде бөлінген көптеген файлдарды жасайсыз, содан кейін олар бір каталогқа ыңғайлы түрде жиналады, өңделген және браузерде пайдалануға дайын. Бірақ бұл туралы сәл кейінірек, бірақ қазір дайындықтан бастайық.

Node.js орнатылуда

Жүйеде node.js орнату жолын білсеңіз және оны пайдаланып жатсаңыз, келесі тақырыпқа қауіпсіз өтуіңізге болады.

Сипатталған әрекеттердің барлығына қатысты екенін бірден ескерткім келеді Mac OS X, бірақ әдетте басқаларға қатысты Unixжүйелер Тапсырма менеджері және пәрмен жолы арқылы әзірлеу Windowsбіршама қиынырақ және мұнда сипатталмайды. Дегенмен, егер сіз әлі де Windows жүйесін қолдансаңыз және одан бас тартуға дайын болмасаңыз, мен орнатылған виртуалды машинаны пайдалану опциясын ұсына аламын. Ubuntu, Мен бұл опцияны үй жүйесінде қолданамын, бұл әдетте өте ыңғайлы.

Сонымен, консоль арқылы түйінмен жұмыс істеу үшін ең алдымен жүйемізге node.js бумасын жүктеп алып, орнатуымыз керек. Ресми node.js веб-сайтына өтіп, жүйеңіздің соңғы тұрақты нұсқасын жүктеп алыңыз. Орнатылғаннан кейін түйін пәрмені пәрмен жолында қолжетімді болуы керек. Түйініңіздің жұмыс істеп тұрғанын тексеру үшін пәрмен жолында пәрменді енгізіңіз

Жауап орнатылған node.js нұсқасын көрсетуі керек. Егер бәрі жақсы болса, біз жалғастырамыз.

Жоба каталогының құрылымы

Біздің жобаларымызда құрылымның бірыңғай нұсқасын қолданамыз:

Дамыту - әзірлеудің түбірлік каталогы└─бастаңыз - жоба каталогы├─салу - тапсырма менеджері құрастырған құрастыру├─ресурс - әзірлеуге арналған барлық бастапқы файлдар (.psd, т.б.)├─src - әзірлеу каталогы│├─css - стильді дамыту каталогы││├─суреттер - барлық статикалық кескіндер││├─спрайттар - спрайтқа жиналған сурет││├─жартылай - теңшелетін стиль файлдары│││├─mixins.style - теңшелетін қоспалар│││└─стильдер.стиль - реттелетін стильдер││├─сатушы - басқа сыртқы стиль файлдары││└─стильдер.стиль - негізгі стиль файлы│├─қаріптер - қаріптер каталогы│├─img - динамикалық кескіндер каталогы│├─js - JavaScript әзірлеу каталогы││├─_*.js - side js файлдары││├─_main.js - негізгі пайдаланушы js││└─main.js - негізгі js файлы│├─.htaccess - серверге арналған конфигурация│├─*.html - бет макетінің файлдары│├─pages.html - шаблонның барлық беттеріне сілтемелері бар файл│├─index.html - бет орналасу индексінің файлы│└─қосады - енгізілген белгілеу файлдарының каталогы│ └─*.html - енгізілген белгілеу файлдары (header.html, т.б.)├─package.json - npm бума менеджерінің конфигурациясы├─gulpfile.js - Gulp конфигурациясы├─стилус.үлгі.мұрт - спрайттарды оқуға арналған маска├─ЖАСАЛУ - тапсырмалар парағы└─.gitignore - Git үшін конфигурация

Орнату

Консольде cd пәрменін пайдаланып, түбірлік әзірлеу каталогына өтіңіз, mkdir start жобамыз үшін каталог жасаңыз және оған өтіңіз.

Жобаға құрылымымызды консоль арқылы орнатайық:

mkdir құрастыру ресурсы src src/css src/css/images src/css/sprites src/css/жартылай src/css/vendor src/js src/template src/template/src/img src/қаріптерді қамтиды

Жоба құрылымында бастапқы файлдарды жасайық:

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

Package.json жасайық

Барлық қалқымалы сұрақтарды Enter арқылы басуға болады, түйін оларды әдепкі мәндерге орнатады немесе ұсынылған өрістерді толтыруға болады.

.gitignore

Біз Git-ке қандай каталогтарды елемеу керектігін және репозиторийге жүктеп салмау керектігін айтамыз:

/түйін_модульдері/ /құрастыру/ /ресурс/

node_modules каталогы плагиндерді орнатқаннан кейін кейінірек пайда болады және жобаға арналған барлық түйін плагиндерін қамтиды.

src/.htaccess

Біз сервер үшін қосымша gzip қысу және кэштеуді орнатамыз:

AddOutputFilterByType DEFLATE мәтіні/html мәтіні/қарапайым мәтін/xml мәтіні/css мәтіні/javascript қолданбасы/javascript # Егер олар бар болса, gzip қысылған CSS файлдарына қызмет көрсетіңіз # және клиент gzip файлын қабылдайды. RewriteCond "%(HTTP:Қабылдау-кодтау)" "gzip" RewriteCond "%(REQUEST_FILENAME)\.gz" -s RewriteRule "^(.*)\.css" "$1\.css\.gz" # Қысылған gzip файлына қызмет көрсету JS файлдары # бар болса және клиент gzip файлын қабылдаса. RewriteCond "%(HTTP:Қабылдау-кодтау)" "gzip" RewriteCond "%(REQUEST_FILENAME)\.gz" -s RewriteRule "^(.*)\.js" "$1\.js\.gz" # Дұрыс мазмұнға қызмет көрсету түрлері және mod_deflate қос gzip алдын алу. RewriteRule "\.css\.gz$" "-" RewriteRule "\.js\.gz$" "-" # Дұрыс кодтау түрін көрсетіңіз. Тақырып қосымшасы Content-Encoding gzip # Проксилерді gzipped және # gzip емес css/js файлдарын бөлек кэштеуге мәжбүрлеу. Тақырыпқа Vary Accept-Encoding қосылады ExpiresByType қолданбасында ExpiresActive "access plus 1 ай" ExpiresByType image/jpg "access plus 1 ай" ExpiresByType image/jpeg "access plus 1 ай" ExpiresByType image/gif "access plus 1 ай" ExpiresByTaccess plus 1 ай" ExpiresByType" month" ExpiresByType text/css "access plus 1 ай"

src/css/styles.styl

Негізгі стиль файлына теңшелетін стиль файлдарын қосамыз:

@import "жартылай/стильдер"

Connection.styl файлдары үшін Stylus алдын ала процессор кодының семантикасына сәйкес кеңейтім көрсетілмегенін ескеріңіз. Мәнерлерді басқа кеңейтімге қосу үшін, мысалы.css, соңғысы қажет.

ІСТЕУ

Бұл бетте әзірлеу тапсырмалары парағы бар. Бұл файлмен жұмыс істеу туралы қосымша ақпаратты Sublime Text үшін PlainTasks плагин бетінде оқи аласыз.

Бұл құрылымды орнатуды аяқтайды.

Npm бума менеджері арқылы плагиндерді орнату

Node.js әдепкі бойынша npm пакет менеджерін қамтиды, оның репозитарийлерінде біз жұмыс істейтін көптеген плагиндер бар.

Gulp плагинін орнату

Алдымен біздің жүйеде Gulp-ті жаһандық деңгейде (-g қосқышымен) орнату керек

npm орнату gulp -g

Мұны тек бір рет жасау керек, қосымша жаһандық орнату қажет емес.

Енді Gulp-ті жоба каталогында жергілікті түрде орнату керек

npm орнату gulp --save-dev

--save-dev қосқышы плагин туралы ақпарат (репозиторийдегі атау және оның нұсқасы) package.json конфигурациясына қосылатынын және оны осы жоба үшін есте сақтайтынын білдіреді. Git жүйесінде node_modules плагиндері бар ауыр қалтаны сақтамайтындықтан, конфигурацияда сақталған орнатылған плагиндер туралы ақпарат жобадағы барлық қажетті плагиндерді бір ғана npm i пәрменімен орналастыруға мүмкіндік береді.

Әрбір команданың аббревиатуралары бар, сондықтан жоғарыдағы пәрменді қысқарақ форматта жаза аламыз

Болашақта біз қысқартылған пәрмен пішімін де қолданамыз.

Gulp үшін стилус плагині

Біздің жобаларда біз Stylus препроцессорын қолданамыз, ол тамаша жұмыс істейді және түйінде құрастырылады.

Орнату:

npm i gulp-stylus -D

CSS өңдеу плагиндері

Автопрефиксер- қажетті сипаттарға -ms- -o- -moz- -webkit- префикстерін автоматты түрде кірістіреді:

npm i gulp-autoprefixer -D

CSS кішірейту- плагин қажет емес бос орындар мен қойындыларды жоя отырып, шығыс CSS файлын азайтады:

npm мен gulp-minify-css -D

Кескінді өңдеу плагиндері

Суреттерді спрайттарға біріктіру- енді барлық суреттерді спрайттарға біріктіріп, содан кейін олардың координаттарын есептеуге қымбат уақытты жұмсаудың қажеті жоқ, бұл плагин мұның бәрін сіз үшін автоматты түрде жасайды:

npm i gulp.spritesmith -D

Бұрын жасалған stylus.template.mustache файлына спрайттағы орындарды есептеуге арналған масканы қосамыз:

((#элемент)) $((аты)) = ((px.x)) ((px.y)) ((px.offset_x)) ((px.offset_y)) ((px.width)) (( px.height)) ((px.total_width)) ((px.total_height)) "(((шығатын_сурет)))"; ((/элементтер))

mixins.styl ішіне арнайы миксиндерді қосамыз:

SpriteWidth($sprite) ені $sprite spriteHeight($sprite) биіктігі $sprite spritePosition($sprite) background-позиция $sprite $sprite spriteImage($sprite) фондық сурет url($sprite) спрайт($sprite) егер !сәйкес келсе( "меңзерді апару", селектор()) && !матч("белсенді", селектор()) spriteImage($sprite) spritePosition($sprite) spriteWidth($sprite) spriteHeight($sprite)

Микстерді және координаттары бар жасалған файлды src/css/styles.styl негізгі стильдер файлына қосайық:

@import "жартылай/спрайт" @import "жартылай/миксиндер"

Спрайт файлдары @import "жартылай/стильдер" пайдаланушы мәнерлерінен бұрын қосылуы керек екенін ескеріңіз.

Интернетке арналған кескіндерді оңтайландыру- плагин суреттеріңізден барлық қажет емес ақпаратты автоматты түрде кесіп тастайды және оларды оңтайлы өлшемге дейін қысады, бұл кейбір жағдайларда кескіндердің көлемін 90% дейін азайтуға мүмкіндік береді:

npm мен gulp-imagemin -D

JavaScript өңдеу плагиндері

JS кішірейту- плагин сіздің JS кодын мүмкіндігінше азайтып, оның жүктелу уақытын азайтады:

npm i gulp-uglify -D

JS қатесін бақылау- плагин барлық сәйкессіздіктерді анықтау және оларды консольде көрсету үшін JS кодын мұқият тексереді:

npm i jshint gulp-jshint -D

HTML өңдеу плагиндері

Қосылған файлдар- плагин сайттың статикалық бөліктерін, мысалы, үстіңгі деректеме, астыңғы деректеме, шетке және т.б. бөлек файлдарда сақтауға және оларды басқа файлдың кез келген бөлігіне қосуға мүмкіндік береді. Тақырыпта шамалы өзгерістер болған жағдайда, шаблонның ондаған, тіпті жүздеген html беттерін өзгерту қажет емес:

npm i gulp-rigger -D

Плагин JS-пен де үйлесімді.

Теңшелетін JS файлын келесі конструкциямен src/js/main.js негізгі JS файлына қосайық:

//= _main.js

header.html және footer.html файлдарын index.html ішіне енгізейік

//= қосу/header.html//= include/footer.html

Басқа плагиндер

LiveReload- плагин өзгерістерді көру үшін браузердегі бетті әр уақытта қайта жүктеу қажеттілігін болдырмайды, енді бұл өзгертілген файлды сақтау кезінде автоматты түрде орын алады:

npm i gulp-connect -D

Gulp апатының алдын алу- кейде маңызды қателер орын алса (негізінен JS себебінен) Gulp қарау режимінен шығып кетуі мүмкін. Бұл плагин мүмкіндігінше Gulp процестерін іске қосуға тырысады:

npm i gulp-сантехник -Д

Файлдардың атын өзгерту- файл атауларымен кең тараған жұмыс. Плагин файлдардың атын толығымен өзгертуге, кеңейтімді өзгертуге, префикстер мен постфикстерді қосуға, мысалы, style.styl сияқты файлды style.min.css файлына түрлендіруге мүмкіндік береді:

npm мен gulp-атын өзгерту -D

Тазартқыш- кейде құрастыру каталогын толығымен тазалау қажет, мұнда бізге плагин көмекке келеді:

Бастапқы карта- кішірейтуден кейін файлдарды шолғышты жөндеу арқылы оқуға болатын күйде қалдыру үшін кішірейтілген файлдарға бастапқы картаны қосу керек:

npm i gulp-sourcemaps -D

Жетілдірілген сағат мүмкіндіктері- плагин сағатты ақылды етеді, енді ол тек бір файлды өзгерткенде құрастырудағы барлық файлдарды қайта жазбайды, нақты өзгертілген файл қайта жазылады, бұл уақыт пен ресурстарды үнемдейді:

npm i gulp-watch -D

Package.json файлын тексерейік

Барлық плагиндер орнатылғаннан кейін, біздің package.json тексерейік. Ол келесідей көрінуі керек:

(«аты»: «бастау», «нұсқа»: «1.0.0», «сипаттама»: «Front-end әзірлеуге арналған бастапқы бума», «автор»: «Иван Иванов», «лицензия»: «MIT», "dependencies": (), "devDependencies": ( "gulp": "соңғы", "gulp-autoprefixer": "соңғы", "gulp-connect": "соңғы", "gulp-imagemin": "соңғы", "jshint": "соңғы", "jshint-stylish": "соңғы", "gulp-jshint": "соңғы", "gulp-minify-css": "соңғы", "gulp-plumber": "соңғы", "gulp-rename": "соңғы", "gulp-rigger": "соңғы", "gulp-sourcemaps": "соңғы", "gulp-stylus": "соңғы", "gulp-uglify": "соңғы", "gulp-watch": "соңғы", "gulp.spritesmith": "соңғы", "rimraf": "соңғы") )

Сіздің жағдайда соңғы нұсқаның орнына орнатылған плагиндердің нақты нұсқалары көрсетіледі. Өйткені Біз көптеген жобаларда қолданылатын бастапқы пакетімізді жасап жатырмыз, сонымен қатар жобадағы плагиндердің соңғы нұсқаларын әрқашан орнату үшін нұсқа мәндерін соңғысымен ауыстыру ұсынылады.

node_modules каталогы барлық түйіндік плагин файлдарын сақтайтын жоба қалтасында да пайда болуы керек. Барлық қажетті плагиндер орнатылған, сіз Gulp конфигурациясының параметрлеріне өтуіңізге болады.

gulpfile.js орнату

gulpfile.js- бұл біздің тапсырмалар менеджерінің негізгі конфигурация файлы, мұнда біз барлық параметрлер мен пәрмендерді сақтаймыз.

Барлық Gulp жұмысы тапсырмаға түседі ( Ағылшынтапсырма). Тапсырма - аты бар жеке тәуелсіз функция. Әрбір тапсырманы бөлек шақыруға болады.

Заманауи стандарттармен үйлесімділік режимі

Біріншіден, файлдың басында үйлесімділік режимін тек заманауи стандарттарға сәйкес қосайық:

«қатаң пайдалану»;

Бұл директива туралы көбірек біле аласыз.

Плагинді инициализациялау

Плагиндер келесі құрылыммен инициализацияланады:

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

Осы дизайнға сәйкес біз барлық плагиндерімізді инициализациялаймыз:

Var gulp = require("gulp"), //main gulp плагин stylus = require("gulp-stylus"), //алдын ала өңдеуші қалам префиксі = талап ("gulp-autoprefixer"), //автопрефикстерді реттеу cssmin = талап( " gulp-minify-css"), //css кішірейту uglify = талап ету("gulp-uglify"), //js кішірейту jshint = талап ету("gulp-jshint"), //js қатені бақылау қондырғысы = талап ету("gulp -rigger"), //html және js-де жұмыс істеу imagemin = require("gulp-imagemin"), //суреттерді азайту spritesmith = require("gulp.spritesmith"), //суреттерді спрайттарға біріктіру rimraf = талап( "rimraf"), //sourcemaps тазалау = талап ету("gulp-sourcemaps"), //sourcemaps атын өзгерту = талап ету("gulp-rename"), //файлдардың атын өзгерту plumber = талап ету("gulp-plumber"), // fuse to stop gulp watch = require("gulp-watch"), //кеңейту мүмкіндіктері сағатты қосу = талап ету("gulp-connect"); //жүктеу

Жол тұрақтылары

Ыңғайлы болу үшін барлық жолдар мен маскаларды бірден анықтайық:

Var path = ( құрастыру: ( //Мұнда біз құрастырудан кейін дайын файлдарды қайда қою керектігін көрсетеміз html: "build/", js: "build/js/", css: "build/css/", img: "build/ css/ images/", қаріптер: "build/fonts/", htaccess: "build/", contentImg: "build/img/", спрайттар: "src/css/images/", spritesCss: "src/css/partial /" ), src: ( //Дереккөздерді қайдан алуға болатын жолдар html: "src/template/*.html", //src/template/*.html синтаксисі gulp-ке барлық файлдарды алғымыз келетінін айтады. кеңейтімі .html js: "src/ js/[^_]*.js",//Стильдер мен сценарийлерде бізге тек jshint негізгі файлдары қажет: "src/js/*.js", css: "src/css/styles .styl", cssVendor: "src /css/vendor/*.*", //Егер кітапхана файлдарын бөлек сақтағымыз келсе, онда img жолын түсіндірмеңіз: "src/css/images/**/*.*", //Синтаксис img/**/*.* дегеніміз - қалтадан және ішкі каталогтардан барлық кеңейтімдердің барлық файлдарын алуды білдіреді: "src/fonts/**/*.*", contentImg: "src/img/**/ *.*», спрайттар: "src/css/ sprites/*.png", htaccess: "src/.htaccess" ), қарау: (//Мұнда html өзгерістері үшін қай файлдарды көргіміз келетінін көрсетеміз: "src/ шаблон/**/*.html", js: "src/js/**/*.js", css: "src/css/**/*.*", img: "src/css/images/* */*.*», contentImg: «src/ img/**/*.*», қаріптер: «src/fonts/**/*.*», htaccess: «src/.htaccess», спрайттар: «src /css/sprites/*.png" ), clean : "./build", //тазалауға болатын каталогтар outputDir: "./build" //минисерверді іске қосуға арналған бастапқы түбірлік каталог );

Есіңізде болсын, біз атау маскаларын пайдалана аламыз:

• *.js- js кеңейтімі бар барлық файлдар
• [^_]*.js- астын сызумен басталатындарды қоспағанда, js кеңейтімі бар барлық файлдар
• *.* - ағымдағы каталогтағы кез келген кеңейтімі бар кез келген файлдар
• /**/*.html- ағымдағы каталогтағы .html кеңейтімі бар барлық файлдар және барлық еншілес каталогтар

Тапсырма

Барлық тұрақтылар жазылғаннан кейін тапсырмаларды жазуды бастауға болады. Барлық тапсырмалар келесі құрылымға ие:

Gulp.task("taskName", function())( //кейбір функциялар ));

Шағын сервер және LiveReload

Ең алдымен, біз жергілікті сервер мен LiveReload конфигурациясын жасаймыз:

// Әзірлеуге арналған жергілікті сервер gulp.task("connect", function())( connect.server(( //сервер конфигурацияларының түбірін орнату: , //сервер портын іске қосу үшін түбірлік каталог: 9999, //қай порт livereload пайдаланады: true //LiveReload жұмысын инициализациялау ));

Сірә, сіз жиі бір уақытта бірнеше жобамен жұмыс істеуге тура келеді. Сервер көптеген серверлерді бір уақытта іске қосуға мүмкіндік береді, әртүрлі жобалар үшін өз портыңызды тіркеу жеткілікті.

HTML құрастыру

// html құруға арналған тапсырма gulp.task("html:build", function () ( gulp.src(path.src.html) // Қалаған жол бойымен файлдарды таңдаңыз.pipe(rigger()) // Оны іске қосу rigger . pipe(gulp.dest(path.build.html)) //оларды құрастыру қалтасына жүктеңіз .pipe(connect.reload()) //Жаңартулар үшін серверімізді қайта жүктеңіз ));

JS құрастырыңыз

// js қателерін тексеріп, оларды консольге шығарыңыз gulp.task("jshint:build", function() ( қайтару gulp.src(path.src.jshint) //қажетті path.pipe(jshint() бойымен файлдарды таңдаңыз. )) //оны jshint .pipe(jshint.reporter("jshint-stylish") арқылы іске қосыңыз // консольге стиль қатесін шығару )); // JavaScript құру gulp.task("js:build", function () ( gulp.src(path.src.js) // Негізгі файлымызды табыңыз.pipe(rigger()) // Оны rigger .pipe( арқылы іске қосыңыз sourcemaps .init()) //sourcemap .pipe(uglify()) //Біздің js .pipe файлын сығу(sourcemaps.write()) //Maps.pipe жазу(атын өзгерту((суффикс: ".min")))) / /шығыс файлына.min жұрнағын қосыңыз.pipe(gulp.dest(path.build.js)) //.pipe(connect.reload()) құру үшін дайын файлды жүктеңіз) //Және серверді қайта жүктеңіз )) ;

Спрайт құрастыру

Спрайттарға біріктірілетін барлық кескіндер src/css/sprites/ каталогына орналастырылады және Gulp арқылы іске қосылғаннан кейін олар бір спрайт кескініне айналады. Өлшемдері анық емес спрайттарға логотиптер мен фон салуға болмайды.

// спрайттарды құру gulp.task("sprites:build", function () ( var spriteData = gulp.src(path.src.sprites) // sprite.pipe(spritesmith(( imgName)) ішіне біріктіру үшін кескіндерді алуды таңдау : " sprite.png", //спрайт кескінінің аты cssName: "sprite.styl", //спрайт imgPath ішіндегі кескіндердің орындарын сақтайтын стильдің атауы: "images/sprite.png", / /жол, мұнда спрайт cssFormat: "стилус", //орындарды өңдейтін пішім cssTemplate: "stylus.template.mustache", //маска файлы cssVarMap: function(sprite) ( sprite.name = "s-" + sprite.name //әр спрайттың аты файл атауынан және атаудың басындағы "s-" конструкциясынан тұрады ) ))) .build.spritesCss) // стильдерді сақтайтын жол )); );

Спрайтты көрсету үшін миксинді пайдаланыңыз. Мысалы, lorem.png файлы үшін спрайттан таңдау келесідей болады:

Lorem спрайт($s-lorem)

Енді .lorem класы бар нысан суреттің өлшемдерін және фон ретінде кескіннің өзін қабылдайды.

Статикалық кескіндерді құрастырыңыз

Статикалық кескіндер — орналасу үлгісінде пайдаланылатын кескіндер.

// статикалық кескіндерді құру gulp.task("image:build", function () ( gulp.src(path.src.img) //Біздің images.pipe(imagemin(( //Оларды прогрессивті қысу: шын, //) compression.jpg svgoPlugins: [(removeViewBox: false)], //compression.svg interlaced: true, //compression.gif optimizationLevel: 3 //0-ден 7-ге дейін қысу дәрежесі ))) .pipe(gulp.dest(жол. build.img)) //.pipe құрастыруға жүктеп салу(connect.reload()) //серверді қайта жүктеңіз ));

Динамикалық кескіндерді құру

Динамикалық кескіндер сайтта өзгеретін мазмұн кескіндері болып табылады және үлгі деңгейінде демонстрация үшін ғана қамтылған. Мысалы, бұл жаңалықтарға арналған суреттер болуы мүмкін және т.б.

// динамикалық кескіндерді құру gulp.task("imagescontent:build", function() ( gulp.src(path.src.contentImg) .pipe(imagemin(( //Оларды прогрессивті сығу: true, //compression.jpg svgoPlugins: [(removeViewBox: false)], //compression.svg тоғысқан: шын, //compression.gif optimizationLevel: 3 //қысу дәрежесі 0-ден 7 ))) .pipe(gulp.dest(path.build.contentImg)) //.pipe құру үшін жүктеп салу(connect.reload()) //серверді қайта жүктеңіз ));

CSS құрастыру

// теңшелетін css құру gulp.task("cssOwn:build", function () ( gulp.src(path.src.css) //Негізгі стиль файлымызды таңдаңыз.pipe(sourcemaps.init()) //succap картасын инициализациялаңыз. pipe(stylus(( қысу: шын, "css қосу": шын ))) //Стилусты құрастыру .pipe(префиксер(( браузер: ["соңғы 3 нұсқа", "> 1%", "яғни 8", "яғни 7"] ))) //Жеткізуші префикстерін қосу.pipe(cssmin()) //Compress.pipe(sourcemaps.write()) //sourcemap .pipe жазу(атын өзгерту((суффикс: ".min")))) / /шығыс файлының атына.min жұрнағын қосыңыз.pipe(gulp.dest(path.build.css)) //.pipe құрастыруға жүктеп салу(connect.reload()) //серверді қайта жүктеңіз ));

Сыртқы стильдер үшін бөлек тапсырма:

// сатушыны құру CSS gulp.task("cssVendor:build", функция () ( gulp.src(path.src.cssVendor) // Жеткізуші қалтасын алыңыз .pipe(sourcemaps.init()) //soucemap .pipe инициализациясы ( cssmin()) //Compress.pipe(sourcemaps.write()) //sourcemap жазу .pipe(gulp.dest(path.build.css)) //.pipe(connect.reload()) құру үшін жүктеп салу / / серверді қайта жүктеңіз));

Сондай-ақ жалпы CSS құру тапсырмасын қосамыз:

// толық CSS құру gulp.task("css:build", [ "cssOwn:build", // "cssVendor:build" ]);

Сыртқы стильдерді үй мәнерлерінен бөлек өңдеу және оларды бөлек файлдар ретінде жүктеп салу қажет болса, «cssVendor:build» жолынан түсініктеме алу керек.

Қаріп құрастыру

// қаріптерді құру gulp.task("fonts:build", function() ( gulp.src(path.src.fonts) .pipe(gulp.dest(path.build.fonts)) //құруға жүктеп салу ));

Build.htaccess

// htaccess құру gulp.task("htaccess:build", function() ( gulp.src(path.src.htaccess).pipe(gulp.dest(path.build.htaccess)) //құруға жүктеп салу ));

Жалпы құрылыс

Әр бөлікті бөлек құрастырмау үшін жалпы құрылымға тапсырма жазайық:

// бәрін құрастыр gulp.task("build", [ "html:build", "jshint:build", "js:build", "sprites:build", "css:build", "fonts:build", " htaccess:құру», «сурет:құрастыру», «imagescontent:құрастыру» ]);

Құрылысты тазалау

Кейде құрастыру каталогын толығымен тазалау қажет. Мұнда бізге келесі тапсырма көмектеседі:

// құрастыру қалтасын тазалаңыз gulp.task("таза", функция (cb) ( rimraf(path.clean, cb); ));

Нақты уақыттағы өзгерістерді бақылаңыз немесе бақылаңыз

Gulp-тің ең маңызды және пайдалы функцияларының бірі - нақты уақытта жасалған файлдардағы барлық өзгерістерді бақылауға және соған байланысты нақты әрекеттерді орындауға мүмкіндік беретін қарау функциясы:

// watch gulp.task("watch", function())( //өзгерген жағдайда html құрастыр watch(, function(оқиға, cb) ( gulp.start("html:build"); )); // watch(, function(event, cb)) ( gulp.start("sprites:build"); )); //өзгеріс жағдайында спрайттарды құрастыру watch(, функция(оқиға, cb) ( gulp .start(" imagescontent:build" )); //css өзгерген жағдайда watch(, function(event, cb)) ( gulp.start("css:build"); )); case of change watch(, ["jshint"]); //өзгертілген жағдайда watch(, функция(оқиға, cb)) ( gulp.start("js:build"); //статикалық кескіндерді құрастыру өзгерген жағдайда watch(, функция (оқиға, cb) ( gulp.start("image:build"); ) //өзгеріс кезінде қаріптерді құрастыру watch(, функция(оқиға, cb) ( gulp.start() "fonts:build" )) ; // htaccess өзгерген жағдайда watch(, function(оқиға, cb)) ( gulp.start("htaccess:build"); ));

Әдепкі әрекеттер

Әдепкі әрекеттер консольге gulp пәрменін енгізген кезде тапсырма менеджері қандай тапсырмаларды орындайтыны болып табылады:

// әдепкі әрекеттер gulp.task("әдепкі", ["құрастыру", "қарау", "қосылу"]);

Біздің жағдайда, әдеттегідей, біз жобамызды құрастырамыз, қарау режимін қосамыз және серверді іске қосамыз.

Пәрмен жолы командалары

Пәрмен жолына арналған барлық gulp пәрмендері екі бөліктен тұрады: gulp пәрменінің өзі және бос орынмен бөлінген тапсырманың аты. Мұнда біздің конфигурацияға қолданылатын пәрмендер тізімі берілген:

• gulp - негізгі пәрмен, әдепкі тапсырманы бастайды
• gulp build - бәрін құрастыру
• gulp watch - іске қосу сағаты
• gulp clean - құрастыру каталогын тазартады
• gulp connect - серверді іске қосыңыз
• gulp html:build - HTML құрастыру
• gulp jshint:build - JS жүйесінде қателерді тексеріңіз
• gulp js:build - JS құрастыру
• gulp sprites:құру - спрайт құрастыру
• gulp image:Build - статикалық кескіндерді құрастыру
• gulp imagecontent:Build - динамикалық кескіндерді құрастыру
• gulp cssOwn:build - теңшелетін CSS құрастыру
• gulp cssVendor:құру – сыртқы CSS құрастыру
• gulp css:build - жалпы CSS құрастыру
• gulp қаріптері:құрастыру - қаріп құрастыру
• gulp htaccess:Build - build.htaccess

Бұл кезеңде gulpfile.js конфигурациясы аяқталды.

Бастапқы буманы жобаға көшіріңіз

Алдымен біз әзірлеп жатқан қалтадағы консоль арқылы өтіп көрейік, мысалы, cd develop/example және бастапқы пакет каталогынан барлығын cp -a ~/develop/start/ жобамызға көшірейік. ~/әзірлеу/мысал/

Бұл көшіру әдісі ең қолайлы, себебі... барлығын дәл көшіреді, соның ішінде жасырын файлдар.gitignore, т.б.

Қорытынды

Осы нұсқаулықты пайдалана отырып, біз Front-end әзірлеу жобаларымызда Gulp пайдалану үшін бастапқы пакетті дайындадық.

Бұл пакет GitHub сайтында да қол жетімді

Post Scriptum

Бұл мақала түпкілікті емес және өзгертулер мен жақсартуларға байланысты жаңартылады.