Gulp/TailwindCSS/SASS/Pug Boilerplate

Accelerate your frontend workflow with this robust boilerplate. Equipped with Gulp, PUG/HTML5, Sass, TailwindCSS, PostCSS, BrowserSync, Babel, and Docker, it's specifically designed for rapid and precise HTML implementation from Figma and Adobe Photoshop designs.

A lean and powerful, gulp-based boilerplate for better front-end coding with Gulp, Pug, HTMP, Babel, TailwindCSS and Sass

Core features

• Lightning-fast build process: Leveraging modern tools for optimal performance.
• Advanced @media mixins: Streamlining responsive design implementation.
• Intelligent Gulp task automation: Simplifying complex workflows.
• Seamless TailwindCSS and Sass integration: Providing powerful styling capabilities.
• Robust Babel support: Ensuring compatibility with modern JavaScript.
• Effortless BrowserSync integration: Enabling real-time development feedback.
• Docker containerization support: Facilitating consistent and portable builds.
• Flexible PUG/HTML templating: Enhancing code maintainability.
• Automated code formatting with Prettier: Maintaining consistent code style.
• Integrated mockup API: Accelerating prototyping and development.
• Automated favicon generation: Simplifying asset management.

Quickstart

1. Clone the project or download the file

   git clone https://github.com/baonguyenyam/gulp-tailwindcss-sass-pug-html-docker.git my-project
   

2. Go to project folder and run

   yarn install
   

3. Start dev server

   yarn dev
   

4. In browser open page with address http://localhost:5000/

Main tasks

• yarn dev - launches watchers and server
• yarn build - compile a project
• Run sh app.sh and follow the instructions

Config

In .env file

Plugins

• Swiper
• FancyBox

License

The MIT License (MIT)