Gulp-dev-sample

This is a simple template for your web application, specifically designed for use with Gulp task manager.

Navigation

• Install
• Description
  • Directories and files
  • Dependencies
• Usage

Install

Installation options:

• Download ZIP archive of this repository.
  1. Click on green button "Code".
  2. Choose "Download ZIP".
  3. Unpack downloaded ZIP archive in your project folder.
• Use git clone https://github.com/LimonkaTM/gulp-dev-sample.git.

Description

Directories and files

git/ -- contains all templates files for GitHub repository (LICENSE, README.md, .gitignore).
   git/LICENSE -- MIT license template file for GitHub repository.
   git/README.md -- README.md template file for GitHub repository.
   git/.gitignore -- .gitignore template file with commonly used ignore rules.

gulpfile.js/ -- Gulp directory.
   gulpfile.js/config/ -- contains configuration files for Gulp.
     gulpfile.js/config/app.js -- configuration of used packages in the build.
     gulpfile.js/config/path.js -- all used paths.
   gulpfile.js/task/ -- contains all task files.
     gulpfile.js/task/clear.js -- contains a task that is used to clean up the destination directory (public/) that contains the files after the build.
     gulpfile.js/task/css.js -- contains a task that is used to process CSS files.
     gulpfile.js/task/font.js -- contains a task that is used to process all font files.
     gulpfile.js/task/html.js -- contains a task that is used to process HTML files.
     gulpfile.js/task/img.js -- contains a task that is used to process all images.
     gulpfile.js/task/js.js -- contains a task that is used to process JS files.
     gulpfile.js/task/pug.js -- contains a task that is used to process PUG files.
     gulpfile.js/task/scss.js -- contains a task that is used to process SCSS/SASS files.
   gulpfile.js/task/index.js -- file which collects all task files.

src/ -- contains all development files and directories.
   src/css/ -- contains all CSS directories.
     src/css/base -- contains a base CSS styles.
       src/css/base/base.css -- styles for standart elements.
       src/css/base/fonts.css -- file for @font-face.
       src/css/base/helpers.css -- helpful styled classes.
       src/css/base/typography.css -- typography styles.
       src/css/base/vars.css -- contains all CSS variables.
     src/css/components -- contains CSS styles of smaller components (buttons, inputs and etc.).
       src/css/components/button.css -- styles for button component.
     src/css/layout -- contains CSS styles everything that takes part in laying out the site or application.
       src/css/layout/poligon-row__block.css -- styles for layout.
       src/css/layout/poligon.css -- styles for layout.
     src/css/pages -- contains page-specific CSS styles.
       src/css/pages/home.css -- styles for home page.
     src/css/themes -- contains CSS styles from different themes your site or application.
       src/css/themes/default.css -- styles for default theme.
     src/css/vendors -- contains CSS styles from different external libraries and frameworks.
       src/css/vendors/normalize.css -- file to normalize styles in all browsers.
     src/css/vendors-extensions -- contains CSS styles for changing different styles of external libraries and frameworks.
       src/css/vendors-extensions/normalize.css -- styles for changing styles of external normalize.css file.
     src/css/main.css -- main CSS file.
   src/font/ -- contains all downloaded fonts.
   src/html/ -- contains HTML files and cataloges.
     src/html/components -- contains component markup files.
       src/html/components/button.html -- button component markup file.
     src/html/layout -- contains layout markup files.
       src/html/layout/header.html -- header layout markup file.
       src/html/layout/footer.html -- footer layout markup file.
     src/html/pages -- contains markup all pages.
       src/html/pages/about_us.html -- about us page markup file.
     src/html/index.html -- main markup file.
   src/img/ -- contains all images.
     src/img/favicon -- contains all favicons and everything related to them.
       src/img/favicon/favicon.ico -- empty .ico file.
     src/img/Screenshot_1.png -- image example.
   src/js/ -- contains all JS files.
     src/js/modules -- contains all JS modules.
     src/js/main.js -- main JS file.
   src/pug/ -- contains all PUG files.
     src/pug/components -- contains component PUG markup files.
       src/pug/components/button.pug -- button component PUG markup file.
     src/pug/layout -- contains layout PUG markup files.
       src/pug/layout/header.pug -- header layout PUG markup file.
       src/pug/layout/main.pug -- main layout PUG markup file.
       src/pug/layout/footer.pug -- footer PUG markup file.
     src/pug/pages -- contains PUG markup all pages.
       src/pug/pages/about_us.pug -- bout us page PUG markup file.
     src/pug/index.pug -- main PUG file.
   src/scss/ -- contains all SCSS/SASS files.
     src/sass/abstracts -- contains all SASS/SCSS tiiks abd gekoers ysed across the project (gloval variable, function, mixin and placeholder)
       src/pug/pages/_functions.scss -- file contains all SCSS/SASS functions.
       src/pug/pages/_mixins.scss -- file contains all SCSS/SASS mixins.
       src/pug/pages/_placeholders.scss -- file contains all SCSS/SASS placeholders.
       src/pug/pages/_variables.scss -- file contains all SCSS/SASS variables.
     src/sass/base -- contains a base SCSS/SASS styles.
       src/sass/base/_animations.scss -- file contains all SCSS/SASS animations styles.
       src/sass/base/_base.scss -- contains SCSS/SASS styles for standart elements.
       src/sass/base/_fonts.scss -- file for @font-fase.
       src/sass/base/_helpers.scss -- helpful styled classes.
       src/sass/base/_typography.scss -- file contains all SCSS/SASS typography styles.
     src/sass/components -- contains SCSS/SASS styles of smaller components (buttons, inputs and etc.).
       src/sass/components/_button.scss -- file contains all SCSS/SASS styles related to the button component.
       src/sass/components/_carousel.scss -- file contains all SCSS/SASS styles related to the carousel component.
       src/sass/components/_media.scss -- file contains all SCSS/SASS styles related to the media component.
       src/sass/components/_thumbnails.scss -- file contains all SCSS/SASS styles related to the thumbnails component.
     src/sass/layout -- contains SCSS/SASS styles everything that takes part in laying out the site or application.
       src/sass/layout/_header.scss -- file contains all SCSS/SASS styles related to the header layout.
       src/sass/layout/_forms.scss -- file contains all SCSS/SASS styles related to the form layout.
       src/sass/layout/_sidebar.scss -- file contains all SCSS/SASS styles related to the sidebar layout.
       src/sass/layout/_footer.scss -- file contains all SCSS/SASS styles related to the footer layout.
     src/sass/pages -- contains page-specific SCSS/SASS styles.
       src/sass/page/_home.scss -- file contains all SCSS/SASS styles related to the home page.
     src/sass/themes -- contains SCSS/SASS styles from different themes your site or application.
       src/sass/themes/_default.scss -- file contains all SCSS/SASS styles related to the default theme.
     src/sass/vendors -- contains SCSS/SASS styles from different external libraries and frameworks.
       src/sass/vendors/_normalize.scss -- file contains all SCSS/SASS styles related to normalize elements.
     src/sass/vendors-extensions -- contains SCSS/SASS styles for changing different styles of external libraries and frameworks.
       src/sass/vendors-extensions/_normalize.scss -- file contains all SCSS/SASS styles for changing standard normalize file.
     src/scss/main.scss -- main SCSS/SASS file.

package.json -- package.json file with all dependencies for Gulp

Dependencies

[email protected]
├── @babel/[email protected]
├── @babel/[email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
└── [email protected]

Usage

Running one of these scripts will create a "public" folder that will contain all of your project's production or development files:

Script	Description
npm run sass	helper script
npm run gulp	helper script
npm run start	for development
npm run build	for production