Gulp + Shopify
Version: 1.0.4
Author
Jase Warner ( https://jase.io )
Synopsis
Gulp + Shopify is for those Developers wishing to use Gulp.js and Shopify’s Theme Kit to develop their Shopify theme – a tidy solution to the problem with Shopify not allowing sub-directories within the /assets directory.
The theme is packaged with Gulp for watching and compiling assets in the /dev directory, including SCSS, JS, images and fonts. When modified, said assets are moved across to the /assets directory.
A selection of helpful mixins is also included, most of which are featured in this useful article by @seb_ekstrom.
You may also write your JavaScript in ES6 – The Gulp scripts task uses Babel, so you can use new syntax without worrying about browser support.
The default theme files have been brought across from Shopify’s Skeleton theme.
The theme includes the Bootstrap 4 grid and reboot scss files. These can be removed in theme.scss.liquid, or indeed, you may add more Bootstrap SCSS files using @import via ./node_modules/bootstrap-scss/.
Installation
Gulp.js
Clone the repo into your project root.
In Terminal cd into the /dev directory and install the Gulp packages (if you haven’t already installed Gulp, you’ll need to do so first):
npm install
Once you have installed the packages, in Terminal, run gulp watch.
Any changes to the SCSS files in /dev/sass/ will lead to the creation of theme.scss.liquid in assets.
Any alterations to the JS files in /dev/js/functions/ will be concatenated and uglified in /assets to theme.js and theme.min.js.
Images added to /dev/image will be copied across to the /assets directory. Similarly, any fonts added to /dev/font will be copied across to /assets.
Theme Kit
To get Theme Kit up and running, follow the instructions here.
The config.yml file is included in the repo, ready to be filled in with the necessary details.
To get started on your theme, follow these instructions.
Features
The Gulp build features the following helpful packages:
- gulp-autoprefixer
- gulp-babel
- gulp-clean-css
- gulp-concat
- gulp-csslint
- gulp-rename
- gulp-sass
- gulp-uglify