setting up existing store? how can I use existing css/js as is while migrating?

[lastobelus]

my current plan:

• init with yarn create shopify-pipeline
• add a config.yml to src and run themekit download
• regex search/replace asset_urls

What I'm not sure of is how to use current css/js files as is, while gradually moving their contents into src/assets/sass & src/assets/js?

[lastobelus]

I'm having trouble figuring out how to get the vendors feature to work with pre-existing vendor js.

for example, (from the Slate theme) in theme.liquid

  <!--[if (lte IE 9) ]>{{ 'match-media.min.js' | asset_url | script_tag }}<![endif]-->

I moved assets/match-media.min.js to src/assets/vendors/, and replaced that line with:

  <!--[if (lte IE 9) ]>{{ '../assets/vendors/match-media.min.js' | asset_url | script_tag }}<![endif]-->

but this results in the build error:

WARNING in ./src/layout/theme.liquid
Module build failed: /XXX/shopify-pipeline-test/src/assets/vendors/match-media.min.js:4
// some minified js....

ReferenceError: window is not defined
    at Object.<anonymous> (/XXX/shopify-pipeline-test/src/assets/vendors/match-media.min.js:4:1)
    at Module._compile (module.js:624:30)
    at Object.Module._extensions..js (module.js:635:10)

[lastobelus]

Ok I got that part to work by switching to an html script tag so I could use the single quotes trick. Is there a way to tell shopify-pipeline to pass through liquid script_tag|img_tag etc. filters?

[lastobelus]

I was mistaken, it wasn't working -- I had accidentally used shopify_asset_url instead of asset_url.

So, when I use:

<script src='{{ 'match-media.min.js' | asset_url }}'></script>

I get:

Error: Cannot find module '/XXX/shopify-pipeline-test/src/layout/match-media.min.js'

ANd if I try to add in the relative path:

  <script src='{{ '../assets/vendor/match-media.min.js' | asset_url }}'></script>

Webpack tries to compile it and I get:

ReferenceError: window is not defined (or other error caused by trying to compile an oldskool js file with transpiler)

[lastobelus]

These three regexes get a Slate template to build, after moving js & css to vendors:

substitutions = [
  {
    # convert liquid script_tag to <script>, with passthrough quoting
    regex: /\{\{\s*['"]([^'"]+)['"]\s*\|\s*asset_url\s*\|\s*script_tag\s*\}\}/,
    replace: %q(<script src='{{ "\1" | asset_url }}'>)
  },
  {
  # convert liquid stylesheet_tag to <script>, with passthrough quoting
    regex: /\{\{\s*['"]([^'"]+)['"]\s*\|\s*asset_url\s*\|\s*stylesheet_tag\s*\}\}/,
    replace: %q(<link rel="stylesheet" type="text/css" href='{{ "\1" | asset_url }}'>)
  },
  {
    # convert src/href with liquid to passthrough quoting (but not shopify assets)
    regex: /(src|href)="\s*(\{\{\s*)'([^']+)'(( *\|\s*(?!shopify_asset_url)\w+)*\s*\}\})\s*"/,
    replace: %q(\1='\2"\3"\4')
  }
]

f = File.read(ARGV[0])
substitutions.each{|s| f.gsub!(s[:regex], s[:replace])}
File.write(ARGV[0], f)

[nddery]

<script src='{{ 'match-media.min.js' | asset_url }}'></script> will still parse the liquid expression, for it not to be parse, you need to use double quotes inside of the expression. So, if you wanted to use the script_tag liquid function, with the file in the vendors directory, you could write <!--[if (lte IE 9) ]>{{ "match-media.min.js" | asset_url | script_tag }}<![endif]-->. I've updated the readme to reflect this, the escape hatch is to use double quotes inside of the liquid expression, not to wrap it in single quotes.

What I'm not sure of is how to use current css/js files as is, while gradually moving their contents into src/assets/sass & src/assets/js?

By moving all your current assets into the vendors directory, and importing/using them in the normal (with the "escape-hatch") way, I think you would be free to transfer individual assets to the webpack-managed version whenever the time comes ?

Ok I got that part to work by switching to an html script tag so I could use the single quotes trick. Is there a way to tell shopify-pipeline to pass through liquid script_tag|img_tag etc. filters?

As scripts, styles, images, .. aren't uploaded to Shopify servers on development, we replace the whole expression during development with the local URL, so this isn't possible.

[lastobelus]

Thanks! I've got everything building.