A project starter kit for a Jekyll site using Gulp, Node-Sass, and BrowserSync.
Streamline your workflow with super-fast compiling, Sass in the web inspector, minified + autoprefixed CSS output, and live auto-updating everything across multiple devices — all from a single terminal command!
##To Get Started First install Node JS and NPM. Homebrew makes this very easy, just type the following commands and you'll be good to go.
brew update
brew doctor
brew install node
Clone the starter kit repository:
git clone git@github.com:patrickgrady/jekyll-gulp-sass-starter.git
Navigate to the project folder:
cd into/the/repository
Now install the following npm packages locally:
Node-Sass: Agnostic Sass!
npm install node-sass
BrowserSync: Auto-updating multi-device magic.
npm install browser-sync
Gulp: A super flexible and customizable taskrunner. If you've never used Gulp before, install it globally.
npm install gulp -g
Otherwise,
npm install gulp
gulp-autoprefixer: Auto-prefixes CSS so you don't have to.
npm install gulp-autoprefixer
gulp-minify-css: Save those those precious kbs and we save ourselves.
npm install gulp-minify-css
gulp-rename: Pretty self-explanatory.
npm install gulp-rename
gulp-sass: So Gulp can swallow Node-flavored Sass.
npm install gulp-sass
gulp-sourcemaps: Inspect Element: See Sass.
npm install gulp-sourcemaps
####Sweet, Sweet Automation A single word on the command line starts the build system and watches for changes.
gulp