All the tasks are done via Gulp. Webpack is just used for ES6 Import/Export as Gulp can't do it to my best of knowledge. Apart from ES6 Import/Export, Gulp was able to do all my other work that I wanted so I have mainly used Gulp. That being said, you can modify the webpack config to your preferences from webpack folder and use webpack specific plugins as you need.
For Live reloading, Browsersync has been used. For ES6 Transpilation, Babel has been used. For SourceMaps, Gulp & Webpack both have been used. For Icon Fonts, Font Awesome 5 has been used with Sass/CSS Workflow.
- Install Node
- Optionally, also install Yarn or use Npm that comes with Node pre-installed
- Install Gulp globally through
npm install -g gulp@next - Install Webpack globally through
npm install -g webpack - Fork this project
- Clone the forked project (Yours!)
cdto the cloned project- Install all packages with
npm installoryarn install
- Build the Project and Serve locally (for Production) -
npm startoryarn start. The Production port is8000. - Build the Project and Serve locally (for Development) -
npm run devoryarn run dev. The Development port is3000. - Exporting the Project to zip file -
npm run exportoryarn run export
Important Note: Don't run these npm scripts simultaneously.
- Tooling - Gulpfile Lives in
gulpfile.jsand Webpack config files live withinwebpackfolder. - Source Files - Lives in
public/srcfolder - Compiled Files - Lives in
public/distfolder. When you clone, you won't get them but as soon as you run those any of above usage tasks (start/build/export), thepublic/distwill be created. - Exported Project - The exported project is imported from
publicfolder and gets exported aswebsite.zipto project root
This is the result of performance tests (97%) within Lighthouse for Production Mode. It's Not excellent (yet!), but still quite good actually.
For Development mode it's 96% respectively.