npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

eleventy-plugin-clean

v2.0.1

Published

An Eleventy plugin to keep the output directory clean

Downloads

172

Readme

eleventy-plugin-clean

npm NPM dev or peer Dependency Version CI License: MIT

This is an experimental plugin for Eleventy to keep the output directory clean.

The plugin does not delete any files not created by Eleventy. It deletes all the files, previously created by Eleventy but no longer created/updated, in the output directory.

⚠️ Don't use weird input and output directories setup even if the official doc recommends, such as https://www.11ty.dev/docs/usage/#using-the-same-input-and-output.

Installation

For Eleventy 3.x

npm install eleventy-plugin-clean

Add it to Eleventy config file (usually eleventy.config.js)

// ES module
import clean from "eleventy-plugin-clean";

export default function(eleventyConfig) {
  eleventyConfig.addPlugin(clean);
};
// CommonJS
module.exports = async function(eleventyConfig) {
  const clean = (await import("eleventy-plugin-clean")).default;
  await eleventyConfig.addPlugin(clean);
};

For Eleventy 1.x and 2.x

npm install eleventy-plugin-clean@^1

Add it to Eleventy config file (usually .eleventy.js)

const clean = require("eleventy-plugin-clean");

export default async function(eleventyConfig) {
  eleventyConfig.addPlugin(clean);
};

Shared Setup for Eleventy 1.x, 2.x and 3.x

If you are using git, add the following line to your .gitignore.

.plugin-clean

If you are not using git, add it to your .eleventyignore file instead of the .gitignore file.

Usage

eleventy-plugin-clean does not delete files which were not written by Eleventy or had been created before the installation of the plugin.

Therefore, you may want to clean the output directory once before using it.

rm -rf _site/*

What it actually does

eleventy-plugin-clean uses LMDB, a key-value store, to store all the data needed to keep the output directory clean. The DB is located at .plugin-clean in your project root.

It keeps the build number of Eleventy project. The build number is an integer value that it automatically increases with each Eleventy build.

It uses the key-value store to store build numbers for the files in the output directory. In other words, eleventy-plugin-clean knows all of the files in the output directory and each of the file records has its build number that generated the file.

When Eleventy (re)builds the site, it updates the build numbers for all of the output files generated by the build.

At the end of each build, it removes the files in the output directory which have a build number older than the current build number and deletes their records from the key-value store.

Plugins

If you are using plugins that write files in the output directory by itself instead of using Eleventy, eleventy-plugin-clean does not delete such files when they are no longer created/updated.

Such plugins need to call updateFileRecord(outputPath, inputPath) for files to be managed by eleventy-plugin-clean.

For example, eleventy-sass does call updateFileRecord(), and all of the files in the output directory will be managed by eleventy-plugin-clean.

(eleventy-sass do use Eleventy's file writing functionality for CSS files compiled from Sass/SCSS files, but writes only source map files by itself, and it calls updateFileRecord() only for the source map files.)

API

updateFileRecord(outputPath, inputPath) is the only API function. It is used for files to be managed by eleventy-plugin-clean.

inputPath is optional and used only for debug purpose. Therefore, you can call it only with outputPath.

const clean = require("eleventy-plugin-clean");

clean.updateFileRecord(outputPath);

Limitations

Suppose you are running npx @11ty/eleventy --serve.

eleventy-plugin-clean does not detect file deletions since Eleventy doesn't listen unlink events but only listens change and add events:

https://github.com/11ty/eleventy/blob/1db6a10a98f35b6f6bcac94222cdd8597e6f7928/src/Eleventy.js#L953-L961

Therefore, when you remove a file from your input directory, nothing will happen.

However, after that, if you change or add another file or if you re-run npx @11ty/eleventy --serve or npx @11ty/eleventy, it will remove the file(s) in the output directory which had been generated from the above removed file.