Gulp CSS Assets for Shopify Permalink: Gulp CSS Assets for Shopify Bookmark Icon

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.


Leave a comment

Available formatting commands

Use Markdown commands or their HTML equivalents to add simple formatting to your comment:

Text markup
*italic*, **bold**, ~~strikethrough~~, `code` and <mark>marked text</mark>.
Lists
- Unordered item 1
- Unordered list item 2
1. Ordered list item 1
2. Ordered list item 2
Quotations
> Quoted text
Code blocks
```
// A simple code block
```
```php
// Some PHP code
phpinfo();
```
Links
[Link text](https://example.com)
Full URLs are automatically converted into links.

Replied on your own website? Send a Webmention!