├── .babelrc
├── .github
└── workflows
│ └── codesee-arch-diagram.yml
├── .gitignore
├── README.md
├── build
├── .gitkeep
├── css
│ └── style.min.css
├── index.html
├── js
│ └── main.min.js
└── sourcemaps
│ ├── main.min.js.map
│ └── style.min.css.map
├── folders.txt
├── gulpfile.js
├── package.json
├── src
├── components
│ ├── bem-blocks
│ │ └── _sprite.html
│ └── page-blocks
│ │ ├── .gitkeep
│ │ ├── _footer.html
│ │ ├── _head.html
│ │ ├── _header.html
│ │ └── _scripts.html
├── fonts
│ └── .gitkeep
├── img
│ └── .gitkeep
├── index.html
├── js
│ ├── .gitkeep
│ └── 01_main.js
├── scss
│ ├── _local-fonts.scss
│ ├── base
│ │ ├── .gitkeep
│ │ ├── _01_normalize.scss
│ │ └── _mixins.scss
│ ├── global
│ │ ├── _fonts.scss
│ │ ├── _global.scss
│ │ └── _svg.scss
│ └── style.scss
└── svg
│ ├── css
│ └── .gitkeep
│ ├── include
│ └── .gitkeep
│ └── sprite
│ └── .gitkeep
└── tasks
├── bs_html.js
├── bs_php.js
├── build_js.js
├── deploy.js
├── dev_js.js
├── fonts.js
├── ftp_settings.json
├── html.js
├── libs_js.js
├── libs_style.js
├── php.js
├── rastr.js
├── style.js
├── svg_css.js
├── svg_sprite.js
├── ttf.js
├── ttf2.js
├── watch.js
└── webp.js
/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 | "presets": ["@babel/preset-env"]
3 | }
--------------------------------------------------------------------------------
/.github/workflows/codesee-arch-diagram.yml:
--------------------------------------------------------------------------------
1 | on:
2 | push:
3 | branches:
4 | - master
5 | pull_request_target:
6 | types: [opened, synchronize, reopened]
7 |
8 | name: CodeSee Map
9 |
10 | jobs:
11 | test_map_action:
12 | runs-on: ubuntu-latest
13 | continue-on-error: true
14 | name: Run CodeSee Map Analysis
15 | steps:
16 | - name: checkout
17 | id: checkout
18 | uses: actions/checkout@v2
19 | with:
20 | repository: ${{ github.event.pull_request.head.repo.full_name }}
21 | ref: ${{ github.event.pull_request.head.ref }}
22 | fetch-depth: 0
23 |
24 | # codesee-detect-languages has an output with id languages.
25 | - name: Detect Languages
26 | id: detect-languages
27 | uses: Codesee-io/codesee-detect-languages-action@latest
28 |
29 | - name: Configure JDK 16
30 | uses: actions/setup-java@v2
31 | if: ${{ fromJSON(steps.detect-languages.outputs.languages).java }}
32 | with:
33 | java-version: '16'
34 | distribution: 'zulu'
35 |
36 | # CodeSee Maps Go support uses a static binary so there's no setup step required.
37 |
38 | - name: Configure Node.js 14
39 | uses: actions/setup-node@v2
40 | if: ${{ fromJSON(steps.detect-languages.outputs.languages).javascript }}
41 | with:
42 | node-version: '14'
43 |
44 | - name: Configure Python 3.x
45 | uses: actions/setup-python@v2
46 | if: ${{ fromJSON(steps.detect-languages.outputs.languages).python }}
47 | with:
48 | python-version: '3.10'
49 | architecture: 'x64'
50 |
51 | - name: Configure Ruby '3.x'
52 | uses: ruby/setup-ruby@v1
53 | if: ${{ fromJSON(steps.detect-languages.outputs.languages).ruby }}
54 | with:
55 | ruby-version: '3.0'
56 |
57 | # CodeSee Maps Rust support uses a static binary so there's no setup step required.
58 |
59 | - name: Generate Map
60 | id: generate-map
61 | uses: Codesee-io/codesee-map-action@latest
62 | with:
63 | step: map
64 | github_ref: ${{ github.ref }}
65 | languages: ${{ steps.detect-languages.outputs.languages }}
66 |
67 | - name: Upload Map
68 | id: upload-map
69 | uses: Codesee-io/codesee-map-action@latest
70 | with:
71 | step: mapUpload
72 | api_token: ${{ secrets.CODESEE_ARCH_DIAG_API_TOKEN }}
73 | github_ref: ${{ github.ref }}
74 |
75 | - name: Insights
76 | id: insights
77 | uses: Codesee-io/codesee-map-action@latest
78 | with:
79 | step: insights
80 | api_token: ${{ secrets.CODESEE_ARCH_DIAG_API_TOKEN }}
81 | github_ref: ${{ github.ref }}
82 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | package-lock.json
3 | yarn.lock
4 | process.json
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | [](https://css_notes.dyaka.com/startpack)
2 |
3 | # Easy-webdev-startpack
4 |
5 |     
6 |
7 | ## Сборка Gulp4 с плагинами для разработки вебпроектов.
8 |
9 | Вы можете поддержать разработку проекта, перейдя [по ссылке](https://css_notes.diaka.ua/startpack) и оставив мне что-то на кофе.
10 |
11 | [](http://www.youtube.com/watch?v=_j38UEpskPU "Мануал по работе со сборкой Easy-webdev-startpack")
12 |
13 | Смотрите [вики](https://github.com/budfy/Easy-webdev-startpack/wiki) сборки, чтобы узнать, как ею пользоваться правильно. В вики справа есть разделы и они по мере наличия времени и возникновения вопросов дополняются.
14 | 
15 |
16 | ## Что есть в сборке:
17 |
18 | - компилятор для препроцессора scss/sass;
19 | - минификация готового css;
20 | - автопрефиксер;
21 | - импорт одних файлов в другие, который позволяет собирать html из модулей;
22 | - babel;
23 | - конвертация шрифтов из ttf вwoff и woff2;
24 | - полуавтоматическое формирование и подключение @font-face;
25 | - для живого обновления страниц - browsersync;
26 | - карта исходников для отображения в браузере, из какого scss взят кусок css;
27 | - сжатие изображений;
28 | - адекватное сжатие png через pngquant;
29 | - сжатие svg;
30 | - создание svg-спрайтов и конвертация svg в background-image;
31 | - конвертация растровых изображений в webp;
32 | - живая перезагрузка при работе с PHP (совместно с openserver);
33 |
34 | ## Об ошибках, пожалуйста, сообщайте в [ишьюс](https://github.com/budfy/Easy-webdev-startpack/issues). Там же можно оставить свои предложения по функционалу сборки.
35 |
--------------------------------------------------------------------------------
/build/.gitkeep:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/budfy/Easy-webdev-startpack/f6d72fbcaedc1341efce5c8a0e6e3b6b4284af3e/build/.gitkeep
--------------------------------------------------------------------------------
/build/css/style.min.css:
--------------------------------------------------------------------------------
1 | /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css *//*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%}details,main{display:block}h1{font-size:2em}hr{-webkit-box-sizing:content-box;box-sizing:content-box;height:0;overflow:visible}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}a{background-color:rgba(0,0,0,0)}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted}b,strong{font-weight:bolder}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:ButtonText dotted 1px}fieldset{padding:.35em .75em .625em}legend{-webkit-box-sizing:border-box;box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{-webkit-box-sizing:border-box;box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}[hidden],template{display:none}*,::after,::before{-webkit-box-sizing:border-box;box-sizing:border-box}.flex{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start;-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start}.--just-space{-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}.--just-center{-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.--just-end{-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end}.--align-str{-webkit-box-align:stretch;-ms-flex-align:stretch;align-items:stretch}.--align-center{-webkit-box-align:center;-ms-flex-align:center;align-items:center}.--align-end{-webkit-box-align:end;-ms-flex-align:end;align-items:flex-end}.--dir-col{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}html{font-size:16px}body,html{min-height:100%;position:relative}body{margin:0;font-size:1rem}h1,h2,h3,h4,h5,h6,li,ol,p,ul{margin:0}
2 | /*# sourceMappingURL=../sourcemaps/style.min.css.map */
3 |
--------------------------------------------------------------------------------
/build/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
8 |
10 |
12 |
15 |
18 |
21 |
23 |
25 | Easy-webdev-startpack v3.0
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
41 |
--------------------------------------------------------------------------------
/build/js/main.min.js:
--------------------------------------------------------------------------------
1 |
2 | //# sourceMappingURL=../sourcemaps/main.min.js.map
3 |
--------------------------------------------------------------------------------
/build/sourcemaps/main.min.js.map:
--------------------------------------------------------------------------------
1 | {"version":3,"sources":["01_main.js"],"names":[],"mappings":"AAAA","file":"../js/main.min.js","sourcesContent":[""]}
--------------------------------------------------------------------------------
/build/sourcemaps/style.min.css.map:
--------------------------------------------------------------------------------
1 | {"version":3,"sources":["base/_01_normalize.scss","global/_global.scss"],"names":[],"mappings":"AAAA,4EAAA,4EAUA,KACC,YAAA,KAEA,yBAAA,KAgVD,QA7TA,KACC,QAAA,MAQD,GACC,UAAA,IAYD,GACC,mBAAA,YAAA,WAAA,YAEA,OAAA,EAEA,SAAA,QAuDD,KAAA,IA9CA,IA8CA,KA7CC,YAAA,SAAA,CAAA,UAEA,UAAA,IAWD,EACC,iBAAA,cAQD,YACC,mBAEA,gBAAA,UAEA,wBAAA,UAAA,OAAA,gBAAA,UAAA,OAQD,EAAA,OAEC,YAAA,OAqBD,MACC,UAAA,IAQD,IAAA,IAEC,UAAA,IACA,YAAA,EACA,SAAA,SACA,eAAA,SAGD,IACC,OAAA,OAGD,IACC,IAAA,MAUD,IACC,aAAA,KAWD,OAAA,MAAA,SAAA,OAAA,SAKC,YAAA,QAEA,UAAA,KAEA,YAAA,KAEA,OAAA,EASD,OAAA,MAGC,SAAA,QAQD,OAAA,OAGC,eAAA,KAOD,cAAA,aAAA,cAAA,OAIC,mBAAA,OAOD,gCAAA,+BAAA,gCAAA,yBAIC,aAAA,KACA,QAAA,EAOD,6BAAA,4BAAA,6BAAA,sBAIC,QAAA,WAAA,OAAA,IAOD,SACC,QAAA,MAAA,MAAA,OAUD,OACC,mBAAA,WAAA,WAAA,WAEA,MAAA,QAEA,QAAA,MAEA,UAAA,KAEA,QAAA,EAEA,YAAA,OAQD,SACC,eAAA,SAOD,SACC,SAAA,KAQD,gBAAA,aAEC,mBAAA,WAAA,WAAA,WAEA,QAAA,EAQD,yCAAA,yCAEC,OAAA,KAQD,cACC,mBAAA,UAEA,eAAA,KAQD,yCACC,mBAAA,KAQD,6BACC,mBAAA,OAEA,KAAA,QAmBD,QACC,QAAA,UAkBD,SARA,SACC,QAAA,KCjXD,EAAA,QAAA,SAGC,mBAAA,WAAA,WAAA,WAGD,MACC,QAAA,YAAA,QAAA,YAAA,QAAA,KACA,kBAAA,MAAA,eAAA,MAAA,YAAA,WACA,iBAAA,MAAA,cAAA,MAAA,gBAAA,WAGD,cACC,iBAAA,QAAA,cAAA,QAAA,gBAAA,cAGD,eACC,iBAAA,OAAA,cAAA,OAAA,gBAAA,OAGD,YACC,iBAAA,IAAA,cAAA,IAAA,gBAAA,SAGD,aACC,kBAAA,QAAA,eAAA,QAAA,YAAA,QAGD,gBACC,kBAAA,OAAA,eAAA,OAAA,YAAA,OAGD,aACC,kBAAA,IAAA,eAAA,IAAA,YAAA,SAGD,WACC,mBAAA,SAAA,sBAAA,OAAA,mBAAA,OAAA,eAAA,OAGD,KACC,UAAA,KAGD,KAAA,KAEC,WAAA,KACA,SAAA,SAGD,KDzBC,OAAA,EC0BA,UAAA,KAGD,GAAA,GAAA,GAAA,GAAA,GAAA,GAAA,GAAA,GAAA,EAAA,GAUC,OAAA","file":"../scss/style.min.css","sourcesContent":["/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */\r\n\r\n/* Document\r\n ========================================================================== */\r\n\r\n/**\r\n * 1. Correct the line height in all browsers.\r\n * 2. Prevent adjustments of font size after orientation changes in iOS.\r\n */\r\n\r\nhtml {\r\n\tline-height: 1.15;\r\n\t/* 1 */\r\n\t-webkit-text-size-adjust: 100%;\r\n\t/* 2 */\r\n}\r\n\r\n/* Sections\r\n ========================================================================== */\r\n\r\n/**\r\n * Remove the margin in all browsers.\r\n */\r\n\r\nbody {\r\n\tmargin: 0;\r\n}\r\n\r\n/**\r\n * Render the `main` element consistently in IE.\r\n */\r\n\r\nmain {\r\n\tdisplay: block;\r\n}\r\n\r\n/**\r\n * Correct the font size and margin on `h1` elements within `section` and\r\n * `article` contexts in Chrome, Firefox, and Safari.\r\n */\r\n\r\nh1 {\r\n\tfont-size: 2em;\r\n\tmargin: 0.67em 0;\r\n}\r\n\r\n/* Grouping content\r\n ========================================================================== */\r\n\r\n/**\r\n * 1. Add the correct box sizing in Firefox.\r\n * 2. Show the overflow in Edge and IE.\r\n */\r\n\r\nhr {\r\n\tbox-sizing: content-box;\r\n\t/* 1 */\r\n\theight: 0;\r\n\t/* 1 */\r\n\toverflow: visible;\r\n\t/* 2 */\r\n}\r\n\r\n/**\r\n * 1. Correct the inheritance and scaling of font size in all browsers.\r\n * 2. Correct the odd `em` font sizing in all browsers.\r\n */\r\n\r\npre {\r\n\tfont-family: monospace, monospace;\r\n\t/* 1 */\r\n\tfont-size: 1em;\r\n\t/* 2 */\r\n}\r\n\r\n/* Text-level semantics\r\n ========================================================================== */\r\n\r\n/**\r\n * Remove the gray background on active links in IE 10.\r\n */\r\n\r\na {\r\n\tbackground-color: transparent;\r\n}\r\n\r\n/**\r\n * 1. Remove the bottom border in Chrome 57-\r\n * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.\r\n */\r\n\r\nabbr[title] {\r\n\tborder-bottom: none;\r\n\t/* 1 */\r\n\ttext-decoration: underline;\r\n\t/* 2 */\r\n\ttext-decoration: underline dotted;\r\n\t/* 2 */\r\n}\r\n\r\n/**\r\n * Add the correct font weight in Chrome, Edge, and Safari.\r\n */\r\n\r\nb,\r\nstrong {\r\n\tfont-weight: bolder;\r\n}\r\n\r\n/**\r\n * 1. Correct the inheritance and scaling of font size in all browsers.\r\n * 2. Correct the odd `em` font sizing in all browsers.\r\n */\r\n\r\ncode,\r\nkbd,\r\nsamp {\r\n\tfont-family: monospace, monospace;\r\n\t/* 1 */\r\n\tfont-size: 1em;\r\n\t/* 2 */\r\n}\r\n\r\n/**\r\n * Add the correct font size in all browsers.\r\n */\r\n\r\nsmall {\r\n\tfont-size: 80%;\r\n}\r\n\r\n/**\r\n * Prevent `sub` and `sup` elements from affecting the line height in\r\n * all browsers.\r\n */\r\n\r\nsub,\r\nsup {\r\n\tfont-size: 75%;\r\n\tline-height: 0;\r\n\tposition: relative;\r\n\tvertical-align: baseline;\r\n}\r\n\r\nsub {\r\n\tbottom: -0.25em;\r\n}\r\n\r\nsup {\r\n\ttop: -0.5em;\r\n}\r\n\r\n/* Embedded content\r\n ========================================================================== */\r\n\r\n/**\r\n * Remove the border on images inside links in IE 10.\r\n */\r\n\r\nimg {\r\n\tborder-style: none;\r\n}\r\n\r\n/* Forms\r\n ========================================================================== */\r\n\r\n/**\r\n * 1. Change the font styles in all browsers.\r\n * 2. Remove the margin in Firefox and Safari.\r\n */\r\n\r\nbutton,\r\ninput,\r\noptgroup,\r\nselect,\r\ntextarea {\r\n\tfont-family: inherit;\r\n\t/* 1 */\r\n\tfont-size: 100%;\r\n\t/* 1 */\r\n\tline-height: 1.15;\r\n\t/* 1 */\r\n\tmargin: 0;\r\n\t/* 2 */\r\n}\r\n\r\n/**\r\n * Show the overflow in IE.\r\n * 1. Show the overflow in Edge.\r\n */\r\n\r\nbutton,\r\ninput {\r\n\t/* 1 */\r\n\toverflow: visible;\r\n}\r\n\r\n/**\r\n * Remove the inheritance of text transform in Edge, Firefox, and IE.\r\n * 1. Remove the inheritance of text transform in Firefox.\r\n */\r\n\r\nbutton,\r\nselect {\r\n\t/* 1 */\r\n\ttext-transform: none;\r\n}\r\n\r\n/**\r\n * Correct the inability to style clickable types in iOS and Safari.\r\n */\r\n\r\nbutton,\r\n[type=\"button\"],\r\n[type=\"reset\"],\r\n[type=\"submit\"] {\r\n\t-webkit-appearance: button;\r\n}\r\n\r\n/**\r\n * Remove the inner border and padding in Firefox.\r\n */\r\n\r\nbutton::-moz-focus-inner,\r\n[type=\"button\"]::-moz-focus-inner,\r\n[type=\"reset\"]::-moz-focus-inner,\r\n[type=\"submit\"]::-moz-focus-inner {\r\n\tborder-style: none;\r\n\tpadding: 0;\r\n}\r\n\r\n/**\r\n * Restore the focus styles unset by the previous rule.\r\n */\r\n\r\nbutton:-moz-focusring,\r\n[type=\"button\"]:-moz-focusring,\r\n[type=\"reset\"]:-moz-focusring,\r\n[type=\"submit\"]:-moz-focusring {\r\n\toutline: 1px dotted ButtonText;\r\n}\r\n\r\n/**\r\n * Correct the padding in Firefox.\r\n */\r\n\r\nfieldset {\r\n\tpadding: 0.35em 0.75em 0.625em;\r\n}\r\n\r\n/**\r\n * 1. Correct the text wrapping in Edge and IE.\r\n * 2. Correct the color inheritance from `fieldset` elements in IE.\r\n * 3. Remove the padding so developers are not caught out when they zero out\r\n * `fieldset` elements in all browsers.\r\n */\r\n\r\nlegend {\r\n\tbox-sizing: border-box;\r\n\t/* 1 */\r\n\tcolor: inherit;\r\n\t/* 2 */\r\n\tdisplay: table;\r\n\t/* 1 */\r\n\tmax-width: 100%;\r\n\t/* 1 */\r\n\tpadding: 0;\r\n\t/* 3 */\r\n\twhite-space: normal;\r\n\t/* 1 */\r\n}\r\n\r\n/**\r\n * Add the correct vertical alignment in Chrome, Firefox, and Opera.\r\n */\r\n\r\nprogress {\r\n\tvertical-align: baseline;\r\n}\r\n\r\n/**\r\n * Remove the default vertical scrollbar in IE 10+.\r\n */\r\n\r\ntextarea {\r\n\toverflow: auto;\r\n}\r\n\r\n/**\r\n * 1. Add the correct box sizing in IE 10.\r\n * 2. Remove the padding in IE 10.\r\n */\r\n\r\n[type=\"checkbox\"],\r\n[type=\"radio\"] {\r\n\tbox-sizing: border-box;\r\n\t/* 1 */\r\n\tpadding: 0;\r\n\t/* 2 */\r\n}\r\n\r\n/**\r\n * Correct the cursor style of increment and decrement buttons in Chrome.\r\n */\r\n\r\n[type=\"number\"]::-webkit-inner-spin-button,\r\n[type=\"number\"]::-webkit-outer-spin-button {\r\n\theight: auto;\r\n}\r\n\r\n/**\r\n * 1. Correct the odd appearance in Chrome and Safari.\r\n * 2. Correct the outline style in Safari.\r\n */\r\n\r\n[type=\"search\"] {\r\n\t-webkit-appearance: textfield;\r\n\t/* 1 */\r\n\toutline-offset: -2px;\r\n\t/* 2 */\r\n}\r\n\r\n/**\r\n * Remove the inner padding in Chrome and Safari on macOS.\r\n */\r\n\r\n[type=\"search\"]::-webkit-search-decoration {\r\n\t-webkit-appearance: none;\r\n}\r\n\r\n/**\r\n * 1. Correct the inability to style clickable types in iOS and Safari.\r\n * 2. Change font properties to `inherit` in Safari.\r\n */\r\n\r\n::-webkit-file-upload-button {\r\n\t-webkit-appearance: button;\r\n\t/* 1 */\r\n\tfont: inherit;\r\n\t/* 2 */\r\n}\r\n\r\n/* Interactive\r\n ========================================================================== */\r\n\r\n/*\r\n * Add the correct display in Edge, IE 10+, and Firefox.\r\n */\r\n\r\ndetails {\r\n\tdisplay: block;\r\n}\r\n\r\n/*\r\n * Add the correct display in all browsers.\r\n */\r\n\r\nsummary {\r\n\tdisplay: list-item;\r\n}\r\n\r\n/* Misc\r\n ========================================================================== */\r\n\r\n/**\r\n * Add the correct display in IE 10+.\r\n */\r\n\r\ntemplate {\r\n\tdisplay: none;\r\n}\r\n\r\n/**\r\n * Add the correct display in IE 10.\r\n */\r\n\r\n[hidden] {\r\n\tdisplay: none;\r\n}","*,\r\n*::before,\r\n*::after {\r\n\tbox-sizing: border-box;\r\n}\r\n\r\n.flex {\r\n\tdisplay: flex;\r\n\talign-items: flex-start;\r\n\tjustify-content: flex-start;\r\n}\r\n\r\n.--just-space {\r\n\tjustify-content: space-between;\r\n}\r\n\r\n.--just-center {\r\n\tjustify-content: center;\r\n}\r\n\r\n.--just-end {\r\n\tjustify-content: flex-end;\r\n}\r\n\r\n.--align-str {\r\n\talign-items: stretch;\r\n}\r\n\r\n.--align-center {\r\n\talign-items: center;\r\n}\r\n\r\n.--align-end {\r\n\talign-items: flex-end;\r\n}\r\n\r\n.--dir-col {\r\n\tflex-direction: column;\r\n}\r\n\r\nhtml {\r\n\tfont-size: 16px;\r\n}\r\n\r\nhtml,\r\nbody {\r\n\tmin-height: 100%;\r\n\tposition: relative;\r\n}\r\n\r\nbody {\r\n\tfont-size: 1rem;\r\n}\r\n\r\nul,\r\nol,\r\nli,\r\np,\r\nh1,\r\nh2,\r\nh3,\r\nh4,\r\nh5,\r\nh6 {\r\n\tmargin: 0;\r\n}"]}
--------------------------------------------------------------------------------
/folders.txt:
--------------------------------------------------------------------------------
1 | 💼 project/
2 | ├──── 📡 build/ - пустая директория для скомпилированных файлов проекта
3 | ├──── 🧶 node-modules/ - директория для node-модулей
4 | ├──┬─ 🗄 src/ - директория для исходных файлов проекта
5 | │ ├──┬─ ⚙ components/ - директория для компонентов
6 | │ │ ├─── 🧩 bem-blocks/ - директория для БЭМ-блоков
7 | │ │ └─── 🗂 page-blocks/ - директория для типовых блоков страницы, таких как хедер, футер и т.п.
8 | │ ├──── 🔤 fonts/ - директория для шрифтов
9 | │ ├──── 🖼 img/ - директория для изображений
10 | │ ├──── 📑 js/ - директория для файлов JavaScript
11 | │ ├──┬─ 📜 scss/ - директория для файлов стилей
12 | │ │ └─── 🧬 base/ - директория для базовых стилей, которые мы изщменять не будем
13 | │ └──┬─ ⛱ svg/ - директория для файлов SVG
14 | │ └─── 🏷 css/ - директория для SVG-файлов, которые будут интегрироваться в CSS
15 | │
16 | └──── 🛠 tasks/ - директория для модулей функций Gulp
--------------------------------------------------------------------------------
/gulpfile.js:
--------------------------------------------------------------------------------
1 | const gulp = require('gulp');
2 | const requireDir = require('require-dir');
3 | const tasks = requireDir('./tasks');
4 |
5 | exports.libs_style = tasks.libs_style;
6 | exports.svg_css = tasks.svg_css;
7 | exports.fonts = tasks.fonts;
8 | exports.style = tasks.style;
9 | exports.build_js = tasks.build_js;
10 | exports.libs_js = tasks.libs_js;
11 | exports.dev_js = tasks.dev_js;
12 | exports.html = tasks.html;
13 | exports.php = tasks.php;
14 | exports.rastr = tasks.rastr;
15 | exports.webp = tasks.webp;
16 | exports.svg_sprite = tasks.svg_sprite;
17 | exports.ttf = tasks.ttf;
18 | exports.ttf2 = tasks.ttf2;
19 | exports.bs_html = tasks.bs_html;
20 | exports.bs_php = tasks.bs_php;
21 | exports.watch = tasks.watch;
22 | exports.deploy = tasks.deploy;
23 |
24 | exports.default = gulp.parallel(
25 | exports.libs_style,
26 | exports.svg_css,
27 | exports.ttf,
28 | exports.ttf2,
29 | exports.fonts,
30 | exports.style,
31 | exports.libs_js,
32 | exports.dev_js,
33 | exports.rastr,
34 | exports.webp,
35 | exports.svg_sprite,
36 | exports.html,
37 | exports.bs_html,
38 | exports.watch
39 | )
40 | exports.dev_php = gulp.parallel(
41 | exports.libs_style,
42 | exports.svg_css,
43 | exports.ttf,
44 | exports.ttf2,
45 | exports.fonts,
46 | exports.style,
47 | exports.libs_js,
48 | exports.dev_js,
49 | exports.rastr,
50 | exports.webp,
51 | exports.svg_sprite,
52 | exports.php,
53 | exports.bs_php,
54 | exports.watch
55 | )
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "easy-webdev-startpack",
3 | "version": "3.1.1",
4 | "description": "HTML5+CSS3 template for easy start website project'",
5 | "main": "gulpfile.js",
6 | "scripts": {
7 | "html": "gulp",
8 | "start": "gulp",
9 | "php": "gulp dev_php",
10 | "build": "gulp libs_style && gulp svg_css && gulp ttf && gulp fonts && gulp style && gulp libs_js && gulp build_js && gulp rastr && gulp webp && gulp svg_sprite && gulp html && gulp php",
11 | "ftp": "gulp deploy",
12 | "build-ftp": "npm run build && npm run ftp"
13 | },
14 | "author": "",
15 | "license": "ISC",
16 | "devDependencies": {
17 | "@babel/core": "^7.14.2",
18 | "@babel/preset-env": "^7.14.2",
19 | "browser-sync": "^2.26.14",
20 | "chalk": "^4.1.1",
21 | "gulp": "^4.0.2",
22 | "gulp-autoprefixer": "^8.0.0",
23 | "gulp-babel": "^8.0.0",
24 | "gulp-changed": "^4.0.2",
25 | "gulp-clean-css": "^4.3.0",
26 | "gulp-concat": "^2.6.1",
27 | "gulp-file-include": "^2.3.0",
28 | "gulp-imagemin": "^7.1.0",
29 | "gulp-multi-dest": "^1.3.7",
30 | "gulp-plumber": "^1.2.1",
31 | "gulp-sass": "^5.1.0",
32 | "gulp-sass-bulk-importer": "^3.0.1",
33 | "gulp-sourcemaps": "^3.0.0",
34 | "gulp-svg-css-pseudo": "^1.0.4",
35 | "gulp-svg-sprite": "^1.5.0",
36 | "gulp-svgmin": "^3.0.0",
37 | "gulp-ttf2woff": "^1.1.1",
38 | "gulp-ttftowoff2": "^1.0.1",
39 | "gulp-uglify-es": "^2.0.0",
40 | "gulp-webp": "^4.0.1",
41 | "imagemin-jpeg-recompress": "^7.0.0",
42 | "imagemin-pngquant": "^9.0.2",
43 | "require-dir": "^1.2.0",
44 | "vinyl-ftp": "^0.6.1"
45 | },
46 | "dependencies": {
47 | "sass": "^1.56.0"
48 | }
49 | }
50 |
--------------------------------------------------------------------------------
/src/components/bem-blocks/_sprite.html:
--------------------------------------------------------------------------------
1 |
4 |
--------------------------------------------------------------------------------
/src/components/page-blocks/.gitkeep:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/budfy/Easy-webdev-startpack/f6d72fbcaedc1341efce5c8a0e6e3b6b4284af3e/src/components/page-blocks/.gitkeep
--------------------------------------------------------------------------------
/src/components/page-blocks/_footer.html:
--------------------------------------------------------------------------------
1 |
2 |
--------------------------------------------------------------------------------
/src/components/page-blocks/_head.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
7 |
9 |
11 |
14 |
17 |
20 |
22 |
24 | @@title
25 |
26 |
--------------------------------------------------------------------------------
/src/components/page-blocks/_header.html:
--------------------------------------------------------------------------------
1 |
2 |
--------------------------------------------------------------------------------
/src/components/page-blocks/_scripts.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
--------------------------------------------------------------------------------
/src/fonts/.gitkeep:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/budfy/Easy-webdev-startpack/f6d72fbcaedc1341efce5c8a0e6e3b6b4284af3e/src/fonts/.gitkeep
--------------------------------------------------------------------------------
/src/img/.gitkeep:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/budfy/Easy-webdev-startpack/f6d72fbcaedc1341efce5c8a0e6e3b6b4284af3e/src/img/.gitkeep
--------------------------------------------------------------------------------
/src/index.html:
--------------------------------------------------------------------------------
1 |
2 | @@include('components/page-blocks/_head.html',{
3 | "lang":"en",
4 | "title":"Easy-webdev-startpack v3.0",
5 | "description":"Gulp pack for easy html/php markup development",
6 | "keywords":"",
7 | "favicon":"img/favicons/favicon",
8 | })
9 |
10 |
11 | @@include('components/page-blocks/_header.html')
12 |
13 | @@include('components/page-blocks/_footer.html')
14 | @@include('components/page-blocks/_scripts.html')
15 |
16 |
17 |
18 |
--------------------------------------------------------------------------------
/src/js/.gitkeep:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/budfy/Easy-webdev-startpack/f6d72fbcaedc1341efce5c8a0e6e3b6b4284af3e/src/js/.gitkeep
--------------------------------------------------------------------------------
/src/js/01_main.js:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/budfy/Easy-webdev-startpack/f6d72fbcaedc1341efce5c8a0e6e3b6b4284af3e/src/js/01_main.js
--------------------------------------------------------------------------------
/src/scss/_local-fonts.scss:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/budfy/Easy-webdev-startpack/f6d72fbcaedc1341efce5c8a0e6e3b6b4284af3e/src/scss/_local-fonts.scss
--------------------------------------------------------------------------------
/src/scss/base/.gitkeep:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/budfy/Easy-webdev-startpack/f6d72fbcaedc1341efce5c8a0e6e3b6b4284af3e/src/scss/base/.gitkeep
--------------------------------------------------------------------------------
/src/scss/base/_01_normalize.scss:
--------------------------------------------------------------------------------
1 | /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
2 |
3 | /* Document
4 | ========================================================================== */
5 |
6 | /**
7 | * 1. Correct the line height in all browsers.
8 | * 2. Prevent adjustments of font size after orientation changes in iOS.
9 | */
10 |
11 | html {
12 | line-height: 1.15;
13 | /* 1 */
14 | -webkit-text-size-adjust: 100%;
15 | /* 2 */
16 | }
17 |
18 | /* Sections
19 | ========================================================================== */
20 |
21 | /**
22 | * Remove the margin in all browsers.
23 | */
24 |
25 | body {
26 | margin: 0;
27 | }
28 |
29 | /**
30 | * Render the `main` element consistently in IE.
31 | */
32 |
33 | main {
34 | display: block;
35 | }
36 |
37 | /**
38 | * Correct the font size and margin on `h1` elements within `section` and
39 | * `article` contexts in Chrome, Firefox, and Safari.
40 | */
41 |
42 | h1 {
43 | font-size: 2em;
44 | margin: 0.67em 0;
45 | }
46 |
47 | /* Grouping content
48 | ========================================================================== */
49 |
50 | /**
51 | * 1. Add the correct box sizing in Firefox.
52 | * 2. Show the overflow in Edge and IE.
53 | */
54 |
55 | hr {
56 | box-sizing: content-box;
57 | /* 1 */
58 | height: 0;
59 | /* 1 */
60 | overflow: visible;
61 | /* 2 */
62 | }
63 |
64 | /**
65 | * 1. Correct the inheritance and scaling of font size in all browsers.
66 | * 2. Correct the odd `em` font sizing in all browsers.
67 | */
68 |
69 | pre {
70 | font-family: monospace, monospace;
71 | /* 1 */
72 | font-size: 1em;
73 | /* 2 */
74 | }
75 |
76 | /* Text-level semantics
77 | ========================================================================== */
78 |
79 | /**
80 | * Remove the gray background on active links in IE 10.
81 | */
82 |
83 | a {
84 | background-color: transparent;
85 | }
86 |
87 | /**
88 | * 1. Remove the bottom border in Chrome 57-
89 | * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
90 | */
91 |
92 | abbr[title] {
93 | border-bottom: none;
94 | /* 1 */
95 | text-decoration: underline;
96 | /* 2 */
97 | text-decoration: underline dotted;
98 | /* 2 */
99 | }
100 |
101 | /**
102 | * Add the correct font weight in Chrome, Edge, and Safari.
103 | */
104 |
105 | b,
106 | strong {
107 | font-weight: bolder;
108 | }
109 |
110 | /**
111 | * 1. Correct the inheritance and scaling of font size in all browsers.
112 | * 2. Correct the odd `em` font sizing in all browsers.
113 | */
114 |
115 | code,
116 | kbd,
117 | samp {
118 | font-family: monospace, monospace;
119 | /* 1 */
120 | font-size: 1em;
121 | /* 2 */
122 | }
123 |
124 | /**
125 | * Add the correct font size in all browsers.
126 | */
127 |
128 | small {
129 | font-size: 80%;
130 | }
131 |
132 | /**
133 | * Prevent `sub` and `sup` elements from affecting the line height in
134 | * all browsers.
135 | */
136 |
137 | sub,
138 | sup {
139 | font-size: 75%;
140 | line-height: 0;
141 | position: relative;
142 | vertical-align: baseline;
143 | }
144 |
145 | sub {
146 | bottom: -0.25em;
147 | }
148 |
149 | sup {
150 | top: -0.5em;
151 | }
152 |
153 | /* Embedded content
154 | ========================================================================== */
155 |
156 | /**
157 | * Remove the border on images inside links in IE 10.
158 | */
159 |
160 | img {
161 | border-style: none;
162 | }
163 |
164 | /* Forms
165 | ========================================================================== */
166 |
167 | /**
168 | * 1. Change the font styles in all browsers.
169 | * 2. Remove the margin in Firefox and Safari.
170 | */
171 |
172 | button,
173 | input,
174 | optgroup,
175 | select,
176 | textarea {
177 | font-family: inherit;
178 | /* 1 */
179 | font-size: 100%;
180 | /* 1 */
181 | line-height: 1.15;
182 | /* 1 */
183 | margin: 0;
184 | /* 2 */
185 | }
186 |
187 | /**
188 | * Show the overflow in IE.
189 | * 1. Show the overflow in Edge.
190 | */
191 |
192 | button,
193 | input {
194 | /* 1 */
195 | overflow: visible;
196 | }
197 |
198 | /**
199 | * Remove the inheritance of text transform in Edge, Firefox, and IE.
200 | * 1. Remove the inheritance of text transform in Firefox.
201 | */
202 |
203 | button,
204 | select {
205 | /* 1 */
206 | text-transform: none;
207 | }
208 |
209 | /**
210 | * Correct the inability to style clickable types in iOS and Safari.
211 | */
212 |
213 | button,
214 | [type="button"],
215 | [type="reset"],
216 | [type="submit"] {
217 | -webkit-appearance: button;
218 | }
219 |
220 | /**
221 | * Remove the inner border and padding in Firefox.
222 | */
223 |
224 | button::-moz-focus-inner,
225 | [type="button"]::-moz-focus-inner,
226 | [type="reset"]::-moz-focus-inner,
227 | [type="submit"]::-moz-focus-inner {
228 | border-style: none;
229 | padding: 0;
230 | }
231 |
232 | /**
233 | * Restore the focus styles unset by the previous rule.
234 | */
235 |
236 | button:-moz-focusring,
237 | [type="button"]:-moz-focusring,
238 | [type="reset"]:-moz-focusring,
239 | [type="submit"]:-moz-focusring {
240 | outline: 1px dotted ButtonText;
241 | }
242 |
243 | /**
244 | * Correct the padding in Firefox.
245 | */
246 |
247 | fieldset {
248 | padding: 0.35em 0.75em 0.625em;
249 | }
250 |
251 | /**
252 | * 1. Correct the text wrapping in Edge and IE.
253 | * 2. Correct the color inheritance from `fieldset` elements in IE.
254 | * 3. Remove the padding so developers are not caught out when they zero out
255 | * `fieldset` elements in all browsers.
256 | */
257 |
258 | legend {
259 | box-sizing: border-box;
260 | /* 1 */
261 | color: inherit;
262 | /* 2 */
263 | display: table;
264 | /* 1 */
265 | max-width: 100%;
266 | /* 1 */
267 | padding: 0;
268 | /* 3 */
269 | white-space: normal;
270 | /* 1 */
271 | }
272 |
273 | /**
274 | * Add the correct vertical alignment in Chrome, Firefox, and Opera.
275 | */
276 |
277 | progress {
278 | vertical-align: baseline;
279 | }
280 |
281 | /**
282 | * Remove the default vertical scrollbar in IE 10+.
283 | */
284 |
285 | textarea {
286 | overflow: auto;
287 | }
288 |
289 | /**
290 | * 1. Add the correct box sizing in IE 10.
291 | * 2. Remove the padding in IE 10.
292 | */
293 |
294 | [type="checkbox"],
295 | [type="radio"] {
296 | box-sizing: border-box;
297 | /* 1 */
298 | padding: 0;
299 | /* 2 */
300 | }
301 |
302 | /**
303 | * Correct the cursor style of increment and decrement buttons in Chrome.
304 | */
305 |
306 | [type="number"]::-webkit-inner-spin-button,
307 | [type="number"]::-webkit-outer-spin-button {
308 | height: auto;
309 | }
310 |
311 | /**
312 | * 1. Correct the odd appearance in Chrome and Safari.
313 | * 2. Correct the outline style in Safari.
314 | */
315 |
316 | [type="search"] {
317 | -webkit-appearance: textfield;
318 | /* 1 */
319 | outline-offset: -2px;
320 | /* 2 */
321 | }
322 |
323 | /**
324 | * Remove the inner padding in Chrome and Safari on macOS.
325 | */
326 |
327 | [type="search"]::-webkit-search-decoration {
328 | -webkit-appearance: none;
329 | }
330 |
331 | /**
332 | * 1. Correct the inability to style clickable types in iOS and Safari.
333 | * 2. Change font properties to `inherit` in Safari.
334 | */
335 |
336 | ::-webkit-file-upload-button {
337 | -webkit-appearance: button;
338 | /* 1 */
339 | font: inherit;
340 | /* 2 */
341 | }
342 |
343 | /* Interactive
344 | ========================================================================== */
345 |
346 | /*
347 | * Add the correct display in Edge, IE 10+, and Firefox.
348 | */
349 |
350 | details {
351 | display: block;
352 | }
353 |
354 | /*
355 | * Add the correct display in all browsers.
356 | */
357 |
358 | summary {
359 | display: list-item;
360 | }
361 |
362 | /* Misc
363 | ========================================================================== */
364 |
365 | /**
366 | * Add the correct display in IE 10+.
367 | */
368 |
369 | template {
370 | display: none;
371 | }
372 |
373 | /**
374 | * Add the correct display in IE 10.
375 | */
376 |
377 | [hidden] {
378 | display: none;
379 | }
--------------------------------------------------------------------------------
/src/scss/base/_mixins.scss:
--------------------------------------------------------------------------------
1 | @mixin font-face($name, $file, $weight: 400, $style: normal) {
2 | @font-face {
3 | font-family: "#{$name}";
4 | src: local("#{$file}"),
5 | url('../fonts/#{$file}.woff2') format('woff2'),
6 | url('../fonts/#{$file}.woff') format('woff');
7 | font-weight: $weight;
8 | font-style: $style;
9 | font-display: swap;
10 | }
11 | }
12 |
13 | @mixin bg ($size:"contain", $position: "center") {
14 | background-size: #{$size};
15 | background-position: #{$position};
16 | background-repeat: no-repeat;
17 | }
18 |
19 | @mixin btn_anim($scaleMax:1.05, $scaleMin:0.95) {
20 | transform-origin: center center;
21 | transition: all ease-out 240ms;
22 |
23 | &:hover {
24 | transform: scale(#{$scaleMax});
25 | }
26 |
27 | &:focus {
28 | outline: transparent;
29 | }
30 |
31 | &:focus-visible {
32 | transform: scale(#{$scaleMax}) translateY(-5%);
33 | }
34 |
35 | &:active {
36 | transform: scale(#{$scaleMin});
37 | }
38 | }
39 |
40 | @mixin no-btn ($display:"inline-block") {
41 | padding: 0;
42 | margin: 0;
43 | border: 0;
44 | background-color: transparent;
45 | border-radius: 0;
46 | cursor: pointer;
47 | appearance: none;
48 | display: #{$display};
49 | }
50 |
51 | @mixin transit ($tr:0.24) {
52 | transition: all #{$tr}s;
53 | }
54 |
55 | @mixin container($max-width:"120rem", $padding:"2rem") {
56 | width: 100%;
57 | max-width: #{$max-width};
58 | padding: 0 #{$padding};
59 | margin: 0 auto;
60 | }
--------------------------------------------------------------------------------
/src/scss/global/_fonts.scss:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/budfy/Easy-webdev-startpack/f6d72fbcaedc1341efce5c8a0e6e3b6b4284af3e/src/scss/global/_fonts.scss
--------------------------------------------------------------------------------
/src/scss/global/_global.scss:
--------------------------------------------------------------------------------
1 | *,
2 | *::before,
3 | *::after {
4 | box-sizing: border-box;
5 | }
6 |
7 | .flex {
8 | display: flex;
9 | align-items: flex-start;
10 | justify-content: flex-start;
11 | }
12 |
13 | .--just-space {
14 | justify-content: space-between;
15 | }
16 |
17 | .--just-center {
18 | justify-content: center;
19 | }
20 |
21 | .--just-end {
22 | justify-content: flex-end;
23 | }
24 |
25 | .--align-str {
26 | align-items: stretch;
27 | }
28 |
29 | .--align-center {
30 | align-items: center;
31 | }
32 |
33 | .--align-end {
34 | align-items: flex-end;
35 | }
36 |
37 | .--dir-col {
38 | flex-direction: column;
39 | }
40 |
41 | html {
42 | font-size: 16px;
43 | }
44 |
45 | html,
46 | body {
47 | min-height: 100%;
48 | position: relative;
49 | }
50 |
51 | body {
52 | font-size: 1rem;
53 | }
54 |
55 | ul,
56 | ol,
57 | li,
58 | p,
59 | h1,
60 | h2,
61 | h3,
62 | h4,
63 | h5,
64 | h6 {
65 | margin: 0;
66 | }
--------------------------------------------------------------------------------
/src/scss/global/_svg.scss:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/budfy/Easy-webdev-startpack/f6d72fbcaedc1341efce5c8a0e6e3b6b4284af3e/src/scss/global/_svg.scss
--------------------------------------------------------------------------------
/src/scss/style.scss:
--------------------------------------------------------------------------------
1 | @import 'base/*.scss';
2 | @import 'global/*.scss';
3 | @import '**/_*.scss';
4 | @import '../components/**/*.scss';
--------------------------------------------------------------------------------
/src/svg/css/.gitkeep:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/budfy/Easy-webdev-startpack/f6d72fbcaedc1341efce5c8a0e6e3b6b4284af3e/src/svg/css/.gitkeep
--------------------------------------------------------------------------------
/src/svg/include/.gitkeep:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/budfy/Easy-webdev-startpack/f6d72fbcaedc1341efce5c8a0e6e3b6b4284af3e/src/svg/include/.gitkeep
--------------------------------------------------------------------------------
/src/svg/sprite/.gitkeep:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/budfy/Easy-webdev-startpack/f6d72fbcaedc1341efce5c8a0e6e3b6b4284af3e/src/svg/sprite/.gitkeep
--------------------------------------------------------------------------------
/tasks/bs_html.js:
--------------------------------------------------------------------------------
1 | const bs = require('browser-sync');
2 |
3 | module.exports = function bs_html() {
4 | bs.init({
5 | server: {
6 | baseDir: 'build/',
7 | host: '192.168.0.104',
8 | },
9 | callbacks: {
10 | ready: function (err, bs) {
11 | bs.addMiddleware("*", function (req, res) {
12 | res.writeHead(302, {
13 | location: "404.html"
14 | });
15 | res.end("Redirecting!");
16 | });
17 | }
18 | },
19 | browser: 'default',
20 | logPrefix: 'BS-HTML:',
21 | logLevel: 'info',
22 | logConnections: true,
23 | logFileChanges: true,
24 | open: true
25 | })
26 | }
--------------------------------------------------------------------------------
/tasks/bs_php.js:
--------------------------------------------------------------------------------
1 | const bs = require('browser-sync');
2 |
3 | module.exports = function bs_php() {
4 | bs.init({
5 | browser: ['default'],
6 | watch: true,
7 | proxy: '',
8 | logLevel: 'info',
9 | logPrefix: 'BS-PHP:',
10 | logConnections: true,
11 | logFileChanges: true,
12 | })
13 | }
--------------------------------------------------------------------------------
/tasks/build_js.js:
--------------------------------------------------------------------------------
1 | const {
2 | src,
3 | dest
4 | } = require('gulp');
5 | const uglify = require('gulp-uglify-es').default;
6 | const babel = require('gulp-babel');
7 | const concat = require('gulp-concat');
8 |
9 | module.exports = function build_js() {
10 | return src(['src/components/**/*.js', 'src/js/01_main.js'])
11 | .pipe(uglify())
12 | .pipe(babel({
13 | presets: ['@babel/env']
14 | }))
15 | .pipe(concat('main.min.js'))
16 | .pipe(dest('build/js/'))
17 | }
--------------------------------------------------------------------------------
/tasks/deploy.js:
--------------------------------------------------------------------------------
1 | const {
2 | src
3 | } = require('gulp');
4 | const ftp = require('vinyl-ftp');
5 | const ftpSettings = require('../tasks/ftp_settings');
6 | const chalk = require('chalk');
7 | const connect = ftp.create(ftpSettings);
8 |
9 | module.exports = function deploy() {
10 | return src(['build/**/*.*', '!build/**/*.map'])
11 | .pipe(connect.newer('public_html/'))
12 | .pipe(connect.dest('public_html/'))
13 | .on('end', () => console.log(`Finished deploing ./build to https://${chalk.blueBright(ftpSettings.host)}`))
14 | }
--------------------------------------------------------------------------------
/tasks/dev_js.js:
--------------------------------------------------------------------------------
1 | const {
2 | src,
3 | dest
4 | } = require('gulp');
5 | const uglify = require('gulp-uglify-es').default;
6 | const concat = require('gulp-concat');
7 | const map = require('gulp-sourcemaps');
8 | const bs = require('browser-sync');
9 |
10 | module.exports = function dev_js() {
11 | return src(['src/components/**/*.js', 'src/js/01_main.js'])
12 | .pipe(map.init())
13 | .pipe(uglify())
14 | .pipe(concat('main.min.js'))
15 | .pipe(map.write('../sourcemaps'))
16 | .pipe(dest('build/js/'))
17 | .pipe(bs.stream())
18 | }
--------------------------------------------------------------------------------
/tasks/fonts.js:
--------------------------------------------------------------------------------
1 | const fs = require('fs');
2 | const chalk = require('chalk');
3 |
4 | let srcFonts = 'src/scss/_local-fonts.scss';
5 | let appFonts = 'build/fonts/';
6 | module.exports = function fonts(done) {
7 | fs.writeFile(srcFonts, '', () => {});
8 | fs.readdir(appFonts, (err, items) => {
9 | if (items) {
10 | let c_fontname;
11 | for (let i = 0; i < items.length; i++) {
12 | let fontname = items[i].split('.'),
13 | fontExt;
14 | fontExt = fontname[1];
15 | fontname = fontname[0];
16 | if (c_fontname != fontname) {
17 | if (fontExt == 'woff' || fontExt == 'woff2') {
18 | fs.appendFile(srcFonts, `@include font-face("${fontname}", "${fontname}", 400);\r\n`, () => {});
19 | console.log(chalk `
20 | {bold {bgGray Added new font: ${fontname}.}
21 | ----------------------------------------------------------------------------------
22 | {bgYellow.black Please, move mixin call from {cyan src/scss/_local-fonts.scss} to {cyan src/scss/global/_fonts.scss} and then change it!}}
23 | ----------------------------------------------------------------------------------
24 | `);
25 | }
26 | }
27 | c_fontname = fontname;
28 | }
29 | }
30 | })
31 | done();
32 | }
--------------------------------------------------------------------------------
/tasks/ftp_settings.json:
--------------------------------------------------------------------------------
1 | {
2 | "host": "hosting.com",
3 | "user": "login",
4 | "pass": "********",
5 | "parallel": 10
6 | }
--------------------------------------------------------------------------------
/tasks/html.js:
--------------------------------------------------------------------------------
1 | const {
2 | src,
3 | dest
4 | } = require('gulp');
5 | const include = require('gulp-file-include');
6 | const bs = require('browser-sync');
7 |
8 | module.exports = function html() {
9 | return src(['src/**/*.html', '!src/components/**/*.html'])
10 | .pipe(include())
11 | .pipe(dest('build'))
12 | .pipe(bs.stream())
13 | }
--------------------------------------------------------------------------------
/tasks/libs_js.js:
--------------------------------------------------------------------------------
1 | const plugins = [];
2 | const {
3 | src,
4 | dest
5 | } = require('gulp');
6 | const uglify = require('gulp-uglify-es').default;
7 | const concat = require('gulp-concat');
8 | const map = require('gulp-sourcemaps');
9 | const chalk = require('chalk');
10 |
11 | module.exports = function libs_js(done) {
12 | if (plugins.length > 0)
13 | return src(plugins)
14 | .pipe(map.init())
15 | .pipe(uglify())
16 | .pipe(concat('libs.min.js'))
17 | .pipe(map.write('../sourcemaps'))
18 | .pipe(dest('build/js/'))
19 | else {
20 | return done(console.log(chalk.bgYellow(`${chalk.bold('WARNING!')} You did not add any JavaScript plugins.`)));
21 | }
22 | }
--------------------------------------------------------------------------------
/tasks/libs_style.js:
--------------------------------------------------------------------------------
1 | const plugins = [];
2 |
3 | const {
4 | src,
5 | dest
6 | } = require('gulp');
7 | const sass = require('gulp-sass')(require('sass'));
8 | const concat = require('gulp-concat');
9 | const map = require('gulp-sourcemaps');
10 | const chalk = require('chalk');
11 |
12 | module.exports = function libs_style(done) {
13 | if (plugins.length > 0) {
14 | return src(plugins)
15 | .pipe(map.init())
16 | .pipe(sass({
17 | outputStyle: 'compressed'
18 | }).on('error', sass.logError))
19 | .pipe(concat('libs.min.css'))
20 | .pipe(map.write('../sourcemaps/'))
21 | .pipe(dest('build/css/'))
22 | } else {
23 | return done(console.log(chalk.bgYellow(`${chalk.bold('WARNING!')} You did not add any CSS/SCSS plugins.`)));
24 | }
25 | }
--------------------------------------------------------------------------------
/tasks/php.js:
--------------------------------------------------------------------------------
1 | const {
2 | src,
3 | dest
4 | } = require('gulp');
5 | const include = require('gulp-file-include');
6 | const bs = require('browser-sync');
7 |
8 | module.exports = function php() {
9 | return src('src/**/*.php')
10 | .pipe(include())
11 | .pipe(dest('build'))
12 | .pipe(bs.stream())
13 | }
--------------------------------------------------------------------------------
/tasks/rastr.js:
--------------------------------------------------------------------------------
1 | const {
2 | src,
3 | dest
4 | } = require('gulp');
5 | const changed = require('gulp-changed');
6 | const imagemin = require('gulp-imagemin');
7 | const recompress = require('imagemin-jpeg-recompress');
8 | const pngquant = require('imagemin-pngquant');
9 | const bs = require('browser-sync');
10 | const plumber = require('gulp-plumber');
11 |
12 | module.exports = function rastr() {
13 | return src('src/img/**/*.+(png|jpg|jpeg|gif|svg|ico)')
14 | .pipe(plumber())
15 | .pipe(changed('build/img'))
16 | .pipe(imagemin({
17 | interlaced: true,
18 | progressive: true,
19 | optimizationLevel: 5,
20 | },
21 | [
22 | recompress({
23 | loops: 6,
24 | min: 50,
25 | max: 90,
26 | quality: 'high',
27 | use: [pngquant({
28 | quality: [0.8, 1],
29 | strip: true,
30 | speed: 1
31 | })],
32 | }),
33 | imagemin.gifsicle(),
34 | imagemin.optipng(),
35 | imagemin.svgo()
36 | ], ), )
37 | .pipe(dest('build/img'))
38 | .pipe(bs.stream())
39 | }
--------------------------------------------------------------------------------
/tasks/style.js:
--------------------------------------------------------------------------------
1 | const {
2 | src,
3 | dest
4 | } = require('gulp');
5 | const sass = require('gulp-sass')(require('sass'));
6 | const bulk = require('gulp-sass-bulk-importer');
7 | const prefixer = require('gulp-autoprefixer');
8 | const clean = require('gulp-clean-css');
9 | const concat = require('gulp-concat');
10 | const map = require('gulp-sourcemaps');
11 | const bs = require('browser-sync');
12 |
13 | module.exports = function style() {
14 | return src('src/scss/**/*.scss')
15 | .pipe(map.init())
16 | .pipe(bulk())
17 | .pipe(sass({
18 | outputStyle: 'compressed'
19 | }).on('error', sass.logError))
20 | .pipe(prefixer({
21 | overrideBrowserslist: ['last 8 versions'],
22 | browsers: [
23 | 'Android >= 4',
24 | 'Chrome >= 20',
25 | 'Firefox >= 24',
26 | 'Explorer >= 11',
27 | 'iOS >= 6',
28 | 'Opera >= 12',
29 | 'Safari >= 6',
30 | ],
31 | }))
32 | .pipe(clean({
33 | level: 2
34 | }))
35 | .pipe(concat('style.min.css'))
36 | .pipe(map.write('../sourcemaps/'))
37 | .pipe(dest('build/css/'))
38 | .pipe(bs.stream())
39 | }
--------------------------------------------------------------------------------
/tasks/svg_css.js:
--------------------------------------------------------------------------------
1 | const {
2 | src,
3 | dest
4 | } = require('gulp');
5 | const svgmin = require('gulp-svgmin');
6 | const svgCss = require('gulp-svg-css-pseudo');
7 |
8 | module.exports = function svg_css() {
9 | return src('src/svg/css/**/*.svg')
10 | .pipe(svgmin({
11 | plugins: [{
12 | removeComments: true
13 | },
14 | {
15 | removeEmptyContainers: true
16 | }
17 | ]
18 | }))
19 | .pipe(svgCss({
20 | fileName: '_svg',
21 | fileExt: 'scss',
22 | cssPrefix: '--svg__',
23 | addSize: false
24 | }))
25 | .pipe(dest('src/scss/global'))
26 | }
--------------------------------------------------------------------------------
/tasks/svg_sprite.js:
--------------------------------------------------------------------------------
1 | const {
2 | src,
3 | dest
4 | } = require('gulp');
5 | const svgmin = require('gulp-svgmin');
6 | const sprite = require('gulp-svg-sprite');
7 |
8 | module.exports = function svg_sprite() {
9 | return src('src/svg/**/*.svg')
10 | .pipe(svgmin({
11 | plugins: [{
12 | removeComments: true
13 | },
14 | {
15 | removeEmptyContainers: true
16 | }
17 | ]
18 | }))
19 | .pipe(sprite({
20 | mode: {
21 | stack: {
22 | sprite: '../sprite.svg'
23 | }
24 | }
25 | }))
26 | .pipe(dest('src/img'))
27 | }
--------------------------------------------------------------------------------
/tasks/ttf.js:
--------------------------------------------------------------------------------
1 | const {
2 | src,
3 | dest
4 | } = require('gulp');
5 | const changed = require('gulp-changed');
6 | const ttf2woff2 = require('gulp-ttftowoff2');
7 | const ttf2woff = require('gulp-ttf2woff');
8 |
9 | module.exports = function ttf(done) {
10 | return src('src/fonts/**/*.ttf')
11 | .pipe(changed('build/fonts', {
12 | extension: '.woff2',
13 | hasChanged: changed.compareLastModifiedTime
14 | }))
15 | .pipe(ttf2woff2())
16 | .pipe(dest('build/fonts'))
17 | done();
18 | }
--------------------------------------------------------------------------------
/tasks/ttf2.js:
--------------------------------------------------------------------------------
1 | const {
2 | src,
3 | dest
4 | } = require('gulp');
5 | const changed = require('gulp-changed');
6 | const ttf2woff2 = require('gulp-ttftowoff2');
7 | const ttf2woff = require('gulp-ttf2woff');
8 |
9 | module.exports = function ttf2(done) {
10 | return src('src/fonts/**/*.ttf')
11 | .pipe(changed('build/fonts', {
12 | extension: 'woff',
13 | hasChanged: changed.compareLastModifiedTime
14 | }))
15 | .pipe(ttf2woff())
16 | .pipe(dest('build/fonts'))
17 | done();
18 | }
--------------------------------------------------------------------------------
/tasks/watch.js:
--------------------------------------------------------------------------------
1 | const {
2 | watch,
3 | parallel,
4 | series
5 | } = require('gulp');
6 |
7 | module.exports = function watching() {
8 | watch('src/**/*.html', parallel('html'));
9 | watch('src/**/*.php', parallel('php'));
10 | watch('src/**/*.scss', parallel('style'));
11 | watch('src/**/*.js', parallel('dev_js'));
12 | watch('src/**/*.json', parallel('html'));
13 | watch('src/img/**/*.+(svg|ico)', parallel('rastr'));
14 | watch('src/img/**/*.+(png|jpg|jpeg|gif)', series('rastr', 'webp'));
15 | watch('src/svg/css/**/*.svg', series('svg_css', 'style'));
16 | watch('src/svg/**/*.svg', series('svg_sprite', 'rastr'));
17 | watch('src/fonts/**/*.ttf', series('ttf', 'ttf2', 'fonts'));
18 | }
--------------------------------------------------------------------------------
/tasks/webp.js:
--------------------------------------------------------------------------------
1 | const {
2 | src
3 | } = require('gulp');
4 | const webpConv = require('gulp-webp');
5 | const changed = require('gulp-changed');
6 | const multiDest = require('gulp-multi-dest');
7 | const plumber = require('gulp-plumber');
8 |
9 | module.exports = function webp() {
10 | return src('build/img/**/*.+(png|jpg|jpeg)')
11 | .pipe(plumber())
12 | .pipe(changed('build/img', {
13 | extension: '.webp'
14 | }))
15 | .pipe(webpConv())
16 | .pipe(multiDest(['src/img', 'build/img']))
17 | }
--------------------------------------------------------------------------------