Skip to content

Instantly share code, notes, and snippets.

@Martin-Andersen
Created February 12, 2018 09:51
Show Gist options
  • Save Martin-Andersen/c0052d025542617c32ea3a6de3f2ddc9 to your computer and use it in GitHub Desktop.
Save Martin-Andersen/c0052d025542617c32ea3a6de3f2ddc9 to your computer and use it in GitHub Desktop.
Gulp getting started file for scss compilation and browsersync
// https://www.sitepoint.com/simple-gulpy-workflow-sass/
var gulp = require('gulp');
var sass = require('gulp-sass');
var autoprefixer = require('gulp-autoprefixer');
var sourcemaps = require('gulp-sourcemaps');
var flatten = require('gulp-flatten')
var bs = require('browser-sync').create(); // create a browser sync instance.
var input_scss = './03/**/*.scss';
var input_html = './03/**/*.html';
var output = './03/demos/demos/start/css';
var browsersync_basedir = './03/demos/demos/start/';
var sassOptions = {
errLogToConsole: true,
outputStyle: 'expanded'
};
var autoprefixerOptions = {
browsers: ['last 2 versions', '> 5% in DK', 'Firefox ESR']
};
gulp.task('scss', function () {
return gulp
.src(input_scss)
.pipe(sourcemaps.init())
.pipe(sass(sassOptions).on('error', sass.logError))
//.pipe(sourcemaps.write())
.pipe(autoprefixer(autoprefixerOptions))
.pipe(flatten())
.pipe(gulp.dest(output))
.pipe(bs.reload({stream: true}));
});
// https://scotch.io/tutorials/how-to-use-browsersync-for-faster-development
gulp.task('browser-sync', function() {
bs.init({
server: {
baseDir: browsersync_basedir
}
});
});
gulp.task('watch', ['browser-sync'], function () {
gulp.watch(input_scss, ['scss']);
gulp.watch(input_html).on('change', bs.reload);
});
// gulp.task('watch', function() {
// return gulp
// // Watch the input folder for change,
// // and run `sass` task when something happens
// .watch(input, ['sass'])
// // When there is a change,
// // log a message in the console
// .on('change', function(event) {
// console.log('File ' + event.path + ' was ' + event.type + ', running tasks...');
// });
// });
gulp.task('default', ['watch']);
{
"name": "pluralsightrwdlayout",
"version": "1.0.0",
"description": "RWD menus",
"main": "Gulpfile.js",
"dependencies": {
"browser-sync": "^2.23.6",
"bulma": "^0.6.2",
"gulp": "^3.9.1",
"gulp-autoprefixer": "^4.1.0",
"gulp-sass": "^3.1.0",
"gulp-sourcemaps": "^2.6.4"
},
"devDependencies": {
"gulp-flatten": "^0.4.0"
},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "mha",
"license": "ISC"
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment