⚡ Gulp Boilerplate

Gulp is a Task Runner that runs on Node. The "program" Gulp is installed via the command line through npm, the node package manager and is run on the runtime environment Node. There is no GUI, everything is controlled by a config file and commands via the command line interface.

Gulp is a tool for automating common and time consuming task that we deal with every day when we develop. This repo is a starter kit with an already created config and folder structure.

The master branch of this repo is able to automatically detect changes in your html-files and scss-files and updated your browser with these changes so you don't have to reload. This config will also automatically convert your scss-files to regular css-files so there is no need to use sass command in your ruby-command line (gulp-sass actually uses node-sass which is a port of the original ruby gem that we used earlier). The config will also autoprefix your css-files.

Instructions for the boilerplate

Clone the repository.
Use this command to install all dependencies for the project:

# Uses package.json "devDependencies" to install dependencies
npm install

Start gulp by running:

npm start

Write code in the src-folder.

Folder structure

dist - The converted files that are linked via index.html. You don't have to touch these files
- js - All converted js-files go here
- css - All converted css-files go here
src - This is where your development-files are. There are the ones you work on
- js - All unconverted js-files
- scss - All unconverted scss-files
Gulpfile.js - This config file must be in the root-folder
index.html - The index must be in the root-folder
package.json - All the dependencies and config for the project

Branches

This repo has three different branches:

master
- Standard with gulp-sass and browser-sync that handles live-reloading and converting sass to prefixed css
babel
- Also has gulp-babel-module to transform ES6-code to older code that is accepted in older browsers.
browserify
- Has browserify and helper utilities to be able to use import and export in the browser.

fend16 / gulp-boilerplate Goto Github PK