Gulp Starter Kit for Frontend Projects

This Gulp starter kit will help you do frontend tasks like:

• compiling Pug templates to HTML files
• compiling ES6+ code, so you can use next generation JavaScript
• compiling and autoprefixing your Sass files
• optimising your images, CSS and JavaScript files
• spinning up a web server
• reloading the browser automatically whenever a file is saved
• synchronising interaction across multiple devices/browsers

What's Included

• Gulp.js task runner
• Webpack module bundler
• Babel compiler
• ESLint linter with Airbnb's base config
• Pug template engine
• Sass with PostCSS' Autoprefixer

Install and Build

You can use either yarn or npm:

Clone this repo

git clone https://github.com/zsoltime/gulp-starter.git <your-project-name>
# Go into cloned repo
cd <your-project-name>

Install dependencies

yarn install
# OR
npm install

Start dev server with browser sync

It builds HTML, CSS, and the JavaScript bundle, starts a dev server and refreshes the browser on every saved changes.

yarn start
# OR
npm start

Build production bundle

It uglifies JS, minifies CSS and images, replaces references to non-optimized scripts and stylesheets in HTML files and copies everything necessary to the dist folder - ready to upload.

yarn build
# OR
npm run build

Preview production build

It's the same as the build task above but it also starts a server so you can check your work.

yarn preview
# OR
npm run preview