Getting a fully functional Gulp build pipeline running for your Shopify theme takes less than five minutes — just clone, install, and start two commands. All you need is a terminal, Node.js, and Yarn. Once the dependencies are installed, two commands —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.
yarn serve and yarn start — spin up BrowserSync and the file watcher simultaneously, giving you instant feedback as you work on styles, scripts, images, and fonts.
Prerequisites
Before you begin, make sure the following tools are available on your machine:- Node.js — v18 or later is recommended. Download from nodejs.org.
- Yarn — v4.1.1 (defined in
packageManagerinpackage.json). Enable it via Corepack withcorepack enable.
Setup Steps
Clone the repository
Clone Setup Gulp to your local machine using either SSH (recommended for contributors) or HTTPS.
Navigate into the project directory
Move into the newly cloned folder before running any further commands.
Install dependencies
Install all Node.js dependencies declared in
package.json. Yarn will resolve and cache every package, including Gulp, Sass, Babel, BrowserSync, and Vitest.Start the BrowserSync dev server
Launch BrowserSync, which serves the project from the repository root and opens your browser at
http://localhost:3000. BrowserSync watches index.html for changes and triggers a full page reload automatically.Available Scripts
Every script inpackage.json maps to a specific Gulp task or CLI command. Use these throughout your development, testing, and CI workflows.
yarn start — watch source files
yarn start — watch source files
Runs
gulp watch. Monitors all source paths under src/ (SCSS, TypeScript, images, and fonts) and re-runs the appropriate compilation task on every change. BrowserSync streams CSS updates without a full reload.yarn serve — start the BrowserSync server
yarn serve — start the BrowserSync server
Runs
gulp serve. Starts a BrowserSync static server rooted at the project directory and opens http://localhost:3000 in your default browser. Run this alongside yarn start in a separate terminal.yarn build — compile all assets
yarn build — compile all assets
Runs
gulp build, which executes all compilation tasks in parallel: cleanAssets, fonts, images, jsComponents, jsSections, js, sassComponents, sassSections, sass, and minifyCss. Use this for a full, fresh build before deploying your theme.yarn clean — delete compiled output
yarn clean — delete compiled output
Runs
gulp cleanAssets. Deletes all files inside assets/ and src/css/ while leaving the empty directories in place. Useful when you want a clean slate before a fresh build.yarn test — run unit tests
yarn test — run unit tests
Runs Vitest in watch mode. Tests are discovered from
__tests__/ and any *.test.ts files. The jsdom environment and global APIs (describe, it, expect) are available without any imports.yarn test:ui — open the Vitest browser UI
yarn test:ui — open the Vitest browser UI
Starts the Vitest interactive browser UI at
http://localhost:51204 (or the next available port), where you can run, filter, and inspect individual test results visually.yarn coverage — generate test coverage report
yarn coverage — generate test coverage report
Runs
vitest run --coverage using the V8 provider. Outputs a text summary to the terminal and generates detailed JSON and HTML reports in the coverage/ directory. The gulpfile.js is excluded from coverage.yarn lint — lint and auto-fix TypeScript
yarn lint — lint and auto-fix TypeScript
Runs ESLint against all
*.ts files under src/ and automatically applies safe fixes. Respects the .eslintignore file. Run this before committing to catch type and style issues early.yarn lint:check — lint TypeScript without fixing
yarn lint:check — lint TypeScript without fixing
Runs ESLint in check-only mode (no auto-fix). Useful in CI pipelines where you want linting to fail fast without modifying files.
yarn format — format all files with Prettier
yarn format — format all files with Prettier
Runs
prettier --write . to auto-format every supported file in the project (JS, TS, SCSS, JSON, Markdown, etc.). Apply this before committing to keep diffs clean.yarn prettier — check formatting without writing
yarn prettier — check formatting without writing
Runs Prettier in check mode across all JS, JSX, TS, TSX, and SCSS files. Exits with a non-zero code if any file would be reformatted, making it suitable for CI checks.
yarn prettier:fix — fix formatting for specific file types
yarn prettier:fix — fix formatting for specific file types
Runs
prettier --write targeting JS, JSX, TS, TSX, and SCSS files. Similar to yarn format but scoped to those specific extensions.yarn reset — full environment reset
yarn reset — full environment reset
The nuclear option. Removes
package-lock.json, node_modules/, build/, and src/css/, then runs gulp cleanAssets to wipe assets/. After running this, re-install dependencies with yarn and rebuild with yarn build.