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.
-
Clone the repository.
-
Use this command to install all dependencies for the project:
# Uses package.json "devDependencies" to install dependencies
npm install- Start
gulpby running:
npm start- Write code in the
src-folder.
dist- The converted files that are linked viaindex.html. You don't have to touch these filesjs- All convertedjs-files go herecss- All convertedcss-files go here
src- This is where your development-files are. There are the ones you work onjs- All unconvertedjs-filesscss- All unconvertedscss-files
Gulpfile.js- This config file must be in the root-folderindex.html- The index must be in the root-folderpackage.json- All the dependencies and config for the project
This repo has three different branches:
- master
- Standard with
gulp-sassandbrowser-syncthat handles live-reloading and convertingsassto prefixedcss
- Standard with
- babel
- Also has
gulp-babel-module to transform ES6-code to older code that is accepted in older browsers.
- Also has
- browserify
- Has
browserifyand helper utilities to be able to useimportandexportin the browser.
- Has