Front-end Starter Kit

A simple starterkit built with Gulp on top of Express.js for front-end web development.

Features

• Sass support
• Performance optimization (Minify and concatenate JavaScript and CSS)
• Code Linting
• ES2015 via Babel 6.0
• JavaScript Unit testing
• Built-in HTTP Server
• Live Browser Reloading
• Cross-device Synchronization

Browser Support

• Chrome (latest 2)
• Edge (latest 2)
• Firefox (latest 2)
• Internet Explorer 9+
• Opera (latest 2)
• Safari (latest 2)

Quick start

To get you started you can simply clone the repository and install the dependencies:

$ git clone https://github.com/srakotonoely/front-end-starter-kit.git
$ cd front-end-starter-kit/ && yarn install

Update your Gulp CLI

npm rm -g gulp
npm install -g gulp-cli
gulp -v

Tasks

gulp: Runs the default task (dev) including the following ones :

• styles: Compile, minify and autoprefix all SCSS files to CSS.
• templates: Compile and render Pug compiling to HTML.
• scripts: Compile ES6 to ES5, minify and concatenate all scripts into a single file with babel.
• images: Copy and optimize all images from app to ./dist/.
• fonts: Copy all fonts from app to ./dist/.
• serve: Start a server at ./dist/ with all compiled files, inject files changes into browser.

gulp build: Builds project by running the following tasks:

• styles
• templates
• scripts
• images
• fonts

Use npm run to list all available tasks. You can run the tasks too using the npm run taskname or yarn taskname that is on the list.

Inspiration

This Starter Kit is inspired by Front-End Checklist and Web starter kit.

Contribute

Contributions, questions and comments are all welcome and encouraged. For code contributions to Front-End Starter Kit, please see Contribution guide before submitting a pull request.

If you have any comments or suggestions feel free to contact me on Linkedin!

License

The code is available under the MIT license.