Skip to content

Instantly share code, notes, and snippets.

@ninetails
Created February 22, 2014 01:06
Show Gist options
  • Save ninetails/9146956 to your computer and use it in GitHub Desktop.
Save ninetails/9146956 to your computer and use it in GitHub Desktop.
Getting gulp tutorial and adding compass+sass and coffeescript
gulp = require('gulp')
plugins = require('gulp-load-plugins')()
server = require('tiny-lr')()
path = require('path')
gulp.task('styles', function(){
return gulp.src('./src/sass/*.sass')
.pipe(plugins.compass({
style: 'expanded',
css: 'dist/assets/css',
sass: 'src/sass',
image: 'dist/assets/images'
}))
.pipe(plugins.autoprefixer('last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4'))
.pipe(gulp.dest('dist/assets/css'))
.pipe(plugins.rename({suffix: '.min'}))
.pipe(plugins.minifyCss())
.pipe(gulp.dest('dist/assets/css'))
.pipe(plugins.livereload(server))
.pipe(plugins.notify({message: 'Styles task complete'}));
});
gulp.task('scripts', function() {
return gulp.src('src/coffee/*.coffee')
.pipe(gulp.dest('dist/assets/js'))
.pipe(plugins.coffee({bare: true, sourceMap: true}))
.pipe(gulp.dest('dist/assets/js'))
.pipe(plugins.concat('main.js'))
.pipe(gulp.dest('dist/assets/js'))
.pipe(plugins.rename({suffix: '.min'}))
.pipe(plugins.uglify({outSourceMap: true, preserveComments: 'some'}))
.pipe(gulp.dest('dist/assets/js'))
.pipe(plugins.livereload(server))
.pipe(plugins.notify({ message: 'Scripts task complete' }));
});
gulp.task('images', function() {
return gulp.src('src/images/**/*')
.pipe(plugins.cache(plugins.imagemin({ optimizationLevel: 3, progressive: true, interlaced: true })))
.pipe(gulp.dest('dist/assets/images'))
.pipe(plugins.livereload(server))
.pipe(plugins.notify({ message: 'Images task complete' }));
});
gulp.task('clean', function() {
return gulp.src(['dist/assets/css', 'dist/assets/js', 'dist/assets/images'], {read: false})
.pipe(plugins.clean());
});
gulp.task('default', ['clean'], function() {
gulp.start('styles', 'scripts', 'images');
});
gulp.task('watch', function() {
// Listen on port 35729
server.listen(35729, function (err) {
if (err) {
return console.log(err)
};
// Watch .scss files
gulp.watch('src/sass/**/*.sass', ['styles']);
// Watch .js files
gulp.watch('src/coffee/**/*.coffee', ['scripts']);
// Watch image files
gulp.watch('src/images/**/*', ['images']);
});
});
@carl0zen
Copy link

Thanks for this! its awesome,
I added some server support using gulp-connect.
https://github.com/carlosepp/thirdeye/blob/master/gulpfile.js

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment