Gulp CSS Assets for Shopify Bookmark

published on

I'm currently working on a Shopify project and was trying to make my life a little easier… I generally like working with Shopify, but sometimes it turns tedious. My front end modules currently live in a separate repo and thus I need to copy CSS and JS over a bit. Especially for the CSS updates it makes a lot of sense to create certain tasks, otherwise manual change become unbearable over time. For this project I created a Gulp task that converts my CSS background rules including images to Shopify compatible asset URLs.

The Gulp task

var gulp = require('gulp');
var $    = require('gulp-load-plugins')();
var replace = require('gulp-replace');
var rename = require("gulp-rename");

/*
Gulp task to convert CSS background image paths to Shopify asset urls,
e.g. url(/images/background.jpg) -> url({{ 'background.jpg' | asset_url }})
*/

gulp.task('fixurls', function(){
  gulp.src(['css/app.css'])
    .pipe(replace(/url\(\/?images\/(.+)\)/g, 'url({{ \'$1\' | asset_url }})'))
    .pipe(rename("style.css.liquid"))
    .pipe(gulp.dest('./css'));
});

You can find the Gist here.

What this task does, is to convert the following rule:

.bg {
  background-image: url(images/icon-search.svg);
}

to something like this, which Shopify then can process:

.bg {
  background-image: url( {{ 'icon-search.svg' | asset_url }} );
}

Finally the CSS file gets saved as styles.css.liquid which I then can easily copy over to the Shopify assets. Even better would be to additionally save this file straight into the Shopify repo and then would be uploaded right away. I might add that step soon, since that would be even better. For now this task already does its job. And if you found this, I hope it will help to make your life a little easier, too.

Back to Notes