Gulp Skeleton - CodelineRed

Demo page

Table of contents

• Included Third Party Code
• Install Guides
  • Install Production Build (Recommended)
  • Install Main/ Develop Build
  • Install with Docker (optional)
• Project Commands
• gulpfile-config.js
• Localization
• Links

Included

• jQuery 3
• Bootstrap 5
• Font Awesome 6
• Slick Carousel 1
• LazyLoad 19
• CSS User Agent 2
• Cookieconsent 3
• Fancyapps 5

Install Production Build (Recommended)

Required

• PHP >= 5.5

Open console on your OS and navigate to the place where you want to install the project.

With Composer

php composer create-project --ignore-platform-reqs --no-dev codelinered/gulp-skeleton gulp-skeleton "dev-production" && cd gulp-skeleton

With GIT

git clone https://github.com/CodelineRed/gulp-skeleton.git && cd gulp-skeleton && git checkout production

With ZIP

Unix

wget -O gs-prod.zip https://github.com/CodelineRed/gulp-skeleton/archive/production.zip && unzip gs-prod.zip && cd gulp-skeleton-production

Windows 10+

curl -L -o gs-prod.zip https://github.com/CodelineRed/gulp-skeleton/archive/production.zip && tar -xf gs-prod.zip && cd gulp-skeleton-production

If you need PHP, you have to go to Install with Docker.

Install Main/ Develop Build

Required

• Node.js >= 18.17
• npm npm i npm@latest -g
• gulp-cli npm i gulp-cli@latest -g

Open console on your OS and navigate to the place where you want to install the project.

With Composer

php composer create-project --ignore-platform-reqs codelinered/gulp-skeleton && cd gulp-skeleton && npm i && gulp build && gulp watch

With GIT

git clone https://github.com/CodelineRed/gulp-skeleton.git && cd gulp-skeleton && git checkout main && npm i && gulp build && gulp watch

With ZIP

Unix

wget -O gs-main.zip https://github.com/CodelineRed/gulp-skeleton/archive/main.zip && unzip gs-main.zip && cd gulp-skeleton-main && npm i && gulp build && gulp watch

Windows 10+

curl -L -o gs-main.zip https://github.com/CodelineRed/gulp-skeleton/archive/main.zip && tar -xf gs-main.zip && cd gulp-skeleton-main && npm i && gulp build && gulp watch

Open localhost:3000 for Website.

Install with Docker (optional)

Required

• Docker

Open console on your OS and navigate to the place where you want to install the project.

Unix

• Start Docker systemctl docker start
• Copy and run commands below

docker run --rm --interactive --tty --volume $PWD:/app composer create-project --ignore-platform-reqs --no-dev codelinered/gulp-skeleton gulp-skeleton "dev-production" && cd gulp-skeleton && docker-compose up -d && xdg-open http://localhost:7701

Windows 10+

• Start Docker Desktop "C:\Program Files\Docker\Docker Desktop.exe"
• Copy and run commands below

docker run --rm --interactive --tty --volume %cd%:/app composer create-project --ignore-platform-reqs --no-dev codelinered/gulp-skeleton gulp-skeleton "dev-production" && cd gulp-skeleton && docker-compose up -d && start http://localhost:7701

Open localhost:7701 for Website.

Project Commands

	Description
gulp	watch files and start BrowserSync (only available with Docker)
gulp build	executes following tasks: cleanUp, favicon, font, img, js, jsLint, scss, scssLint, svg
gulp lint	executes following tasks: jsLint, scssLint
gulp cleanUp	clean up public folder
gulp favicon	generate favicons
gulp font	copy font files
gulp img	copy and compress images
gulp js	uglify, minify and concat js files
gulp jsLint	checks js follows lint rules
gulp scss	compile, minify and concat scss files
gulp scssLint	checks scss follows lint rules
gulp thankYou	a small thank for you
gulp svg	copy and compress svg files
gulp watch	watch favicon, font, img, js, scss and svg files

gulpfile-config.js

	Description
browserSyncConfig	Required - Defines which config is used for BrowserSync (default: browserSyncDocker)
sourcePath	Required - Path to raw files (default: src/)
publicPath	Required - Path to transpiled files (default: public/)
systemPath	Optional - Alternative Path to transpiled files on CMS, ECS, PHP Framework, ... (default: path/to/system/)
env	Required - Environment dev, test or prod (default: prod)

Localization

• src/locale/

Links

• ESLint Rules
• Sass Lint Rules