Awesome

Front-end Boilerplate using Sass and Gulp 4

Using a set of boilerplate files when you're starting a website project can be a huge time-saver. Instead of having to start from scratch or copy and paste from previous projects, you can get up and running in just a minute or two.

I wanted to share my own boilerplate that I use for simple front-end websites that use HTML, SCSS, and JavaScript. And I'm using Gulp 4 to compile, prefix, and minify my files.

I also wrote a rather detailed walkthrough on how to get up and running with Gulp 4, as well as migration tips from Gulp 3. You can read that on my blog here.

Quickstart guide

• Clone or download this Git repo onto your computer.
• Install Node.js if you don't have it yet.
• Install gulp if you don't have it yet: npm install gulp-cli -g or yarn global add gulp-cli
• Run npm install
• Run gulp to run the default Gulp task

In this project, Gulp is configured to run the following functions:

• Compile the SCSS files to CSS
• Autoprefix and minify the CSS file
• Concatenate the JS files
• Uglify the JS files
• Move final CSS and JS files to the /dist folder