Skip to content

Instantly share code, notes, and snippets.

@swashcap
Last active November 23, 2016 03:02
Show Gist options
  • Save swashcap/da91a5b0e2e7138e93d2 to your computer and use it in GitHub Desktop.
Save swashcap/da91a5b0e2e7138e93d2 to your computer and use it in GitHub Desktop.
Gulpifying Jekyll
/* global -$ */
'use strict';
var gulp = require('gulp');
var $ = require('gulp-load-plugins')();
var browserSync = require('browser-sync');
var reload = browserSync.reload;
gulp.task('styles', function () {
return gulp.src('app/css/main.scss')
.pipe($.sourcemaps.init())
.pipe($.sass({
outputStyle: 'nested',
precision: 10,
includePaths: ['.', 'app/_sass'],
onError: console.error.bind(console, 'Sass error:')
}))
.pipe($.postcss([
require('autoprefixer-core')({browsers: ['last 2 version', 'ie 9']})
]))
.pipe($.sourcemaps.write())
.pipe(gulp.dest('.tmp/css/'))
.pipe(reload({stream: true}));
});
gulp.task('jshint', function () {
return gulp.src(['gulpfile.js', 'app/js/**/*.js'])
.pipe(reload({stream: true, once: true}))
.pipe($.jshint())
.pipe($.jshint.reporter('jshint-stylish'))
.pipe($.if(!browserSync.active, $.jshint.reporter('fail')));
});
gulp.task('jekyll', function () {
return gulp.src('_config.yml')
.pipe($.shell([
'jekyll build --config <%= file.path %>'
]))
.pipe(reload({stream: true}));
});
gulp.task('html', ['styles', 'jekyll'], function () {
var assets = $.useref.assets({searchPath: ['.tmp', 'app', '.']});
var baseurl = 'beer-review'
var htmlPattern = /(href|src)(=["|']?\/)([^\/])/gi;
var htmlReplacement = '$1$2' + baseurl + '/$3';
var cssPattern = /(url\(['|"]?\/)([^\/])/gi;
var cssReplacement = '$1' + baseurl + '/$2';
return gulp.src('dist/**/*.html')
.pipe(assets)
.pipe($.if('*.js', $.uglify()))
.pipe($.if('*.css', $.csso()))
.pipe(assets.restore())
.pipe($.useref())
.pipe($.if('*.html', $.minifyHtml({conditionals: true, loose: true})))
.pipe($.if('*.html', $.replace(htmlPattern, htmlReplacement)))
.pipe($.if('*.css', $.replace(cssPattern, cssReplacement)))
.pipe(gulp.dest('dist'));
});
gulp.task('images', function () {
return gulp.src('app/img/**/*')
.pipe(gulp.dest('dist/img/'));
});
gulp.task('extras', function () {
return gulp.src([
'app/*.*',
'!app/feed.xml',
'!app/*.html'
], {
dot: true
}).pipe(gulp.dest('dist'));
});
gulp.task('clean', require('del').bind(null, ['.tmp', 'dist']));
gulp.task('serve', ['clean', 'styles', 'jekyll'], function () {
browserSync({
notify: false,
port: 9000,
server: {
baseDir: ['dist', '.tmp', 'app'],
routes: {
'/bower_components': 'bower_components'
}
}
});
gulp.watch([
'app/js/**/*.js',
'app/img/**/*'
]).on('change', reload);
gulp.watch('app/**/*.{md,markdown,html}', ['jekyll']);
gulp.watch('app/{css,_sass}/**/*.scss', ['styles']);
gulp.watch('bower.json', ['wiredep']);
});
gulp.task('wiredep', function () {
var wiredep = require('wiredep').stream;
gulp.src('app/css/*.scss')
.pipe(wiredep({
ignorePath: /^(\.\.\/)+/
}))
.pipe(gulp.dest('app/css'));
gulp.src('app/**/*.html')
.pipe(wiredep({
ignorePath: /^(\.\.\/)*\.\./
}))
.pipe(gulp.dest('app'));
});
gulp.task('build', ['jshint', 'html', 'images', 'extras'], function () {
return gulp.src('dist/**/*')
.pipe($.size({title: 'build', gzip: true}));
});
gulp.task('default', ['clean'], function () {
gulp.start('build');
});
{
"private": true,
"engines": {
"node": ">=0.10.0"
},
"devDependencies": {
"autoprefixer-core": "^4.0.2",
"browser-sync": "^1.8.2",
"del": "^1.1.1",
"gulp": "^3.6.0",
"gulp-cache": "^0.2.2",
"gulp-csso": "^0.2.6",
"gulp-if": "^1.2.1",
"gulp-imagemin": "^2.0.0",
"gulp-jshint": "^1.5.3",
"gulp-load-plugins": "^0.8.0",
"gulp-minify-html": "^0.1.6",
"gulp-postcss": "^3.0.0",
"gulp-sass": "^1.3.3",
"gulp-shell": "^0.4.1",
"gulp-size": "^1.1.0",
"gulp-sourcemaps": "^1.3.0",
"gulp-replace": "^0.5.3",
"gulp-uglify": "^1.0.1",
"gulp-useref": "^1.0.2",
"jshint-stylish": "^1.0.0",
"main-bower-files": "^2.5.0",
"opn": "^1.0.0",
"wiredep": "^2.0.0"
}
}
@rizqinizamil
Copy link

Can I see your _config.yml?

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