Skip to content

Instantly share code, notes, and snippets.

@OleVik
Created September 19, 2016 23:42
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save OleVik/73f714177fef8c71c62eb56552e2135d to your computer and use it in GitHub Desktop.
Save OleVik/73f714177fef8c71c62eb56552e2135d to your computer and use it in GitHub Desktop.
Gulp, Jekyll, SASS, Markdown, UnCSS build with livereload server
const gulp = require('gulp'),
sass = require('gulp-sass'),
gutil = require('gulp-util'),
plumber = require('gulp-plumber'),
rename = require('gulp-rename'),
minifyCSS = require('gulp-minify-css'),
prefixer = require('gulp-autoprefixer'),
connect = require('gulp-connect'),
modRewrite = require('connect-modrewrite'),
uncss = require('gulp-uncss');
cp = require('child_process');
// Path variables
const base_path = '',
src = base_path + './',
dist = base_path + '_site',
paths = {
js: src + '/js/*.js',
scss: src +'/css/*.scss',
jekyll: ['index.html', '_posts/*', '_layouts/*', '_includes/*' , 'assets/*', 'assets/**/*']
};
// Build Jekyll
gulp.task('jekyll', (code) => {
return cp.spawn('C:\\Ruby22\\bin\\jekyll.bat', ['build', '--incremental'], {stdio: 'inherit'})
.on('error', (error) => gutil.log(gutil.colors.red(error.message)))
.on('close', code)
})
// Compile SASS to CSS
gulp.task('sass', ['jekyll'], () => {
return gulp.src(paths.scss)
.pipe(plumber((error) => {
gutil.log(gutil.colors.red(error.message));
gulp.task('sass').emit('end');
}))
.pipe(sass())
.pipe(prefixer('last 3 versions', 'ie 9'))
.pipe(minifyCSS())
.pipe(gulp.dest('_site/css'));
});
// Reload on changed Markdown
gulp.task('md', ['sass'], function () {
gulp.src('*.md')
.pipe(connect.reload());
});
// Remove unused CSS
gulp.task('uncss', ['md'], function () {
return gulp.src('_site/css/app.css')
.pipe(uncss({
html: ['_site/**/*.html']
}))
.pipe(gulp.dest('_site/css'));
});
// Watch files
gulp.task('watch', () => {
gulp.watch(paths.jekyll, ['uncss']);
gulp.watch('*.md', ['uncss']);
gulp.watch(paths.scss, ['uncss']);
});
// Setup Server
gulp.task('server', ['uncss'], () => {
connect.server({
root: ['_site'],
livereload: true,
port: 4000,
middleware: function() {
return [
modRewrite([
'^.([^\\.]+)$ /$1.html [L]'
])
]
}
});
})
// Run server and watch tasks
gulp.task('default', ['server', 'watch']);
{
"name": "olevikme",
"version": "1.0.0",
"description": "Personal website.",
"author": "Ole Vik",
"license": "MIT",
"devDependencies": {
"connect-modrewrite": "^0.9.0",
"gulp": "^3.9.1",
"gulp-autoprefixer": "^3.1.1",
"gulp-connect": "^5.0.0",
"gulp-minify-css": "^1.2.4",
"gulp-plumber": "^1.1.0",
"gulp-rename": "^1.2.2",
"gulp-sass": "^2.3.2",
"gulp-uncss": "^1.0.6",
"gulp-util": "^3.0.7"
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment