This content originally appeared on foobartel.com :: Stream and was authored by foobartel.com :: Stream
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.
This content originally appeared on foobartel.com :: Stream and was authored by foobartel.com :: Stream
foobartel.com :: Stream | Sciencx (2016-08-01T22:00:00+00:00) Gulp CSS Assets for Shopify. Retrieved from https://www.scien.cx/2016/08/01/gulp-css-assets-for-shopify/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.