Skip to content

A simple starter template for HTML/SCSS/JS projects with local dev server

License

Notifications You must be signed in to change notification settings

neonflame4/gulp-starter

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

41 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Gulp Starter Package

This is a simple project template using gulp.

Features:

HTML

  • Panini HTML templating engine
  • YML/JSON data injection

CSS

  • SCSS/SASS Compiler
  • Minify/Concatenate

Javascript

  • Babel cross-browser compatibility module
  • JS Minify/Concatenate

Installation:

To install this set of tools, you must first install npm set up on your machine. You'll need to install the following dependencies:

npm install -g gulp-cli

Then, clone the project into a directory of your choice and install:

git clone https://github.com/neonflame4/gulp-starter.git

cd gulp-starter
npm install

You can edit the basic configurations by editing your gulpfile.js.

For image processing support, you will additionally need to install the graphicsmagick dependency:

Ubuntu/WSL:

sudo add-apt-repository ppa:dhor/myway
sudo apt-get update
sudo apt-get install graphicsmagick

Mac OS X (using Homebrew):

brew install graphicsmagick

Generating Layouts with Components

Layouts are generated using panini (https://get.foundation/sites/docs/panini.html).

Files saved into the src/templates/layouts folder can be used as site skeletons or shared design templates.

Files saved to the src/templates/pages folder make up the individual pages on your website. Each of these files will be utilize the default layout, unless otherwise defined.

Files saved to the src/templates/partials folder are shared components/snippets that you can pull into pages and layout HTML files.

To inject text or other data into your pages, panini is also able to parse data from YML or JSON files in your src/data folder. Further documentation on this feature is also included in the link above.

This sample project contains usage examples for each of these tools.

Running your project:

To run the project, simply type in gulp watch. Whenever you make changes while using the file watcher, the browser will automatically refresh the page to preview your changes.

About

A simple starter template for HTML/SCSS/JS projects with local dev server

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published