I used this front-end boiler plate from coder-coder.com. All I did was tweak the code a bit by adding Babel so vanilla JS could be compiled as well and separated out the tasks a bit. Please visit her site and show her some love by reading her tutorials!
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.
- Clone or download this Git repo onto your computer.
- Install Node.js if you don't have it yet.
- Run
npm install
- Run
gulp
to run the default Gulp task
In this proejct, 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