Autoprefixer, Sourcemaps for SASS?

I’ve building a site and just want to build the SASS out in a standard way–with autoprefixer and sourcemaps. When I run jekyll build the SASS output isn’t that useful. I’ve spent the past 3hrs trying to make Jekyll Assets work, since it offers the hope of autoprefixer, but there are blocker cacheing bugs that leave me with a blank white page.

Does anyone know of a way to simply run autoprefixer and generate SASS sourcemaps with Jekyll? I’ve scoured the internet and have found nothing. I’ve also tried running Codekit, but jekyll build --watch and Codekit trigger builds for each other in a constant loop.

Any suggestions would be helpful.

I use Gulp tasks to preprocess my Sass, pipe it through Autoprefixer, minify, and gzip. And another set of tasks to fire off jekyll serve and build commands.

If you want an idea of what that workflow entails have a look at my personal site’s repo. It’s slightly over engineered ;-), but might be helpful.

There are a bunch of Jekyll-Gulp/Grunt boilerplates out there if you search around too.

You could also try the Jekyll Autoprefixer plugin if jekyll-assets is troublesome to setup. I had similar issues back in the day configuring J-A with Autoprefixer due to the documentation being on the light side.

Thanks for the feedback Michael.

So other set of tasks to fire off Jekyll serve and build, are they watching the same files that Gulp is? how do you keep those from firing on save, etc?

I’m looking at your repo now and will see what I can learn from it.

My Gulp tasks are fine tuned for my site because I have thousands of posts and found it painfully slow to make simple CSS changes in development quickly.

So, what I have going is a crazy set of tasks that do all the asset work (preprocessing, minifying, concatenation, optimization, etc.) in a temp folder that Jekyll doesn’t watch. So I can make CSS and JS adjustments quickly and see them live in browser instantly with Browserify without triggering a slow Jekyll build.

Then there are build and serve tasks that essentially execute the normal jekyll serve and build commands with some production flags depending on if they’re preping for a deployment or not.

I also have some tasks that copy thousands of image assets between temp and prod folders to keep them out of the Jekyll build process as well. I found it quicker to shuffle them around with Gulp than Jekyll since at my scale it was slowing the build time down.

1 Like