Find file History
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
..
Failed to load latest commit information.
app
desc.md
gulpfile.js
package.json
readme.md

readme.md

#Browsersync - Gulp & SASS

Installation/Usage:

To try this example, follow these 4 simple steps.

Step 1: Clone this entire repo

$ git clone https://github.com/Browsersync/recipes.git bs-recipes

Step 2: Move into the directory containing this example

$ cd bs-recipes/recipes/gulp.sass

Step 3: Install dependencies

$ npm install

Step 4: Run the example

$ npm start

Additional Info:

This example highlights both the stream support for injecting CSS, as well as the support for calling reload directly following html changes.

Preview of gulpfile.js:

var gulp        = require('gulp');
var browserSync = require('browser-sync').create();
var sass        = require('gulp-sass');
var reload      = browserSync.reload;

var src = {
    scss: 'app/scss/*.scss',
    css:  'app/css',
    html: 'app/*.html'
};

// Static Server + watching scss/html files
gulp.task('serve', ['sass'], function() {

    browserSync.init({
        server: "./app"
    });

    gulp.watch(src.scss, ['sass']);
    gulp.watch(src.html).on('change', reload);
});

// Compile sass into CSS
gulp.task('sass', function() {
    return gulp.src(src.scss)
        .pipe(sass().on('error', sass.logError))
        .pipe(gulp.dest(src.css))
        .pipe(reload({stream: true}));
});

gulp.task('default', ['serve']);