Created
November 5, 2017 18:32
-
-
Save majidzeno/50596a072568e4763cbaad4f9274e8de to your computer and use it in GitHub Desktop.
Using Foundation Zurb 6 with browsersync.io for static website
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
--> First in terminal, navigate to your project folder and run the following command: | |
$ npm install browser-sync gulp --save-dev | |
--> then open gulp.js and copy the following : | |
gulp.task('default', ['sass'], function() { | |
gulp.watch(['scss/**/*.scss'], ['sass']); | |
}); | |
var gulp = require('gulp'); | |
var $ = require('gulp-load-plugins')(); | |
var browserSync = require('browser-sync').create(); | |
var sass = require('gulp-sass'); | |
var reload = browserSync.reload; | |
var sassPaths = [ | |
'bower_components/foundation-sites/scss', | |
'bower_components/motion-ui/src' | |
]; | |
gulp.task('sass', function() { | |
return gulp.src('scss/app.scss') | |
.pipe($.sass({ | |
includePaths: sassPaths | |
}) | |
.on('error', $.sass.logError)) | |
.pipe($.autoprefixer({ | |
browsers: ['last 2 versions', 'ie >= 9'] | |
})) | |
.pipe(gulp.dest('css')) | |
.pipe(browserSync.stream()); | |
}); | |
// Static Server + watching scss/html files | |
gulp.task('serve', ['sass'], function() { | |
browserSync.init({ | |
server: "./" | |
}); | |
gulp.watch("./scss/*.scss", ['sass']); | |
gulp.watch("./*.html").on('change', browserSync.reload); | |
}); | |
gulp.task('default', ['serve']); | |
--> Retrun to the terminal and in project root run : | |
$npm start | |
--> This will start local host in your machine watching your html and sass files. | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment