m/blog
1
0
Fork 0
mirror of https://github.com/kremalicious/blog.git synced 2024-11-14 09:05:17 +01:00
Code

build refactor & cleanup

Browse Source
This commit is contained in:
Matthias Kretschmann 2015-11-20 15:53:49 +01:00
parent 3845c14e79
commit 4edd24a687
4 changed files with 138 additions and 134 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
_config.dev.yml Normal file
View File

@ -0,0 +1,3 @@
# fix for jekyll-picture-tag always prepending site.url
url: http://localhost:1337

2
_src/_includes/footer.html
View File

@ -54,6 +54,7 @@
<script src="/assets/js/kremalicious3.min.js" async></script>
{% if jekyll.environment == "production" %}
<script>
var _paq = _paq || [];
_paq.push(['trackPageView']);
@ -76,3 +77,4 @@
ga('create', 'UA-1441794-2', 'auto');
ga('send', 'pageview');
</script>
{% endif %}

200
gulpfile.js
View File

@ -8,7 +8,7 @@ var gulp = require('gulp'),
merge = require('merge-stream'),
pkg = require('./package.json'),
parallelize = require('concurrent-transform'),
combineMq = require('gulp-combine-mq');
browser = require('browser-sync');
// Temporary solution until gulp 4
// https://github.com/gulpjs/gulp/issues/355
@ -40,19 +40,25 @@ console.log("");
// Config
// ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
// Port to use for the development server.
var PORT = 1337;
// Browsers to target when prefixing CSS.
var COMPATIBILITY = ['last 2 versions', 'ie >= 9'];
// paths
var src = '_src',
dist = '_site',
cdn = 'https://cdn.kremalicious.com',
s3bucket = 'kremalicious.com',
s3path = '/',
s3region = 'eu-central-1';
var SRC = '_src',
DIST = '_site',
CDN = 'https://cdn.kremalicious.com',
S3BUCKET = 'kremalicious.com',
S3PATH = '/',
S3REGION = 'eu-central-1';
// icons
var icons = {
var ICONS = {
entypo: {
src: src + '/_assets/icons/entypo/',
dist: dist + '/assets/img/',
src: SRC + '/_assets/icons/entypo/',
dist: DIST + '/assets/img/',
prefix: 'entypo-',
icons: [
'twitter', 'facebook', 'google+', 'magnifying-glass', 'menu', 'rss', 'link', 'arrow-with-circle-down', 'forward', 'heart', 'info-with-circle', 'infinity', 'github', 'chevron-right', 'chevron-left', 'eye'
@ -60,9 +66,16 @@ var icons = {
}
}
var iconset = ICONS.entypo;
// Iterate through the icon set array
iconset.icons.forEach(function(icon, i, icons) {
icons[i] = iconset.src + icon + '.svg';
});
// SVG sprite
var spriteConfig = {
dest: dist + '/assets/img/',
var SPRITE = {
dest: DIST + '/assets/img/',
mode: {
symbol: {
dest: './',
@ -72,7 +85,7 @@ var spriteConfig = {
}
// code banner
var banner = [
var BANNER = [
'/**',
' ** <%= pkg.name %> v<%= pkg.version %>',
' ** <%= pkg.description %>',
@ -99,12 +112,12 @@ var banner = [
//
// Delete build artifacts
//
gulp.task('clean', function(cb) {
gulp.task('clean', function(done) {
return del([
dist + '/**/*',
dist + '/.*', // delete all hidden files
'!' + dist + '/media/**'
], cb)
DIST + '/**/*',
DIST + '/.*', // delete all hidden files
'!' + DIST + '/media/**'
], done)
});
@ -115,9 +128,9 @@ gulp.task('jekyll', function(cb) {
var spawn = require('child_process').spawn;
if (isProduction) {
var jekyll = spawn('bundle', ['exec', 'jekyll', 'build', '--lsi'], { stdio: 'inherit' });
var jekyll = spawn('bundle', ['exec', 'jekyll', 'build', '--lsi', 'JEKYLL_ENV=production'], { stdio: 'inherit' });
} else {
var jekyll = spawn('bundle', ['exec', 'jekyll', 'build', '--drafts', '--future', '--incremental'], { stdio: 'inherit' });
var jekyll = spawn('bundle', ['exec', 'jekyll', 'build', '--config', '_config.yml,_config.dev.yml', '--drafts', '--future', '--incremental'], { stdio: 'inherit' });
}
jekyll.on('exit', function(code) {
@ -130,7 +143,7 @@ gulp.task('jekyll', function(cb) {
// HTML
//
gulp.task('html', function() {
return gulp.src(dist + '/**/*.html')
return gulp.src(DIST + '/**/*.html')
.pipe($.if(isProduction, $.htmlmin({
collapseWhitespace: true,
conservativeCollapse: true,
@ -140,7 +153,7 @@ gulp.task('html', function() {
removeRedundantAttributes: true,
removeEmptyAttributes: true
})))
.pipe(gulp.dest(dist))
.pipe(gulp.dest(DIST))
});
@ -149,17 +162,17 @@ gulp.task('html', function() {
//
gulp.task('css', function() {
return gulp.src([
src + '/_assets/styl/kremalicious3.styl',
src + '/_assets/styl/post-*.styl'
SRC + '/_assets/styl/kremalicious3.styl',
SRC + '/_assets/styl/post-*.styl'
])
.pipe($.sourcemaps.init())
.pipe($.stylus({ 'include css': true })).on('error', onError)
.pipe($.autoprefixer({ browsers: 'last 2 versions' }))
.pipe($.if(isProduction, combineMq({ beautify: false }))).on('error', onError)
.pipe($.autoprefixer({ browsers: COMPATIBILITY }))
.pipe($.if(isProduction, $.cssmin()))
.pipe($.if(isProduction, $.header(banner, { pkg: pkg })))
.pipe($.if(!isProduction, $.sourcemaps.write()))
.pipe($.if(isProduction, $.header(BANNER, { pkg: pkg })))
.pipe($.rename({ suffix: '.min' }))
.pipe(gulp.dest(dist + '/assets/css/'))
.pipe($.connect.reload())
.pipe(gulp.dest(DIST + '/assets/css/'))
});
@ -170,22 +183,23 @@ gulp.task('css', function() {
// Libraries
gulp.task('js:libraries', function() {
return gulp.src([
'node_modules/picturefill/dist/picturefill.js'
'node_modules/picturefill/DIST/picturefill.js'
])
.pipe($.if(isProduction, $.uglify())).on('error', onError)
.pipe($.rename({ suffix: '.min'}))
.pipe(gulp.dest(dist + '/assets/js/'))
.pipe(gulp.dest(DIST + '/assets/js/'))
});
// Project js
gulp.task('js:project', function() {
return gulp.src(src + '/_assets/js/app.js')
return gulp.src(SRC + '/_assets/js/app.js')
.pipe($.include()).on('error', onError)
.pipe($.sourcemaps.init())
.pipe($.concat('kremalicious3.min.js'))
.pipe($.if(isProduction, $.uglify())).on('error', onError)
.pipe($.if(isProduction, $.header(banner, { pkg: pkg })))
.pipe(gulp.dest(dist + '/assets/js/'))
.pipe($.connect.reload())
.pipe($.if(!isProduction, $.sourcemaps.write()))
.pipe($.if(isProduction, $.header(BANNER, { pkg: pkg })))
.pipe(gulp.dest(DIST + '/assets/js/'))
});
// Collect all script tasks
@ -196,19 +210,12 @@ gulp.task('js', ['js:libraries', 'js:project'])
// Icons
//
gulp.task('icons', function() {
var iconset = icons.entypo;
// Iterate through the icon set array
icons.entypo.icons.forEach(function(icon, i, icons) {
icons[i] = iconset.src + icon + '.svg';
});
return gulp.src(iconset.icons)
.pipe($.rename({ prefix: iconset.prefix }))
.pipe(gulp.dest(iconset.dist))
.pipe($.filter('**/*.svg'))
.pipe($.if(isProduction, $.imagemin({ svgoPlugins: [{ removeViewBox: false }] })))
.pipe($.svgSprite(spriteConfig))
.pipe($.svgSprite(SPRITE))
.pipe(gulp.dest(iconset.dist))
});
@ -218,8 +225,8 @@ gulp.task('icons', function() {
//
gulp.task('images', function() {
return gulp.src([
src + '/_assets/img/**/*',
'!' + src + '/_assets/img/entypo/**/*'
SRC + '/_assets/img/**/*',
'!' + SRC + '/_assets/img/entypo/**/*'
])
.pipe($.if(isProduction, $.imagemin({
optimizationLevel: 5, // png
@ -228,7 +235,7 @@ gulp.task('images', function() {
multipass: true, // svg
svgoPlugins: [{ removeViewBox: false }]
})))
.pipe(gulp.dest(dist + '/assets/img/'))
.pipe(gulp.dest(DIST + '/assets/img/'))
});
@ -236,8 +243,8 @@ gulp.task('images', function() {
// Copy fonts
//
gulp.task('fonts', function() {
return gulp.src(src + '/_assets/fonts/**/*')
.pipe(gulp.dest(dist + '/assets/fonts/'))
return gulp.src(SRC + '/_assets/fonts/**/*')
.pipe(gulp.dest(DIST + '/assets/fonts/'))
});
@ -245,8 +252,8 @@ gulp.task('fonts', function() {
// Copy media
//
gulp.task('media', function() {
return gulp.src(src + '/_media/**/*')
.pipe(gulp.dest(dist + '/media/'))
return gulp.src(SRC + '/_media/**/*')
.pipe(gulp.dest(DIST + '/media/'))
});
@ -254,12 +261,15 @@ gulp.task('media', function() {
// Revision static assets
//
gulp.task('rev', function() {
return gulp.src(dist + '/assets/**/*.{css,js,png,jpg,jpeg,svg,eot,ttf,woff}')
// globbing is slow so do everything conditionally for faster dev build
if (isProduction) {
return gulp.src(DIST + '/assets/**/*.{css,js,png,jpg,jpeg,svg,eot,ttf,woff}')
.pipe($.if(isProduction, $.rev()))
.pipe(gulp.dest(dist + '/assets/'))
.pipe(gulp.dest(DIST + '/assets/'))
// output rev manifest for next replace task
.pipe($.if(isProduction, $.rev.manifest()))
.pipe(gulp.dest(dist + '/assets/'))
.pipe(gulp.dest(DIST + '/assets/'))
}
});
@ -268,12 +278,13 @@ gulp.task('rev', function() {
// from a manifest file
//
gulp.task('rev:replace', function() {
var manifest = gulp.src(dist + '/assets/rev-manifest.json');
return gulp.src(dist + '/**/*.{html,xml,txt,json,css,js,png,jpg,jpeg,svg,eot,ttf,woff}')
// globbing is slow so do everything conditionally for faster dev build
if (isProduction) {
var manifest = gulp.src(DIST + '/assets/rev-manifest.json');
return gulp.src(DIST + '/**/*.{html,xml,txt,json,css,js,png,jpg,jpeg,svg,eot,ttf,woff}')
.pipe($.if(isProduction, $.revReplace({ manifest: manifest })))
.pipe(gulp.dest(dist))
.pipe(gulp.dest(DIST))
}
});
@ -282,16 +293,17 @@ gulp.task('rev:replace', function() {
//
gulp.task('cdn', function() {
return gulp.src([
dist + '/**/*.html',
dist + '/assets/css/*.css'
], { base: dist })
.pipe($.replace('/assets/css/', cdn + '/assets/css/'))
.pipe($.replace('/assets/js/', cdn + '/assets/js/'))
//.pipe($.replace('/assets/img/', cdn + '/assets/img/'))
.pipe($.replace('/media/', cdn + '/media/'))
.pipe($.replace('https://kremalicious.com' + cdn + '/media/', 'https://kremalicious.com/media/'))
.pipe($.replace('../', cdn + '/assets/'))
.pipe(gulp.dest(dist))
DIST + '/**/*.html',
DIST + '/assets/css/*.css'
], { base: DIST })
.pipe($.replace('/assets/css/', CDN + '/assets/css/'))
.pipe($.replace('/assets/js/', CDN + '/assets/js/'))
//.pipe($.replace('/assets/img/', CDN + '/assets/img/'))
.pipe($.replace('/media/', CDN + '/media/'))
.pipe($.replace('https://kremalicious.com/media/', CDN + '/media/'))
.pipe($.replace('https://kremalicious.com' + CDN + '/media/', CDN + '/media/'))
.pipe($.replace('../', CDN + '/assets/'))
.pipe(gulp.dest(DIST))
});
@ -301,11 +313,11 @@ gulp.task('cdn', function() {
gulp.task('s3:assets', function() {
var publisher = $.awspublish.create({
params: {
'Bucket': s3bucket
'Bucket': S3BUCKET
},
'accessKeyId': process.env.AWS_ACCESS_KEY_ID,
'secretAccessKey': process.env.AWS_SECRET_ACCESS_KEY,
'region': s3region
'region': S3REGION
});
// define custom headers
@ -314,8 +326,8 @@ gulp.task('s3:assets', function() {
'x-amz-acl': 'public-read'
};
var assets = gulp.src(dist + '/assets/**/*', { base: dist + '/' }),
media = gulp.src(dist + '/media/**/*', { base: dist + '/' });
var assets = gulp.src(DIST + '/assets/**/*', { base: DIST + '/' }),
media = gulp.src(DIST + '/media/**/*', { base: DIST + '/' });
return merge(assets, media)
.pipe($.rename(function (path) {
@ -333,25 +345,13 @@ gulp.task('s3:assets', function() {
//
// Dev Server
//
gulp.task('connect', function() {
return $.connect.server({
root: [dist],
livereload: true,
port: 1337
})
gulp.task('server', function() {
browser.init({
server: DIST,
port: PORT
});
});
//
// Watch task
//
gulp.task('watch', function() {
gulp.watch([src + '/_assets/styl/**/*.styl'], ['css'])
gulp.watch([src + '/_assets/js/*.js'], ['js'])
gulp.watch([src + '/_assets/img/**/*.{png,jpg,jpeg,gif}'], ['images'])
gulp.watch([src + '/_assets/img/**/*.{svg}'], ['icons'])
gulp.watch([src + '/_media/**/*'], ['media'])
gulp.watch([src + '/**/*.{html,xml,json,txt,md}'], ['build'])
});
// ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
// Task sequences
@ -359,21 +359,22 @@ gulp.task('watch', function() {
//
// Dev Server
// Build site, run server, and watch for file changes
//
gulp.task('default', function(cb) {
runSequence(
'build',
['watch', 'connect'],
cb
);
gulp.task('default', ['build', 'server'], function() {
gulp.watch([SRC + '/_assets/styl/**/*.styl'], ['css', browser.reload]);
gulp.watch([SRC + '/_assets/js/*.js'], ['js', browser.reload]);
gulp.watch([SRC + '/_assets/img/**/*.{png,jpg,jpeg,gif}'], ['images', browser.reload]);
gulp.watch([SRC + '/_assets/img/**/*.{svg}'], ['icons', browser.reload]);
gulp.watch([SRC + '/_media/**/*'], ['media', browser.reload]);
gulp.watch([SRC + '/**/*.{html,xml,json,txt,md}', './*.yml'], ['build', browser.reload]);
});
//
// Full build
//
gulp.task('build', function(cb) {
gulp.task('build', function(done) {
console.log(chalk.gray(" ------------------------------------------"));
console.log(chalk.green(' Building ' + ($.util.env.production ? 'production' : 'dev') + ' version...'));
@ -382,10 +383,9 @@ gulp.task('build', function(cb) {
runSequence(
'clean',
'jekyll',
//'html',
['css', 'js', 'images', 'icons', 'fonts', 'media'],
['html', 'css', 'js', 'images', 'icons', 'fonts', 'media'],
'rev',
'rev:replace',
cb
done
);
});

17
package.json
View File

@ -1,14 +1,18 @@
{
"name": "kremalicious",
"version": "3.0.0",
"author": {
"name": "Matthias Kretschmann",
"email": "m@kretschmann.io"
},
"description": "Blog of Matthias Kretschmann",
"homepage": "https://kremalicious.com",
"version": "3.0.0",
"license": "MIT",
"main": "gulpfile.js",
"scripts": {
"start": "gulp",
"build": "gulp build --production"
},
"dependencies": {
"jquery": ">=2.1.4",
"normalize-css": ">=2.3.1",
@ -18,16 +22,14 @@
"webcomponents.js": ">=0.7.1"
},
"devDependencies": {
"browser-sync": ">=2.10.0",
"chalk": ">=1.0.0",
"concurrent-transform": ">=1.0.0",
"del": ">=1.2.0",
"gulp": ">=3.8.0",
"gulp-autoprefixer": ">=2.3.0",
"gulp-awspublish": ">=2.0.2",
"gulp-cache": ">=0.2.10",
"gulp-combine-mq": ">=0.4.0",
"gulp-concat": ">=2.5.2",
"gulp-connect": ">=2.0.5",
"gulp-cssmin": ">=0.1.7",
"gulp-filter": ">=2.0.2",
"gulp-header": ">=1.2.2",
@ -41,15 +43,12 @@
"gulp-rev": ">=4.0.0",
"gulp-rev-replace": ">=0.4.1",
"gulp-stylus": ">=2.0.3",
"gulp-sourcemaps": ">=1.6.0",
"gulp-svg-sprite": ">=1.2.2",
"gulp-svg2png": ">=0.3.0",
"gulp-uglify": ">=1.2.0",
"gulp-uncss": ">=1.0.1",
"gulp-util": ">=3.0.6",
"merge-stream": ">=0.1.7",
"run-sequence": ">=1.1.0",
"stylus": ">=0.45.0",
"vinyl": ">=0.4.6"
"run-sequence": ">=1.1.0"
},
"engines": {
"node": ">=0.10.29"