My startup environment for practice in frontend-development. Built with Gulp 4. Based on the OptimizedHTML 5.
This template helps to solve the following tasks:
- synchronised browser testing;
- building a project from sources (JS/Pug/SASS);
- code analysis with linters;
- image minification;
- deployment on a remote server.
- Clone template content into the current folder and remove unnecessary files with the following command:
git clone https://github.com/ilovesg/starter-template .; rm -rf trunk readme.md .git docsor download it manually. - Install dependencies:
npm i; - Run:
gulp.
Type: String; default: 'html,htm,txt,json,md,woff2'.
List of file extensions for watching & hard reload.
gulp: run default Gulp task (includesbuildScripts,buildStyles,buildImages,buildHtml,brsrSnc,startWatch);buildScripts,buildStyles,buildImages,buildHtml,buildAssets: build related assets;deploy: deploy project via rsync;build: build project.
Script sources are located in the /src/scripts directory. Modules should be placed in the /src/scripts/modules subdirectory and then imported inside the common.js file. Source scripts are also minified and placed in the /src/js/scripts.min.js file.
SASS sources are located in the /src/styles/ folder. Mixins should be placed in the /src/styles/_mixins subdirectory and then may be imported inside the desired file. Compiled and compressed styles will be placed in the /css/styles.min.css file.
Sources are located in the /src/pug folder. Layout templates should be placed in the root of this directory, while page/block templates should be placed in appropriate subdirectories.
All project images are located in the /src/images folder. Images from the /src/images/src subfolder will be compressed and placed into the /src/images/docs subfolder.
- Bootstrap Reboot — element-specific CSS changes.
- Bootstrap Breakpoints — breakpoints mixin (SCSS).
- Bootstrap Grid (optional) — grid mixin (SCSS).