Code Task Automation
While Shopify compile your SCSS file on the fly, this feature will compile it directly after you save your file and the compiled file will be available within your asset folder. There are some default tasks you can use like Minification, Sourcemaps, Autoprefix, Concatenation and Transpiler for your ES6 syntax.
If a task is activated, your compiled asset will be available in your asset folder with suffix
.generated as default, so if you activate SCSS task and include
styles.scss in it. Motifmate will create a new file called
styles.generated.css in your asset folder. This suffix won't be applied if you use Concatenation which you will set the file name.
Here's how to activate a task :
- Click Code Editor › Code Tasks › Automation (keyboard shortcut :
- Choose asset (example :
timber.js) and click Activate Task. You can also click other option to activate.
- Click Save Settings button.
To select/unselect multiple assets, you can use
cmd+clickfor macOS and
After the task activated, whenever you made changes and save
timber.js, Motifmate will automatically create/update a file called
timber.generate.js in your asset folder, which has been transpiled, minified and added a sourcemaps. Motifmate will also give you a notification about the compilation status.
Due to dynamic data, this feature doesn't support
There are three different CSS pre-processor supported by this feature : SCSS/SASS (
.sass), LESS (
.less) and Stylus
.styl. For Stylesheet, you also have an option to automatically add prefixes into your css.
.coffee) and TypeScript (