themihel/frontend-starter-kit

Lightweight, minimalistic starter kit for frontend/website projects based on the gulp task-runner.

frontend-starter-kit

🚨 This repository is deprecated 🚨 It basically still works but there are a lot of new frontend tools and even newer versions regarding the build steps (e.g. gulp).

Lightweight starter kit for frontend/website projects.

Features

• Lightweight / no boilerplate code
• SASS/SCSS support
• Minified / concatenated Javascript and CSS
• Linted Javascript with ESLint
• Basic editorconfig and JavascriptCodeStyle config
• Bower support (see gulp tasks)
• Up to date dev-dependencies thanks to @greenkeeperio
• Synchronised browser testing by BrowserSync

Get started

Download

git clone https://github.com/themihel/frontend-starter-kit.git
cd frontend-starter-kit
npm install

Usage

Developing

Just run gulp serve and start coding 🎉

Your browser will automatically reload on each saved action!

Gulp-tasks

• gulp styles : Compile/concat sass files (minify for dist)
• gulp scripts : Concat js files ((minify for dist))
• gulp lint : Lint js files with ESLint
• gulp images : Optimize images from images folder
• gulp html : Copy and minify html files into dist folder
• gulp bower : Copy bower files into dist folder
• gulp clean : Remove tmp and dist folder
• gulp dist : Compiles/concats/lint/minifies code for production/upload
• gulp serve : Serve files for local testing (code unminified)
• gulp serve:dist : Serve files from dist folder for final testing
• gulp watch : Compiles sass / Lint and concat js files (see: styles, lint, scripts)

Note: gulp watch, gulp serve and gulp serve:dist automatically run on code changes

Build / Upload

Run gulp dist and upload all files from dist directory to your server. That's it 😊

Recommended file structure

frontend-starter-kit
│   .editorconfig
│   .eslintrc
│   .gitignore
│   .jscsrc
│   gulpfile.js
│   LICENSE
│   package.json
│   README.md
│
└───app
    │   index.html
    │   ...
    │
    ├───scripts
    │   │   app.js
    │   │   ...
    │
    ├───images
    │   ...
    │
    └───styles
        │
        │   app.scss
        │
        ├───core
        │   │   _core.scss
        │   │   _vars.scss
        │   │   ...
        │
        ├───mixins
        │   │   _normalizeBoxSize.scss
        │   │   ...
        │
        ├───modules
        │   │   ...
        │
        └───views
            │   ...