This is a simple template for your web application, specifically designed for use with Gulp task manager.
Installation options:
- Download ZIP archive of this repository.
- Click on green button "Code".
- Choose "Download ZIP".
- Unpack downloaded ZIP archive in your project folder.
- Use
git clone https://github.com/LimonkaTM/gulp-dev-sample.git.
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
Gulp-dev-sample@1.0.0
├── @babel/core@7.18.9
├── @babel/preset-env@7.18.9
├── browser-sync@2.27.10
├── del@6.1.1
├── gulp-autoprefixer@8.0.0
├── gulp-babel@8.0.0
├── gulp-concat@2.6.1
├── gulp-cssimport@7.0.0
├── gulp-csso@4.0.1
├── gulp-file-include@2.3.0
├── gulp-fonter@0.3.0
├── gulp-group-css-media-queries@1.2.2
├── gulp-htmlmin@5.0.1
├── gulp-if@3.0.0
├── gulp-imagemin@7.1.0
├── gulp-newer@1.4.0
├── gulp-notify@4.0.0
├── gulp-plumber@1.2.1
├── gulp-pug@5.0.0
├── gulp-rename@2.0.0
├── gulp-sass@5.1.0
├── gulp-shorthand@1.1.0
├── gulp-size@4.0.1
├── gulp-sourcemaps@3.0.0
├── gulp-ttf2woff2@4.0.1
├── gulp-webp-css@1.1.0
├── gulp-webp-html@1.0.2
├── gulp-webp@4.0.1
├── gulp@4.0.2
├── sass@1.54.0
├── webpack-stream@7.0.0
└── webpack@5.73.0
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 |