https://github.com/shakyshane/jekyll-gulp-sass-browser-sync

A starter project including full setup for Jekyll, GulpJS, SASS & BrowserSync
https://github.com/shakyshane/jekyll-gulp-sass-browser-sync

Last synced: 6 days ago
JSON representation

A starter project including full setup for Jekyll, GulpJS, SASS & BrowserSync

• Host: GitHub
• URL: https://github.com/shakyshane/jekyll-gulp-sass-browser-sync
• Owner: shakyShane
• Created: 2014-04-20T09:22:52.000Z (over 10 years ago)
• Default Branch: master
• Last Pushed: 2019-08-22T12:52:29.000Z (over 5 years ago)
• Last Synced: 2024-12-21T10:15:04.342Z (13 days ago)
• Language: CSS
• Size: 57.6 KB
• Stars: 727
• Watchers: 44
• Forks: 169
• Open Issues: 38
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
jekyll-gulp-sass-browser-sync

=============================

A starter project including full setup for Jekyll, GulpJS, SASS, AutoPrefixer & BrowserSync

Here's a 1.5min [screencast](http://quick.as/pvrslgx) showing what you get.

And here's a GIF showing the CSS injecting.

![GIF](http://f.cl.ly/items/373y2E0e0i2p0E2O131g/test-gif.gif)

## System Preparation

To use this starter project, you'll need the following things installed on your machine.

1. [Jekyll](http://jekyllrb.com/) - `$ gem install jekyll`

2. [NodeJS](http://nodejs.org) - use the installer.

3. [GulpJS](https://github.com/gulpjs/gulp) - `$ npm install -g gulp` (mac users may need sudo)

## Local Installation

1. Clone this repo, or download it into a directory of your choice.

2. Inside the directory, run `npm install`.

## Usage

**development mode**

This will give you file watching, browser synchronisation, auto-rebuild, CSS injecting etc etc.

```shell

$ gulp

```

**jekyll**

As this is just a Jekyll project, you can use any of the commands listed in their [docs](http://jekyllrb.com/docs/usage/)

## Deploy with Gulp

You can easily deploy your site build to a gh-pages branch. First, follow the instructions at [gulp-gh-pages](https://github.com/rowoot/gulp-gh-pages) to get your branch prepared for the deployment and to install the module. Then, in `gulpfile.js` you'll want to include something like the code below. `gulp.src()` needs to be the path to your final site folder, which by default will be `_site`. If you change the `destination` in your `_config.yml` file, be sure to reflect that in your gulpfile.

```javascript

var deploy = require("gulp-gh-pages");

gulp.task("deploy", ["jekyll-build"], function () {

    return gulp.src("./_site/**/*")

        .pipe(deploy());

});

```