To use this, you need an understanding of npm, gulp and sass,
- Node.js (Tested on v14.15.0) - for installing all of those Node packages, the foundation of a good development diet.
- Node Package Manager - for installing all of those Node packages, the foundation of a good development diet.
- Gulp 4 - The engine that takes all your code and compiles it. Quick Start Guide
- Shopify Themekit - uploads all compiled files to the Shopify theme.
Also recommended:
- Node Version Manager - Makes installing the correct version of node.js easier. Install via Homebrew
npm installgulp buildgulp(orgulp watch) andtheme watch- Run these in two separate terminal tabs at the same time.
Happy coding!
The project doesn't actually contain familiar styles.scss or theme.scss/js files in the git repo itself. Instead, the repo contains the different partials make up these files, and gulp compiles them all into the right files, which then get uploaded with Themekit.
- Install Node and Node Package Manager - Node is the Javascript server technology that powers Node Package Manager, a great tool to manage dependencies.
- Install Node Packages - Using NPM, install the dependencies for this boilerplate by running
npm installin the console. - Configure Themekit - set up Themekit's
config.ymlfile, linking your local code to a Shopify theme. - Test Gulp - Run
gulp buildto test that all of the compilation is working properly. You should see some success messages in the console from this (or error messages that will help you debug what went wrong)
If the above works, everything is ready for you to make changes to the project.
- Open a new terminal window/tab. Run
gulp watchto watch the working files to compile them into minified versions. - Open a new terminal window/tab. Run
theme watchto watch the working files
Once this is done, you can edit all the SCSS and JS code locally and they will be compiled into production code, and uploaded via Themekit.
You can run these in the console.
gulp - an alias for gulp watch
gulp watch - watches the files in the _source folder for changes, and compiles the SCSS or JS when anything is saved.
gulp build - Builds all of the compiled files for the whole project.
These are the different compile tasks that run under the hood.
styleTheme - Compiles the theme scss into theme.css.
styleCustom - Compiles the custom styles scss into custom-styles.css
styleAccount - Compiles the account styles scss into account.css
styleMisc - Compiles the misc styles into misc.css
styleCheckout - Compiles the checkout styles into custom-checkout.css
scriptsTheme - Compiles the theme scripts into theme.js
scriptsVendor - Compiles all the vendor scripts into vendor.js
At the top of the gulpfile.js, there's a flag called devmode.
When devmode is set to true, the compile tasks will write sourcemaps to help you inspect and debug source files in your browser. It will also not minify your code to make your files easier to read.
When devmode is set to true, all compiled code will be minified and no sourcemaps will be generated.
/_source- contains all dev code which is compiled into production code. This folder is intended for all the code in the plugin or product being developed./js- Javascript Source./theme- Contains the Javascript for the theme.js file./vendor- Contains the Javascript for the vendor.js file.
/scss- Sass Source./build- Contains the SCSS for thecustom-styles.cssfile./theme- Contains the SCSS for thetheme.cssfile./checkout- Contains the SCSS for thecustom-checkout.cssfile./account- Contains the SCSS for theaccount.cssfile./misc- Contains the SCSS for themisc.cssfile.
/theme- contains a standard Shopify theme folder with standard folders such asassetsandsnippets.package.json- containsnpmdevelopment dependencies. Change as needed.
- Quintin Schnehage - Initial work
This project is licensed under the MIT License - see the LICENSE.md file for details