11ty: --incremental not having any effect?

Question

I'm using this on my package.json

{
  "name": "blog-11ty",
  "version": "1.0.0",
  "description": "",
  "main": ".eleventy.js",
  "scripts": {
    "serve": "npx @11ty/eleventy --serve",
    "build": "npx @11ty/eleventy --incremental"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@quasibit/eleventy-plugin-schema": "^1.0.0"
  },
  "devDependencies": {
    "@11ty/eleventy": "^0.12.1",
    "@11ty/eleventy-img": "^0.8.3",
    "@11ty/eleventy-plugin-rss": "^1.1.0",
    "@11ty/eleventy-plugin-syntaxhighlight": "^3.0.6",
    "glob": "^7.2.0",
    "gulp-exec": "^5.0.0",
    "markdown-it": "^12.2.0",
    "markdown-it-anchor": "^8.4.1",
    "markdown-it-link-attributes": "^3.0.0"
  }
}

This is my current .eleventy.js stripped off, the one I'm using to test this:

const syntaxHighlight = require("@11ty/eleventy-plugin-syntaxhighlight");
const pluginRss = require("@11ty/eleventy-plugin-rss");

async function imageShortcode(src, alt, width, height) {
    return '';
}

async function codepenShortcode(url, tab) {
    return '';
}

async function buttonShortCode(url, text) {
    return '';
}

async function videoShortCode(url) {
    return '';
}


module.exports = function(eleventyConfig) {

    eleventyConfig.addPlugin(syntaxHighlight);
    eleventyConfig.addPlugin(pluginRss);

    // Turn off filename quoting in include tags
    eleventyConfig.setLiquidOptions({
        dynamicPartials: false
    });

    eleventyConfig.addCollection('posts', 
    collection => collection.getFilteredByGlob('blog/*.md').sort((a, b) => b.date - a.date));
    
    eleventyConfig.addLayoutAlias('category', 'layouts/category.html');
    
    eleventyConfig.addLayoutAlias('default', 'layouts/default.html');
    
    eleventyConfig.addLayoutAlias('home', 'layouts/home.html');
    
    eleventyConfig.addLayoutAlias('page', 'layouts/page.html');
    
    eleventyConfig.addLayoutAlias('post', 'layouts/post.html');
    
    eleventyConfig.addLiquidShortcode("image", imageShortcode);
    eleventyConfig.addLiquidShortcode("codepen", codepenShortcode);
    eleventyConfig.addLiquidShortcode("video", videoShortCode);
    eleventyConfig.addLiquidShortcode("button", buttonShortCode);

    return {
        dir: {
            input: './',
            output: './_site'
        },
        passthroughFileCopy: true
    };
};

Now, every time I run npm run build every single file inside the output folder (_site) gets modified. The modification time of each file changes.

Am I missing something?

I would expect the files to only be modified the the source file modification date changed too?

Answer 1

I believe incremental is only meant to be used with serve. The docs say:

"Incremental builds perform a partial build operating only on files that have changed to improve build times when doing local development."

In my testing, I confirmed this. I ran eleventy --incremental --serve and noticed that it would only rebuild one file at a time when I changed it. If you run it by itself, it's going to create a full build every time, as documented here: https://www.11ty.dev/docs/usage/incremental/#cold-start