[SOLVED] Setting up sass and Browsersync with Gulp
My folder structure is as follows:
index.html css - styles.css sass - categories - sass partial(s) - styles.scss gulpfile.js package.json
This task is for running sass and browsersync with gulp: Goes into gulpfile.js
// gulp var gulp = require('gulp'); // sass var sass = require('gulp-sass'); var autoprefixer = require('gulp-autoprefixer'); // browsersync var browserSync = require('browser-sync'); var reload = browserSync.reload; // define browsersync task gulp.task('browser-sync', function() { browserSync({ server: { baseDir: "." } }); }); // define browser reload task gulp.task('bs-reload', function () { browserSync.reload(); }); // // define styles task gulp.task('styles', function () { gulp.src('sass/**/*.scss') // compile SASS to CSS .pipe(sass({ outputStyle: 'compressed', includePaths: ['node_modules/susy/sass'] }).on('error', sass.logError)) // add vendor prefixes .pipe(autoprefixer({ browsers: ['last 30 versions'], cascade: false })) // save the file to the css directory .pipe(gulp.dest('css')) // send output to all browsers .pipe(browserSync.stream()); }); // run tasks: type gulp in browser gulp.task('default', ['browser-sync'], function(){ gulp.watch("sass/**/*.scss", ['styles']); gulp.watch("*.html", ['bs-reload']); });
Type 'gulp' on terminal and voila
