introduction

Recently I started sniffing through a book I found at the thrift store: Learning CSS3 animations and transitions by Alexis Goldstein. I was reading through the introduction where she advocated css3please, so I visited the site and at the top, they recommended to use Autoprefixer. I got curious, and decided to give it a try

giving it a try

In the page about Autoprefixer the static asset building tool Grunt was recommended, and I saw it as an opportunity to dip my feet into a build tool for this website. Before this, I did it all by hand, and I do admit that it can be somewhat duplicated at times. And being a programmer, I try to get rid of duplication as much as possible.

I set up the GruntFile.js according to the example, but I didn't want to manually have to add each new css file to the files list of autoprefixer and the watch list of grunt, so I asked ChatGPT for help. First, just to fill in the files list with the proper names, but then it gave me a better answer of just including all the CSS files in the directory. I have all the editable css files in a dev/css directory, and autoprefixer then generates new files in the public/css directory, what you are seeing when you load these pages. The resulting GruntFile.js looks like this:

        
// https://css-tricks.com/autoprefixer/
module.exports = function (grunt) {
  grunt.initConfig({
      autoprefixer: {
          dist: {
              files: [{
                  expand: true,
                  cwd: 'dev/css/', // Source directory
                  src: '*.css',    // Pattern to match
                  dest: 'public/css/', // Destination directory
                  ext: '.css'      // Destination file extension
              }]
          }
      },
      watch: {
          styles: {
              files: ['dev/css/*.css'], // Watch all CSS files in the dev/css directory
              tasks: ['autoprefixer']
          }
      }
  });
  grunt.loadNpmTasks('grunt-autoprefixer');
  grunt.loadNpmTasks('grunt-contrib-watch');
};

After running it from the example on the Autoprefixer website, the generated CSS file was no different. I first thought it didn't work or I installed it incorrectly, but after trying some other CSS keywords it worked.

I also wanted to automatically run the grunt watch when I started my server, so from this stackoverflow answer I made my npm start command like this:

Now, when I change any of the files in the dev/css directory, an updated CSS file with all the prefixes automatically gets generated:

- Waiting...
[1] >> File "dev/css/test.css" changed.
[1] Running "autoprefixer:dist" (autoprefixer) task
[1] >> 10 autoprefixed stylesheets created.

UPDATE 20-07-2024: I also added prism.js to the grunt config, and it's used to generate the cool looking code snippets you see above. I will now go through and change every code snippet on this website to use prism, wish me luck ヽ( •_)ᕗ