Awesome
Feeding Dan in 2015 (feeding.schlosser.io)
In 2015, I took a picture of everything I ate. These are those photos.
I built a custom image grid to make this site, called pig.js
(Progressive Image Grid). Check out that libary here.
Dan Eats is built using Gulp, Handlebars.js, and SCSS.
Setup
Install npm. Then, install gulp:
npm install -g gulp # May require `sudo`
Developing
npm install
gem install scss_lint
gulp serve
Gulp
An overview of Gulp commands available:
gulp build
Builds the site into the dist
directory. This includes:
- SCSS w/ linting, sourcemaps and autoprefixing
- JS linting and uglification
- Handlebars to HTML
gulp build:optimized
This is used for distributing an optimized version of the site (for deployment). It includes everything from gulp build
as well as:
- SCSS minification
- CSS / JS inline-sourcing
gulp watch
Watchs for changes in local files and rebuilds parts of the site as necessary, into the dist
directory.
gulp serve
Runs gulp watch
in the background, and serves the dist
directory at localhost:3000
with automatic reloading using Browsersync.
gulp deploy
For use by Dan only. Deploys to feeding.schlosser.io
, but won't do so without proper authentication.
Structure
├── Gulpfile.js # Controls Gulp, used for building the website
├── README.md # This file
├── data.yml # Metadata associated with the site.
├── dist/ # Gulp builds the static site into this directory
├── package.json # Dependencies
└── src/ # All source code
├── font/ # Font files
├── img/ # Images and SVGs
├── js/ # Javascript libraries and scripts
├── partials/ # Handlebars HTML partials that are included / extended
├── sass/ # Stylesheets
└── templates/ # Handlebars HTML files, one per page on the site.