Lordpluha/DevGulp

Creating gulpfile strater-project, based on newest stable trends

DevGulp Project

created by @Lordpluha:wink:

Main targets of a project

Realization gulp-building and processing based on new modern tendation of front-end and back-end dev.

Install Guide

1. Install Node.js and git on your computer.
2. Open your terminal in directory which you want
3. Enter this line git clone https://github.com/Lordpluha/DevGulp.git
4. Rename your project in package.json and project dir name
5. npm i to install all project depencies
6. npm start / gulp

Have a good work)

Structure

Show

 _________
|         |
| DevGulp |
|_________|
    |
    |   .eslintrc
    |   .gitattributes
    |   .gitignore
    |   .htaccess
    |   .stylelintrc.json
    |   Apache_2.4-PHP_8.0+Nginx_1.21_vhosta.conf
    |   CONTRIBUTING.md
    |   gmail_ico.png
    |   inst_ico.png
    |   LICENSE
    |   package-lock.json
    |   package.json
    |   postcss.config.js
    |   README.md
    |   SECURITY.md
    |   structure.txt
    |
    +---.github
    |   \---workflows
    |           codeql-analysis.yml
    |
    +---certificates
    |       localhost-rootCA.crt
    |       localhost-rootCA.key
    |       localhost-server.crt
    |       localhost-server.key
    |       rootCA.crt
    |       rootCA.key
    |       server.crt
    |       server.key
    |
    +---gulpfile.js
    |   |   file_for_uploading_fonts_to_scss.py
    |   |   index.js
    |   |
    |   \---tasks
    |       |   build.js
    |       |   clean.js
    |       |   CreatePage.js
    |       |   FileWatcher.js
    |       |   github.js
    |       |   images.js
    |       |   index.js
    |       |   lighthouse.js
    |       |   scripts.js
    |       |   serve.js
    |       |   styles.js
    |       |
    |       +---configs
    |       |   +---index.js
    |       |   |       gulp-htmlhint.config.js
    |       |   |       gulp-htmlmin.config.js
    |       |   |
    |       |   \---styles.js
    |       |           autoprefixer.config.js
    |       |           cssnano.config.js
    |       |           doiuse.config.js
    |       |           gulp-clean-css.config.js
    |       |           postcss-browser-reporter.config.js
    |       |           postcss-sorting.config.js
    |       |           stylelint.config.js
    |       |
    |       \---vars
    |               pages_list.json
    |               styles.vars.js
    |
    \---src
        \---main
            +---html
            |   |   index.html
            |   |   index.min.html
            |   |   index.src.html
            |   |
            |   \---blocks
            |           article.html
            |           aside.html
            |           footer.html
            |           header.html
            |           nav.html
            |
            +---img
            |   +---article
            |   +---aside
            |   +---footer
            |   +---header
            |   \---nav
            +---js
            |   +---plugins
            |   |   \---HTML5Shiv
            |   |           html5shiv-master.zip
            |   |           html5shiv-printshiv.min.js
            |   |           html5shiv.min.js
            |   |
            |   \---scripts
            |           MYbeauty_fx.js
            |           scripts.js
            |           scripts.js.min.map
            |           scripts.min.js
            |
            +---php
            |   |   index.min.php
            |   |   index.php
            |   |
            |   \---blocks
            |       |   article.php
            |       |   aside.php
            |       |   footer.php
            |       |   header.php
            |       |   nav.php
            |       |
            |       \---templates
            \---styles
                +---css.dist
                |       styles.css
                |       styles.css.map
                |       styles.min.css
                |
                +---css.src
                |       styles.scss
                |       _article.scss
                |       _aside.scss
                |       _fonts.scss
                |       _footer.scss
                |       _header.scss
                |       _media.scss
                |       _mixins.scss
                |       _nav.scss
                |       _preloader.scss
                |       _zer0.scss
                |
                \---fonts
                    |   Roboto.zip
                    |
                    \---Roboto
                            LICENSE.txt
                            Roboto-Black.ttf
                            Roboto-BlackItalic.ttf
                            Roboto-Bold.ttf
                            Roboto-BoldItalic.ttf
                            Roboto-Italic.ttf
                            Roboto-Light.ttf
                            Roboto-LightItalic.ttf
                            Roboto-Medium.ttf
                            Roboto-MediumItalic.ttf
                            Roboto-Regular.ttf
                            Roboto-Thin.ttf
                            Roboto-ThinItalic.ttf

Tasks

Function name	Description	File
index	processing html calling reload.	tasks/index.js
php	processing php, calling reload.	tasks/index.js
styles	processing and modificating scss -> css	tasks/styles.js
js	processing javascript, calling reload.	tasks/scripts.js
images	processing images, calling reload.	tasks/images.js
NewPage	create new page 'main'	tasks/CreatePage.js
build	build project from src/ to dist/ (copy .min)	tasks/build.js
default	initializate standart processing and serving files on localhost	index.js
test	starting auditing of project	index.js

Plugins

Fundamental elements

• gulp@4.0.2
• gulp-cli@2.3.0
• npm@8.5.1

Files system

• debug@4.3.3
• del@6.0.0
• fs@0.0.1-security
• gulp-rename@2.0.0

HTML/PHP

• gulp-file-include@2.3.0
• gulp-html-bem-validator@1.0.5
• gulp-htmlhint@4.0.1
• gulp-htmlmin@5.0.1

Styles proceeding

• autoprefixer@10.4.2

• cssnano@5.0.15

• cssnano-preset-advanced@5.1.10

• sass@1.49.8

• gulp-sass@5.1.0

• gulp-clean-css@4.3.0

• gulp-eslint@6.0.0

• gulp-postcss@9.0.1

• postcss@8.4.5

• postcss-browser-reporter@0.6.0

• postcss-cli@9.1.0

• postcss-combine-duplicated-selectors@10.0.3

• postcss-fixes@3.0.0

• postcss-pow@1.0.1

• postcss-pxtorem@6.0.0

• postcss-scss@4.0.3

• postcss-sorting@7.0.1

• postcss-sqrt@1.0.1

• postcss-unopacity@2.0.0

• postcss-vwh@1.0.0

• stylelint@14.5.1

• stylelint-config-standard@25.0.0

• stylelint-scss@4.1.0

• sugarss@4.0.1

• doiuse@4.4.1

• webp-in-css@0.7.0

Images

• gulp-imagemin@7.1.0
• gulp-webp@4.0.1
• imagemin-pngquant@9.0.2

Javascript

• gulp-jshint@2.1.0
• gulp-complexity@0.3.2
• gulp-uglify-es@3.0.0
• jshint@2.13.4
• jshint-stylish@2.2.1
• nanoid@3.3.1
• gulp-babel@8.0.0

Serving

• browser-sync@2.27.5

Tools

• gulp-plumber@1.2.1
• gulp-concat@2.6.1
• gulp-sourcemaps@3.0.0

Future opportunities

• gulp-changed и gulp-newer
• tmi
• gulp-duration
• husky
• pug
• bower
• psi
• ngrok
• gulp-plato

Contact me)

https://github.com/Lordpluha