{
    "componentChunkName": "component---src-templates-post-jsx",
    "path": "/blog/optimizing-jekyll-with-gulp",
    "result": {"data":{"post":{"id":"d7eac312-ea80-5889-920b-35e24ce45429","body":"var _excluded = [\"components\"];\nfunction _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n/* @jsxRuntime classic */\n/* @jsx mdx */\n\nvar _frontmatter = {\n  \"title\": \"Optimizing Jekyll with Gulp\",\n  \"slug\": \"/optimizing-jekyll-with-gulp\",\n  \"description\": \"An exploration into optimizing your Jekyll website using Gulp\",\n  \"date\": \"2018-06-01T00:00:00.000Z\",\n  \"category\": \"Web Development\",\n  \"image\": \"./img/gulp.jpg\",\n  \"tags\": [\"javascript\", \"jekyll\", \"web dev\", \"optimization\"],\n  \"published\": true\n};\nvar layoutProps = {\n  _frontmatter: _frontmatter\n};\nvar MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n  var components = _ref.components,\n    props = _objectWithoutProperties(_ref, _excluded);\n  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n    components: components,\n    mdxType: \"MDXLayout\"\n  }), mdx(\"p\", null, \"While the previous entry on optimizing your Jekyll site provided some basics to optimizing your Jekyll site performance, in this post I want to focus on providing a more comprehensive explanation of how you can create a more enjoyable development experience with the magic of \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://gulpjs.com/\",\n    \"target\": \"_blank\",\n    \"rel\": \"nofollow noopener noreferrer\"\n  }, mdx(\"strong\", {\n    parentName: \"a\"\n  }, \"Gulp\")), \".\", mdx(\"br\", {\n    parentName: \"p\"\n  }), \"\\n\", \"To get started, lets first discuss the basic workflow and file structure that we\", \"\\u2019\", \"ll be working with. As shown in the image below, we\\u2019ll be storing our site assets in the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"_assets/\"), \" directory.  \"), mdx(\"undefined\", null, mdx(\"img\", {\n    \"src\": \"https://user-images.githubusercontent.com/16360374/41262490-f9d106b4-6d95-11e8-9e2d-c63b80bfdd45.png\",\n    \"alt\": \"file tree\",\n    \"style\": {},\n    \"'50%'}}\": \"\"\n  }), \"  \"), mdx(\"p\", null, \"This will allow these files to be processed from within our \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://gist.github.com/tterb/9bd8e94eb094f1f38fc3dd33a250a2ed\",\n    \"target\": \"_blank\",\n    \"rel\": \"nofollow noopener noreferrer\"\n  }, \"Gulpfile\"), \", while remaining ignored by Jekyll. Though, a more in-depth explaination of the file-structure will be provided during each of the respective tasks.\"), mdx(\"h2\", null, \"Defining Paths\"), mdx(\"p\", null, \"One of the first things that probably stands out is the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"gulp-config/paths.js\"), \" file. In a practice I\", \"\\u2019\", \"ve borrowed from \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://github.com/savaslabs/savaslabs.github.io/\",\n    \"target\": \"_blank\",\n    \"rel\": \"nofollow noopener noreferrer\"\n  }, \"savaslabs\"), \", the purpose of this file is to define the paths that will be used within our Gulpfile, allowing for cleaner code and increased modularity. Given a similar file-structure, the file should be as follows:  \"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-js\"\n  }, \"var paths = {};\\n// Directory locations.\\npaths.assetsDir        = '_assets/';      // The files Gulp will handle.\\npaths.jekyllDir        = '';              // The files Jekyll will handle.\\npaths.jekyllAssetsDir  = 'assets/';       // The asset files Jekyll will handle.\\npaths.siteDir          = '_site/';        // The resulting static site.\\npaths.siteAssetsDir    = '_site/assets/'; // The resulting static site's assets.\\n\\n// Folder naming conventions.\\npaths.postFolder   = '_posts';\\npaths.fontFolder   = 'fonts';\\npaths.imageFolder  = 'img';\\npaths.scriptFolder = 'js';\\npaths.stylesFolder = 'styles';\\n\\n// Asset files locations.\\npaths.sassFiles   = paths.assetsDir + paths.stylesFolder;\\npaths.jsFiles     = paths.assetsDir + paths.scriptFolder;\\npaths.imageFiles  = paths.assetsDir + paths.imageFolder;\\npaths.fontFiles   = paths.assetsDir + paths.fontFolder;\\n\\n// Jekyll files locations.\\npaths.jekyllPostFiles  = paths.jekyllDir       + paths.postFolder;\\npaths.jekyllCssFiles   = paths.jekyllAssetsDir + paths.stylesFolder;\\npaths.jekyllJsFiles    = paths.jekyllAssetsDir + paths.scriptFolder;\\npaths.jekyllImageFiles = paths.jekyllAssetsDir + paths.imageFolder;\\npaths.jekyllFontFiles  = paths.jekyllAssetsDir + paths.fontFolder;\\n\\n// Site files locations.\\npaths.siteCssFiles   = paths.siteAssetsDir + paths.stylesFolder;\\npaths.siteJsFiles    = paths.siteAssetsDir + paths.scriptFolder;\\npaths.siteImageFiles = paths.siteAssetsDir + paths.imageFolder;\\npaths.siteFontFiles  = paths.siteAssetsDir + paths.fontFolder;\\n\\n// Glob patterns by file type.\\npaths.sassPattern     = '/**/*.scss';\\npaths.jsPattern       = '/**/*.js';\\npaths.imagePattern    = '/**/*.+(jpg|jpeg|png|svg|gif|webp|tif)';\\npaths.markdownPattern = '/**/*.+(md|MD|markdown|MARKDOWN)';\\npaths.htmlPattern     = '/**/*.html';\\n\\n// Asset files globs\\npaths.sassFilesGlob  = paths.sassFiles  + paths.sassPattern;\\npaths.jsFilesGlob    = paths.jsFiles    + paths.jsPattern;\\npaths.imageFilesGlob = paths.imageFiles + paths.imagePattern;\\n\\n// Jekyll files globs\\npaths.jekyllPostFilesGlob  = paths.jekyllPostFiles  + paths.markdownPattern;\\npaths.jekyllHtmlFilesGlob  = paths.jekyllDir        + paths.htmlPattern;\\npaths.jekyllImageFilesGlob = paths.jekyllImageFiles + paths.imagePattern;\\n\\n// Site files globs\\npaths.siteHtmlFilesGlob = paths.siteDir + paths.htmlPattern;\\n\\nmodule.exports = paths;\\n\")), mdx(\"h2\", null, \"Dependencies\"), mdx(\"p\", null, \"To get started with our Gulpfile, we first need to define and install the packages we\\u2019ll be using.  \"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-js\"\n  }, \"// Gulpfile.js\\n\\nconst autoprefixer = require('autoprefixer');\\nconst browserSync  = require('browser-sync').create();\\nconst concat       = require('gulp-concat');\\nconst cssnano      = require('cssnano');\\nconst del          = require('del');\\nconst gulp         = require('gulp');\\nconst gutil        = require('gulp-util');\\nconst newer        = require('gulp-newer');\\nconst imagemin     = require('gulp-imagemin');\\nconst pngquant     = require('imagemin-pngquant');\\nconst postcss      = require('gulp-postcss');\\nconst rename       = require('gulp-rename');\\nconst run          = require('gulp-run');\\nconst runSequence  = require('run-sequence');\\nconst sass         = require('gulp-ruby-sass');\\nconst uglify       = require('gulp-uglify-es').default;  // For es6 support\\n\\n// Include paths from the created paths.js file\\nconst paths = require('./_assets/gulp-config/paths');\\n\")), mdx(\"p\", null, \"Now, you \", mdx(\"em\", {\n    parentName: \"p\"\n  }, \"could\"), \" manually install all of these packages independantly, but in-case you\", \"\\u2019\", \"re looking for a shortcut, I\", \"\\u2019\", \"ve compiled the following command to allow you to conveniently install them all at once.  \"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-bash\"\n  }, \"npm i -D autoprefixer browser-sync del gulp gulp-cssnano gulp-concat gulp-util gulp-newer gulp-imagemin imagemin-pngquant gulp-notify gulp-postcss gulp-ruby-sass gulp-run gulp-rename gulp-uglify-es run-sequence\\n\")), mdx(\"h2\", null, \"Styles\"), mdx(\"p\", null, \"To optimize our site\", \"\\u2019\", \"s stylesheets, we\", \"\\u2019\", \"re first going to compile our main Sass file and utilize \", mdx(\"em\", {\n    parentName: \"p\"\n  }, \"autoprefixer\"), \" and \", mdx(\"em\", {\n    parentName: \"p\"\n  }, \"cssnano\"), \" to add the necessary vendor-prefixes and optimize the resulting CSS. Additionally, the use of \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://github.com/postcss/postcss\",\n    \"target\": \"_blank\",\n    \"rel\": \"nofollow noopener noreferrer\"\n  }, \"PostCSS\"), \" allows us to perform both of these processes while only parsing the CSS once. All of which, produces a single stylesheet that gets placed in our \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"assets\"), \" and \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"_site/assets\"), \" directories.  \"), mdx(\"p\", {\n    className: \"h-note\"\n  }, \"If you\\u2019re really looking to squeeze out all the performance possible, you can check out the \", mdx(\"a\", {\n    href: \"https://github.com/GoalSmashers/css-minification-benchmark\"\n  }, \"CSS minification benchmark\"), \" and see which one works best for you.\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-js\"\n  }, \"// Process styles, add vendor-prefixes, minify, then\\n// output the file to the appropriate location\\ngulp.task('build:styles:main', () => {\\n  return sass(paths.sassFiles + '/main.scss', {\\n    style: 'compressed',\\n    trace: true,\\n    loadPath: [paths.sassFiles]\\n  }).pipe(postcss([autoprefixer({ browsers: ['last 2 versions']}), cssnano()]))\\n    .pipe(gulp.dest(paths.jekyllCssFiles))\\n    .pipe(gulp.dest(paths.siteCssFiles))\\n    .pipe(browserSync.stream())\\n    .on('error', gutil.log);\\n});\\n\")), mdx(\"p\", null, \"To further optimize our stylesheet delivery we are going to want to ensure that we prioritize the most important and immediately utilized styles. This can be accomplished by creating a \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"critical.scss\"), \" file that includes only the critical and above-the-fold styling of your site to be loaded before the rest of your stylesheets, resulting in improved page-load speeds.\", mdx(\"br\", {\n    parentName: \"p\"\n  }), \"\\n\", \"To accomplish this, we will perform the same optimizations as the previous stylesheets, though we will pipe the output to a CSS file to the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"_includes/\"), \" directory, rather than the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"assets/\"), \" directory, so that it can be included in the sites \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"head.html\"), \".  \"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-js\"\n  }, \"// Create and process critical CSS file to be included in head\\ngulp.task('build:styles:critical', function() {\\n  return sass(paths.sassFiles + '/critical.scss', {\\n    style: 'compressed',\\n    trace: true,\\n    loadPath: [paths.sassFiles]\\n  }).pipe(postcss([ autoprefixer({ browsers: ['last 2 versions'] }), cssnano()]))\\n    .pipe(gulp.dest('_includes'))\\n    .on('error', gutil.log);\\n});\\n\\n// Build all styles\\ngulp.task('build:styles', ['build:styles:main', 'build:styles:critical']);\\n\")), mdx(\"h2\", null, \"Scripts\"), mdx(\"p\", null, \"Within the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"js/\"), \" directory, you\", \"\\u2019\", \"ll notice there are two subdirectories. The purpose of these directories is to differentiate global javascript files from those that are only needed on certain pages. Consequently, the global third-party javsacript files should be placed within the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"libs/\"), \" subdirectory, while the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"local/\"), \" subdirectory is reserved for scripts that are only included on specific pages. This allows for the concatenation of the global javascript files, while preserving the distinction of the local javscript files so they may be individually included as necessary.\", mdx(\"br\", {\n    parentName: \"p\"\n  }), \"\\n\", \"For this process we will need to create three tasks, two for processing the global and the local scripts, and a third task that calls them both.\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-js\"\n  }, \"// Concatenate and uglify global JS files and output the\\n// result to the appropriate location\\ngulp.task('build:scripts:global', function() {\\n  return gulp.src([\\n    paths.jsFiles + '/lib' + paths.jsPattern,\\n    paths.jsFiles + '/*.js'\\n  ])\\n    .pipe(concat('main.js'))\\n    .pipe(uglify())\\n    .pipe(gulp.dest(paths.jekyllJsFiles))\\n    .pipe(gulp.dest(paths.siteJsFiles))\\n    .on('error', gutil.log);\\n});\\n\\n// Uglify local JS files and output the result to the\\n// appropriate location\\ngulp.task('build:scripts:local', function() {\\n  return gulp.src(paths.jsFiles + '/local' + paths.jsPattern)\\n    .pipe(uglify())\\n    .pipe(gulp.dest(paths.jekyllJsFiles))\\n    .pipe(gulp.dest(paths.siteJsFiles))\\n    .on('error', gutil.log);\\n});\\n\\n// Build all scripts\\ngulp.task('build:scripts', ['build:scripts:global', 'build:scripts:local']);\\n\")), mdx(\"h2\", null, \"Images\"), mdx(\"p\", null, \"If you\", \"\\u2019\", \"ve read my previous installment on this topic, this task should look pretty familiar. Though, it\", \"\\u2019\", \"s important to note that this task is not intended to lessen the importance of choosing the correct image size and filetype, which are integral to optimizing your site\", \"\\u2019\", \"s images. \"), mdx(\"p\", null, \"Additionally, this task currently optimizes all of your site\", \"\\u2019\", \"s images, rather than only processing new images, in most cases, making this the most time-consuming build processes. As a result, if your site has a lot of images it may be beneficial to remove this task from the default \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"build\"), \" task, and instead run this task manually when new images are added, rather than with each build.  \"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-js\"\n  }, \"// Optimize and copy image files\\ngulp.task('build:images', function() {\\n  return gulp.src(paths.imageFilesGlob)\\n    .pipe(imagemin({ \\n      optimizationLevel: 3, \\n      progressive: true, \\n      interlaced: true,\\n      use: [pngquant()]\\n    }))\\n    .pipe(gulp.dest(paths.jekyllImageFiles))\\n    .pipe(gulp.dest(paths.siteImageFiles))\\n    .pipe(browserSync.stream());\\n});\\n\")), mdx(\"h2\", null, \"Fonts\"), mdx(\"p\", null, \"The task for processing the fonts is fairly simple, we simply want to collect all of the files from the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"fonts/\"), \" subdirectories and place them all within the resulting \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"assets/fonts/\"), \" directory.  \"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-js\"\n  }, \"// Place fonts in proper location\\ngulp.task('build:fonts', function() {\\n  return gulp.src(paths.fontFiles + '/**/**.*')\\n    .pipe(rename(function(path) {path.dirname = '';}))\\n    .pipe(gulp.dest(paths.jekyllFontFiles))\\n    .pipe(gulp.dest(paths.siteFontFiles))\\n    .pipe(browserSync.stream())\\n    .on('error', gutil.log);\\n});\\n\")), mdx(\"h2\", null, \"Jekyll\"), mdx(\"p\", null, \"Now it\", \"\\u2019\", \"s time to setup the basic Jekyll build process and browser-sync for the convenient auto-reload functionality.\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-js\"\n  }, \"// Run jekyll build command.\\ngulp.task('build:jekyll', function() {\\n  var shellCommand = 'bundle exec jekyll build --config _config.yml';\\n  return gulp.src('')\\n    .pipe(run(shellCommand))\\n    .on('error', gutil.log);\\n});\\n\\n// Special tasks for building and reloading BrowserSync\\ngulp.task('build:jekyll:watch', ['build:jekyll:local'], function(callback) {\\n  browserSync.reload();\\n  callback();\\n});\\n\\ngulp.task('build:scripts:watch', ['build:scripts'], function(callback) {\\n  browserSync.reload();\\n  callback();\\n});\\n\\n// Serve site and watch files\\ngulp.task('serve', ['build'], function() {\\n  browserSync.init({\\n    server: paths.siteDir,\\n    ghostMode: false, // Toggle to mirror clicks, reloads etc (performance)\\n    logFileChanges: true,\\n    logLevel: 'debug',\\n    open: true       // Toggle to auto-open page when starting\\n  });\\n  gulp.watch(['_config.yml'], ['build:jekyll:watch']);\\n  // Watch .scss files and pipe changes to browserSync\\n  gulp.watch('_assets/styles/**/*.scss', ['build:styles']);\\n  // Watch .js files\\n  gulp.watch('_assets/js/**/*.js', ['build:scripts:watch']);\\n  // Watch image files and pipe changes to browserSync\\n  gulp.watch('_assets/img/**/*', ['build:images']);\\n  // Watch posts\\n  gulp.watch('_posts/**/*.+(md|markdown|MD)', ['build:jekyll:watch']);\\n  // Watch drafts if --drafts flag was passed\\n  if (module.exports.drafts) {\\n    gulp.watch('_drafts/*.+(md|markdown|MD)', ['build:jekyll:watch']);\\n  }\\n  // Watch html and markdown files\\n  gulp.watch(['**/*.+(html|md|markdown|MD)', '!_site/**/*.*'], ['build:jekyll:watch']);\\n  // Watch RSS feed\\n  gulp.watch('feed.xml', ['build:jekyll:watch']);\\n  // Watch data files\\n  gulp.watch('_data/**.*+(yml|yaml|csv|json)', ['build:jekyll:watch']);\\n});\\n\\n// Build site\\ngulp.task('build', function(callback) {\\n  runSequence(['build:scripts', 'build:styles', 'build:images', 'build:fonts', 'build:downloads'], 'build:jekyll', callback);\\n});\\n\")), mdx(\"h2\", null, \"Cleaning up\"), mdx(\"p\", null, \"In accordance with the \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"http://wiki.c2.com/?BoyScoutRule\",\n    \"target\": \"_blank\",\n    \"rel\": \"nofollow noopener noreferrer\"\n  }, \"Boy Scout Rule\"), \", we\", \"\\u2019\", \"re gonna need a few tasks to clean up after ourselves. These tasks can basically act as an \", \"\\u201C\", mdx(\"em\", {\n    parentName: \"p\"\n  }, \"undo\"), \"\\u201D\", \" button for the gulp tasks we\", \"\\u2019\", \"ve created.\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-js\"\n  }, \"// Delete CSS\\ngulp.task('clean:styles', function(callback) {\\n  del([paths.jekyllCssFiles + 'main.css',\\n    paths.siteCssFiles + 'main.css',\\n    '_includes/critical.css'\\n  ]);\\n  callback();\\n});\\n\\n// Delete processed JS\\ngulp.task('clean:scripts', function(callback) {\\n  del([paths.jekyllJsFiles + 'main.js', paths.siteJsFiles + 'main.js']);\\n  callback();\\n});\\n\\n// Delete processed images\\ngulp.task('clean:images', function(callback) {\\n  del([paths.jekyllImageFiles, paths.siteImageFiles]);\\n  callback();\\n});\\n\\n// Delete processed font files\\ngulp.task('clean:fonts', function(callback) {\\n  del([paths.jekyllFontFiles, paths.siteFontFiles]);\\n  callback();\\n});\\n\\n// Delete the entire _site directory\\ngulp.task('clean:jekyll', function(callback) {\\n  del(['_site']);\\n  callback();\\n});\\n\\n// Deletes _site directory and processed assets\\ngulp.task('clean', ['clean:jekyll', 'clean:styles', 'clean:scripts', 'clean:images', 'clean:fonts', 'clean:downloads']\\n);\\n\")), mdx(\"p\", {\n    className: \"h-tldr\"\n  }, \"Here\\u2019s a \", mdx(\"a\", {\n    href: \"https://gist.github.com/tterb/9bd8e94eb094f1f38fc3dd33a250a2ed\"\n  }, \"gist\"), \" with the resulting Gulpfile.js\"), mdx(\"h2\", null, \"Conclusion\"), mdx(\"p\", null, \"While this Gulpfile provides a lot of optimization and added convenience to just about any site, there is definitely still room for improvement. Feel free to contact me or leave a comment with any improvements or suggestions!\"));\n}\n;\nMDXContent.isMDXComponent = true;","fields":{"slug":"/optimizing-jekyll-with-gulp"},"frontmatter":{"title":"Optimizing Jekyll with Gulp","description":"An exploration into optimizing your Jekyll website using Gulp","date":"01 June 2018","category":"Web Development","image":{"childImageSharp":{"gatsbyImageData":{"layout":"fullWidth","backgroundColor":"#882828","images":{"fallback":{"src":"/static/8b8c1bc0c6d2f46ca78c2d29e38b15d5/70515/gulp.jpg","srcSet":"/static/8b8c1bc0c6d2f46ca78c2d29e38b15d5/ae62b/gulp.jpg 750w,\n/static/8b8c1bc0c6d2f46ca78c2d29e38b15d5/88f14/gulp.jpg 1080w,\n/static/8b8c1bc0c6d2f46ca78c2d29e38b15d5/13ca3/gulp.jpg 1366w,\n/static/8b8c1bc0c6d2f46ca78c2d29e38b15d5/70515/gulp.jpg 1920w","sizes":"100vw"},"sources":[{"srcSet":"/static/8b8c1bc0c6d2f46ca78c2d29e38b15d5/66ee5/gulp.webp 750w,\n/static/8b8c1bc0c6d2f46ca78c2d29e38b15d5/18e3c/gulp.webp 1080w,\n/static/8b8c1bc0c6d2f46ca78c2d29e38b15d5/bfebb/gulp.webp 1366w,\n/static/8b8c1bc0c6d2f46ca78c2d29e38b15d5/a27fa/gulp.webp 1920w","type":"image/webp","sizes":"100vw"}]},"width":1,"height":0.2994791666666667}}}}},"avatar":{"childImageSharp":{"gatsbyImageData":{"layout":"constrained","backgroundColor":"#f8f8f8","images":{"fallback":{"src":"/static/b24b72d8f366da7af02542a735d82fa0/f9edd/me.jpg","srcSet":"/static/b24b72d8f366da7af02542a735d82fa0/93848/me.jpg 60w,\n/static/b24b72d8f366da7af02542a735d82fa0/73bb6/me.jpg 120w,\n/static/b24b72d8f366da7af02542a735d82fa0/f9edd/me.jpg 240w,\n/static/b24b72d8f366da7af02542a735d82fa0/97a19/me.jpg 480w","sizes":"(min-width: 240px) 240px, 100vw"},"sources":[{"srcSet":"/static/b24b72d8f366da7af02542a735d82fa0/927d1/me.webp 60w,\n/static/b24b72d8f366da7af02542a735d82fa0/507b0/me.webp 120w,\n/static/b24b72d8f366da7af02542a735d82fa0/8d565/me.webp 240w,\n/static/b24b72d8f366da7af02542a735d82fa0/21b1a/me.webp 480w","type":"image/webp","sizes":"(min-width: 240px) 240px, 100vw"}]},"width":240,"height":240}}}},"pageContext":{"slug":"/optimizing-jekyll-with-gulp"}},
    "staticQueryHashes": []}