Grunt-processhtml Multiple/All Files in a Directory Bookmark

published on

A while ago I started to use Grunt in my projects and once you get your head around it, it can be a great helper. Unfortunately I find the documentation for some things hard to find and sometimes difficult to understand right away, so this shall serve as a note, in case you run into the same problem.

I'm using grunt-processhtml to replace various CSS and JS files with different ones, after the sources have been processed otherwise. So far my approach has always more or less looked like this, moving the processed file into the "dist" directory:

processhtml: {
  dist: {
    files: {
      'dist/index.html': ['index.html']
    }
  }
}

For my latest project there are many more HTML files than just only one that need processing and the list suddenly got quite long. This wasn't a maintainable solution after all:

processhtml: {
  dist: {
    files: {
     'dist/index.html': ['index.html'],
     'dist/page1.html': ['page1.html'],
     'dist/page2.html': ['page2.html'],
     'dist/page3.html': ['page3.html'],
     'dist/page4.html': ['page4.html'],
     …
     'dist/page20.html': ['page20.html']
    }
  }
}

As a result I wanted to grab all HTML files in the root directory, process them and then save the resulting file in a directory called "dist". I couldn't quite work out how to get this done and the documentation on file handling at first didn't help either, but after looking at different other Grunt tasks and their file operations I finally figured it out. The solution to what I wanted to do now looks like this and works just like I needed it to:

processhtml: {
  dist:{
    options: {
      process: true,
    },
    files: [
    {
      expand: true,
      cwd: './',
      src: ['*.html'],
      dest: 'dist/',
      ext: '.html'
    },
    ],
  }
}

There are probably other options you can use but for now I"ll leave this for the basic task that gets the job done. I hope this helps in case you are looking for the same or similar solution.

https://foobartel.com/@/page/6QPcNL6nvmlPrvAZ

Back to Articles