Setup Gulp is a production-ready front-end build starter that automates the asset pipeline for Shopify theme development. It wires together Gulp 4, Sass/SCSS with Bourbon, Babel-transpiled TypeScript, image optimisation, and BrowserSync live reload so you can focus on writing UI code rather than configuring build tooling.Documentation Index
Fetch the complete documentation index at: https://mintlify.com/jpachecox/setup-gulp/llms.txt
Use this file to discover all available pages before exploring further.
Introduction
Understand what Setup Gulp does, its tech stack, and when to use it.
Quickstart
Clone the repo, install dependencies, and start the dev server in minutes.
Project Structure
Explore the
src/ directory layout and compiled output in assets/.Gulp Tasks
Browse every Gulp task — styles, scripts, images, fonts, watch, and build.
What’s included
SCSS → CSS
Sass compilation with Bourbon mixins, Bourbon Neat grid, autoprefixing, and minification.
TypeScript → JS
Babel-powered transpilation with uglification and source maps for components and sections.
Image optimisation
Lossless and lossy compression for PNG, JPEG, GIF, and SVG via gulp-imagemin.
Live reload
BrowserSync watches your source files and pushes CSS changes without a full page refresh.
Linting & formatting
ESLint, Stylelint, Prettier, and Husky pre-commit hooks keep code quality consistent.
Unit testing
Vitest with jsdom lets you test utility functions and SCSS file structure automatically.