Grunt-processhtml Multiple/All Files in a Directory

This content originally appeared on foobartel.com :: Stream and was authored by foobartel.com :: Stream

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.

This content originally appeared on foobartel.com :: Stream and was authored by foobartel.com :: Stream

Print Share Comment Cite Upload Translate Updates

APA

foobartel.com :: Stream | Sciencx (2014-08-19T22:00:00+00:00) Grunt-processhtml Multiple/All Files in a Directory. Retrieved from https://www.scien.cx/2014/08/19/grunt-processhtml-multiple-all-files-in-a-directory/

MLA

" » Grunt-processhtml Multiple/All Files in a Directory." foobartel.com :: Stream | Sciencx - Tuesday August 19, 2014, https://www.scien.cx/2014/08/19/grunt-processhtml-multiple-all-files-in-a-directory/

HARVARD

foobartel.com :: Stream | Sciencx Tuesday August 19, 2014 » Grunt-processhtml Multiple/All Files in a Directory., viewed ,<https://www.scien.cx/2014/08/19/grunt-processhtml-multiple-all-files-in-a-directory/>

VANCOUVER

foobartel.com :: Stream | Sciencx - » Grunt-processhtml Multiple/All Files in a Directory. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2014/08/19/grunt-processhtml-multiple-all-files-in-a-directory/

CHICAGO

" » Grunt-processhtml Multiple/All Files in a Directory." foobartel.com :: Stream | Sciencx - Accessed . https://www.scien.cx/2014/08/19/grunt-processhtml-multiple-all-files-in-a-directory/

IEEE

" » Grunt-processhtml Multiple/All Files in a Directory." foobartel.com :: Stream | Sciencx [Online]. Available: https://www.scien.cx/2014/08/19/grunt-processhtml-multiple-all-files-in-a-directory/. [Accessed: ]

rf:citation

» Grunt-processhtml Multiple/All Files in a Directory | foobartel.com :: Stream | Sciencx | https://www.scien.cx/2014/08/19/grunt-processhtml-multiple-all-files-in-a-directory/ |

Please log in to upload a file.

There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.