Generate (but not use yet) RWD images

Author: James Doc

.eleventy.js

@@ -13,11 +13,11 @@ module.exports = function (eleventyConfig) {
 
   eleventyConfig.addCollection("posts", function (collection) {
     return collection.getAllSorted().filter(function (item) {
-      return item.inputPath.match(/^\.\/src\/blog\//) !== null;
+      return item.inputPath.match(/^\.\/src\/11ty\/blog\//) !== null;
     });
   });
 
-  eleventyConfig.addPassthroughCopy("src/_assets/img");
+  // eleventyConfig.addPassthroughCopy("src/_assets/svg");
 
   return {
     templateFormats: ["html", "njk", "md"],
@@ -27,7 +27,7 @@ module.exports = function (eleventyConfig) {
     dataTemplateEngine: "njk",
     passthroughFileCopy: true,
     dir: {
-      input: buildSrc,
+      input: `${buildSrc}/11ty`,
       output: buildDest,
       data: "_data",
       includes: "_includes"

gulpfile.js

@@ -1,11 +1,13 @@
-const gulp  = require('gulp');
-const sass  = require('gulp-sass');
-const shell = require('gulp-shell');
-const serve = require('gulp-serve');
-const clean = require('gulp-clean');
+const gulp        = require('gulp');
+const sass        = require('gulp-sass');
+const shell       = require('gulp-shell');
+const serve       = require('gulp-serve');
+const clean       = require('gulp-clean');
+const responsive  = require('gulp-responsive');
 
 const { buildSrc, buildDest } = require('./paths');
 
+// Make sure destination folder exists
 gulp.task('setup', function() {
   return gulp.src('*.*', {read: false})
     .pipe(gulp.dest(`./${buildDest}`));
@@ -21,18 +23,59 @@ gulp.task('serve', serve({
   port: 8000,
 }));
 
+gulp.task('svg', function() {
+  return gulp.src(`${buildSrc}/_assets/svg/*`)
+    .pipe(gulp.dest(`${buildDest}/_assets/svg/`));
+})
+
+gulp.task('images', function() {
+  return gulp.src(`${buildSrc}/_assets/img/**/*.{jpg,png}`)
+    .pipe(responsive({
+      // Resize all JPG images to three different sizes: 200, 500, and 630 pixels
+      '**/*': [{
+        width: 320,
+        rename: { suffix: '-320px' },
+      }, {
+        width: 550,
+        rename: { suffix: '-550px' },
+      }, {
+        // Compress, strip metadata
+      }],
+    }, {
+      quality: 80,
+      progressive: true,
+      withMetadata: false,
+      withoutEnlargement: true,
+      errorOnUnusedImage: false,
+      errorOnEnlargement: false
+    }))
+    .pipe(gulp.dest(`${buildDest}/_assets/img`));
+});
+
 gulp.task('generate', shell.task('eleventy'));
 
-gulp.task("scss", function () {
+gulp.task('scss', function () {
   return gulp.src(buildSrc + "/_assets/scss/main.scss")
     .pipe(sass({
       outputStyle: "compressed"
     }).on('error', sass.logError))
-    .pipe(gulp.dest(buildDest + "/_assets/css"))
+    .pipe(gulp.dest(`${buildDest}/_assets/css`))
 });
 
-gulp.task("watch", function () {
-  gulp.watch(buildSrc + "/**/*", gulp.parallel('build'))
+gulp.task('watch', function () {
+  gulp.watch(`${buildSrc}/11ty/**/*`, gulp.parallel('generate'));
+  gulp.watch(`${buildSrc}/_assets/img/**/*`, gulp.parallel('images'));
+  gulp.watch(`${buildSrc}/_assets/scss/**/*`, gulp.parallel('scss'));
+  gulp.watch(`${buildSrc}/_assets/svg/**/*`, gulp.parallel('svg'));
 });
 
-gulp.task('build', gulp.series('setup', 'clean', 'generate', 'scss'))
+gulp.task('build', gulp.series(
+  'setup',
+  'clean',
+  'generate',
+  gulp.parallel(
+    'images',
+    'scss',
+    'svg'
+  )
+));