Skip to content

Instantly share code, notes, and snippets.

@brandanmajeske
Last active August 29, 2015 13:56
Show Gist options
  • Save brandanmajeske/9025906 to your computer and use it in GitHub Desktop.
Save brandanmajeske/9025906 to your computer and use it in GitHub Desktop.
Gulpfile.js with Express, Livereload, Sass, Notify
/*
* dependencies: connect-livereload, express, gulp, gulp-autoprefixer, gulp-minify-css, gulp-notify, gulp-ruby-sass, tiny-lr
* Files structure:
* /
- /css
- main.css
- /node_modules
- /sass
- main.scss
gulpfile.js
index.html
package.json
*/
var gulp = require('gulp');
var minifycss = require('gulp-minify-css');
var autoprefixer = require('gulp-autoprefixer');
var notify = require('gulp-notify');
var sass = require('gulp-ruby-sass');
var lr;
var EXPRESS_PORT = 8080;
var EXPRESS_ROOT = __dirname;
var LIVERELOAD_PORT = 35729;
function startLiveReload(){
lr = require('tiny-lr')();
lr.listen(LIVERELOAD_PORT);
}
function startExpress() {
var express = require('express');
var app = express();
app.use(require('connect-livereload')());
app.use(express.static(EXPRESS_ROOT));
app.listen(EXPRESS_PORT);
console.log('listening on port ' + EXPRESS_PORT);
}
function notifyLiveReload(event) {
var fileName = require('path').relative(EXPRESS_ROOT, event.path);
lr.changed({
body: {
files: [fileName]
}
});
}
gulp.task('css', function(){
return gulp.src('sass/main.scss')
.pipe(sass({style: 'compressed'}))
.pipe(autoprefixer('last 15 versions'))
.pipe(gulp.dest('css'))
.pipe(notify({ message: 'That\'s All Folks!'}));
});
gulp.task('default', function(){
startExpress();
startLiveReload();
gulp.watch('*.html', notifyLiveReload);
gulp.watch('css/*.css', notifyLiveReload);
gulp.watch('sass/**/*.scss', function(){
gulp.run('css');
});
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment