Skip to content

Instantly share code, notes, and snippets.

@scottnix
Last active August 14, 2016 04:38
Show Gist options
  • Star 5 You must be signed in to star a gist
  • Fork 6 You must be signed in to fork a gist
  • Save scottnix/10430003 to your computer and use it in GitHub Desktop.
Save scottnix/10430003 to your computer and use it in GitHub Desktop.
Gulpfile.js Sample, latest
// Load plugins
var gulp = require('gulp'),
sass = require('gulp-ruby-sass'),
autoprefixer = require('gulp-autoprefixer'),
minifycss = require('gulp-minify-css'),
rename = require('gulp-rename'),
notify = require('gulp-notify'),
concat = require('gulp-concat'),
uglify = require('gulp-uglify'),
markdown = require('gulp-markdown'),
jade = require('gulp-jade'),
imagemin = require('gulp-imagemin'),
cache = require('gulp-cache'),
livereload = require('gulp-livereload'),
lr = require('tiny-lr'),
server = lr();
// Styles
gulp.task('styles', function() {
return gulp.src('./scss/style.scss')
.pipe(sass({
style: 'expanded',
compass: true,
require: ['susy']
}))
.pipe(autoprefixer('last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4'))
.pipe(gulp.dest('./build/css'))
.pipe(rename({ suffix: '.min' }))
.pipe(minifycss())
.pipe(gulp.dest('./build/css'))
.pipe(livereload(server))
.pipe(notify({ message: 'Styles task complete' }));
});
// Converts Markdown to HTML
gulp.task('markdown', function () {
return gulp.src('./jade/md/*.md')
.pipe(markdown())
.pipe(gulp.dest('./jade/md/'))
.pipe(notify({ message: 'Markdown to HTML task complete' }));
});
// Converts Jade to HTML (jade is including markdown files)
gulp.task('jade', ['markdown'], function() { // ['markdown'] forces jade to wait
return gulp.src('./jade/*.jade')
.pipe(jade({
pretty: true, // uncompressed
}))
.pipe(gulp.dest('./'))
.pipe(livereload(server))
.pipe(notify({ message: 'Jade to HTML task complete' }));
});
// Concatenate & Minify JS
gulp.task('scripts', function() {
return gulp.src('js/*.js')
.pipe(concat('scripts.js'))
.pipe(gulp.dest('./build/js'))
.pipe(rename('scripts.min.js'))
.pipe(uglify())
.pipe(gulp.dest('./build/js'))
.pipe(notify({ message: 'JS task complete' }));
});
// Images
gulp.task('images', function() {
return gulp.src('./images/**/*')
.pipe(cache(imagemin({ optimizationLevel: 5, progressive: true, interlaced: true })))
.pipe(gulp.dest('./build/images'))
.pipe(livereload(server))
.pipe(notify({ message: 'Images task complete' }));
});
// Default task
gulp.task('default', ['styles', 'scripts', 'images', 'markdown', 'jade', 'watch']);
// Watch
gulp.task('watch', function() {
// Listen on port 35729
server.listen(35729, function (err) {
if (err) {
return console.log(err);
}
// Watch .scss files
gulp.watch('scss/**/*.scss', ['styles']);
// Watch .js files
gulp.watch('js/**/*.js', ['scripts']);
// Watch image files
gulp.watch('images/**/*', ['images']);
// Watch .md files
gulp.watch('jade/md/*.md', ['jade']); // triggers jade task when markdown file changes
// Watch .jade files
gulp.watch('jade/**/*.jade', ['jade']);
});
});
@scottnix
Copy link
Author

Updated, added .jade and .md support, took me a awhile to get it working with livereload. I had a problem where when markdown files were updated, livereload wouldn't update. This was because I needed to call the jade task instead, which runs the markdown task first, good to know this shit I guess, took me a while to figure it out.

Copy link

ghost commented May 18, 2014

This gist looks interesting... but, are you passing markdown to jade template? How are you doing it?

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