Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Harp with BrowserSync! Woo!
var gulp = require('gulp');
var browserSync = require('browser-sync');
var reload = browserSync.reload;
var harp = require('harp');
/**
* Serve the Harp Site from the src directory
*/
gulp.task('serve', function () {
harp.server(__dirname + '/src', {
port: 9000
}, function () {
browserSync({
proxy: "localhost:9000",
open: false,
/* Hide the notification. It gets annoying */
notify: {
styles: ['opacity: 0', 'position: absolute']
}
});
/**
* Watch for scss changes, tell BrowserSync to refresh main.css
*/
gulp.watch("src/**/*.scss", function () {
reload("main.css", {stream: true});
});
/**
* Watch for all other changes, reload the whole page
*/
gulp.watch(["src/**/*.jade", "src/**/*.json"], function () {
reload();
});
})
});
/**
* Default task, running just `gulp` will compile the sass,
* compile the harp site, launch BrowserSync & watch files.
*/
gulp.task('default', ['serve']);
@superhighfives

This comment has been minimized.

Copy link

commented Aug 17, 2014

This is awesome.

@binarytrance

This comment has been minimized.

Copy link

commented Feb 14, 2017

I am getting an error TypeError: browserSync is not a function. Here is my gulp files:

`
var gulp = require('gulp'),
jade = require('gulp-jade'),
sass = require('gulp-ruby-sass'),
browserSync = require('browser-sync').create(),
harp = require('harp');
// var cp = require('child_process');
var autoprefixer = require('gulp-autoprefixer');

gulp.task('serve', function () {
  harp.server(".", {
    port: 9000
  }, function () {
    browserSync({
      proxy: "localhost:9000",
      open: false,
      /* Hide the notification. It gets annoying */
      notify: {
        styles: ['opacity: 0', 'position: absolute']
      }
    });
    /**
     * Watch for scss changes, tell BrowserSync to refresh main.css
     */
    gulp.watch(["*.css", "*.sass", "*.scss", "*.less"], function () {
      reload("main.css", {stream: true});
    });
    /**
     * Watch for all other changes, reload the whole page
     */
    gulp.watch(["*.html", "*.ejs", "*.jade", "*.js", "*.json", "*.md"], function () {
      reload();
    });
  })
});
//Convert .jade to .html file
gulp.task('jade', function(){
	gulp.src('src/*.jade')
	.pipe(jade({
		pretty: true
	}))
	.pipe(gulp.dest('dist/'));
});

gulp.task("copy_all", function(){
	gulp.src('src/*').pipe(gulp.dest('dist/'));
});

//Convert .scss file to .css
gulp.task('sass', function(){
	sass('src/css/main.scss')
	.pipe(autoprefixer({
		browsers: ['last 3 versions'],
	}))
	.pipe(gulp.dest('dist/css/'))
});

gulp.task('copy_js', function(){
	gulp.src('src/js/*.js').pipe(gulp.dest('dist/js/'))
});

gulp.task('copy_img', function(){
	gulp.src('src/img/**/*').pipe(gulp.dest('dist/img/'))
});

gulp.task('copy_fonts', function(){
	gulp.src('src/fonts/*').pipe(gulp.dest('dist/fonts/'))
});

//Sass watcher
gulp.task('watch', function(){
	gulp.watch('src/css/*.scss', ['sass']);
	gulp.watch('src/css/**/*.scss', ['sass']);
	gulp.watch('src/*.jade', ['jade']);
	gulp.watch('src/**/*.jade', ['jade']);
	gulp.watch('src/js/*.js', ['copy_js']);
	gulp.watch('src/img/', ['copy_img']);
	gulp.watch('src/img/*.svg', ['copy_img']);
	gulp.watch('src/img/**/*.svg', ['copy_img']);
	gulp.watch('src/fonts/', ['copy_fonts']);
});
gulp.task('default', ['serve']);

`

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.