Gulp Starter

Gulp Starter is a Gulp-based boilerplate for building static HTML sites with Pug templates, SCSS styles, and Webpack-bundled JavaScript, complete with SVG sprite generation and a live-reload development server. The repository is described as a "gulp starter with pug/scss/webpack/svg sprites and dashboard for html pages" and runs on Node.js, using npm or yarn for dependency management.

What is Gulp Starter?

Gulp Starter is a preconfigured Gulp workflow that takes source files from a ./src folder and outputs a production-ready ./build folder. It provides a default gulp task that performs an initial build, watches for file changes, and serves the site with BrowserSync live reload, while the gulp build task produces an optimized production build. The starter includes separate Gulp task files in ./gulp/tasks, with each task running independently or with a :watch suffix for continuous rebuilding.

Key Features

• Task-based build pipeline — Includes Gulp tasks for sass, webpack, copy, pug, svgo, iconfont, sprite:svg, sprite:png, server, clean, and list-pages, each runnable via gulp [task_name].
• Pug template compilation — Compiles Pug templates with support for alternate engines such as Jade, Nunjucks, and Swig, though only one engine is used per project.
• SCSS with PostCSS — Compiles .sass/.scss to .css, integrating PostCSS with autoprefixer and the Lost grid; additional PostCSS plugins can be added as needed.
• Webpack JavaScript bundling — Bundles JavaScript sources into a single file with production minification when built in production mode.
• SVG toolchain — Optimizes SVGs with svgo, generates SVG symbol sprites, compiles icon fonts from SVG sources, and creates PNG sprites.
• BrowserSync dev server — Runs a live-reload server with flags for --open (open browser) and --tunnel (share via localtunnel.me).
• npm scripts — Provides npm run start (same as gulp default), npm run build (same as gulp build), npm run ghpages (push ./build to a gh-pages branch), plus lint and lint-fix for ESLint.

Who is it for?

• Front-end developers who want a ready-made Gulp build pipeline for static sites without writing Gulp tasks from scratch.
• Designers who need to generate SVG sprites, icon fonts, and PNG sprites from raw SVG assets for use in web pages.
• Agencies and teams building multi-page HTML sites who want a consistent workflow with live reload and easy preview deployment via gh-pages.

Use cases

• Rapid prototyping: Scaffold a new static site with Pug and SCSS and get a local server with live reload immediately.
• Icon management: Place SVG files in the source folder and generate icon fonts, SVG symbol sprites, or PNG sprites using dedicated Gulp tasks.
• Client previews: Run npm run ghpages to push only the ./build folder to a gh-pages branch and share a public preview URL.
• Project dashboards: Use the list-pages task to generate an index file with links to all project pages.

How does it work?

Clone the repository, then run npm install or yarn to install dependencies. Run gulp to start the default task, which builds the project, watches sources, and serves the site with live reload; alternatively, run gulp build for a production build. For individual tasks, type gulp [task_name], and most tasks can be run continuously with gulp [task_name]:watch. Use gulp --open to auto-open the browser or gulp --tunnel [name] to expose the local site at [name].localtunnel.me.

FAQ

What template engines does Gulp Starter support?

Gulp Starter primarily uses Pug for HTML templating, but the Gulp setup also lists Jade, Nunjucks, and Swig as alternatives. Only one template engine is used per project, and the available tasks are defined as separate files in ./gulp/tasks.

How do I get a live preview in the browser?

Run the default gulp task, which starts a BrowserSync server with live reload. Add the --open flag to automatically open the preview in your browser, or use --tunnel [name] to share the site publicly via localtunnel.me.

What is the difference between gulp and gulp build?

The default gulp task builds the project in development mode, watches files for changes, and runs a live-reload server. gulp build (or npm run build) creates a production-ready build with code optimizations such as minification, and it is the equivalent of running gulp build:dev followed by production settings.

Can I use npm scripts with this starter?

Yes, the repository provides npm scripts: npm run start for the default development task, npm run build for production builds, npm run ghpages to push the ./build folder to a gh-pages branch, and npm run lint / npm run lint-fix for ESLint checks.

Does the starter work with yarn?

Yes, the installation step explicitly supports both npm install and yarn, so either package manager can be used.