All Projects → hayes0724 → Shopify Webpack Themekit

hayes0724 / Shopify Webpack Themekit

Licence: mit
Shopify development tool using webpack and themekit

Programming Languages

javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to Shopify Webpack Themekit

Tris Webpack Boilerplate
A Webpack boilerplate for static websites that has all the necessary modern tools and optimizations built-in. Score a perfect 10/10 on performance.
Stars: ✭ 1,016 (+547.13%)
Mutual labels:  webpack4, babel, scss
Frontie Webpack
Front-end Boilerplate | Gulp 4 + Webpack 4 + Babel + ITCSS Architecture + BEM Methodology + Twig.js
Stars: ✭ 102 (-35.03%)
Mutual labels:  webpack4, babel, browsersync
Webpack-Starter-Kit
Webpack 4 stater kit with SCSS, PostCSS, Babel & ESLint
Stars: ✭ 41 (-73.89%)
Mutual labels:  babel, browsersync, webpack4
Webpack4.x
webpack4.x详细配置步骤
Stars: ✭ 103 (-34.39%)
Mutual labels:  webpack4, scss
Wordless
All the power of Pug, Sass, Coffeescript and WebPack in your WordPress theme. Stop writing themes like it's 1998.
Stars: ✭ 1,374 (+775.16%)
Mutual labels:  babel, scss
Bootstrap 4 Sass Gulp 4 Boilerplate
A Bootstrap 4.5.2 boilerplate with font-awesome, sass, gulp 4 tasks
Stars: ✭ 103 (-34.39%)
Mutual labels:  scss, browsersync
Html Sass Babel Webpack Boilerplate
Webpack 4 + Babel + ES6 + SASS + HTML Modules + Livereload
Stars: ✭ 35 (-77.71%)
Mutual labels:  webpack4, scss
Webpack Seed
🚀 A Multi-Page Application base on webpack and babel. webpack搭建基于ES6,支持模板的多页面项目
Stars: ✭ 113 (-28.03%)
Mutual labels:  webpack4, babel
React Bootstrap Webpack Starter
ReactJS 16.4 + new React Context API +react Router 4 + webpack 4 + babel 7+ hot Reload + Bootstrap 4 + styled-components
Stars: ✭ 103 (-34.39%)
Mutual labels:  webpack4, babel
Frasco
Quick starter for Jekyll including full setup for Sass, PostCSS, Autoprefixer, stylelint, Webpack, ESLint, imagemin, Browsersync, etc.
Stars: ✭ 123 (-21.66%)
Mutual labels:  scss, browsersync
Gulp Starter Kit
A simple Gulp 4 Starter Kit for modern web development.
Stars: ✭ 134 (-14.65%)
Mutual labels:  babel, scss
Vue Mpc
multiple pages (multiple entries) based on vue-cli3.x(基于vue-cli3.x创建的多页面应用,每个页面入口又可以创建自己的vue-router)
Stars: ✭ 97 (-38.22%)
Mutual labels:  webpack4, scss
Nextjs Full Demo
Demo about integration between examples of next.js and also fix some issues during development
Stars: ✭ 76 (-51.59%)
Mutual labels:  babel, scss
Web Starter Kit
Web Starter Kit is an opinionated boilerplate for web development. A solid starting point for both professionals and newcomers to the industry.
Stars: ✭ 130 (-17.2%)
Mutual labels:  scss, browsersync
Webpack Pug Scss Boilerplate
📂 Webpack 4 based boilerplate for building apps
Stars: ✭ 135 (-14.01%)
Mutual labels:  webpack4, scss
React Starter
A basic template that consists of the essential elements that are required to start building a React (v16.3) application using Webpack (v4)
Stars: ✭ 108 (-31.21%)
Mutual labels:  babel, scss
Generator Phaser Plus
[🛑 DISCONTINUED] It has been a long journey but development of `generator-phaser-plus` is now over. I recommend you have a look and fork `yandeu/phaser-project-template` instead.
Stars: ✭ 148 (-5.73%)
Mutual labels:  babel, browsersync
Minimal React Webpack Babel Setup
The minimal React, Webpack, Babel Setup. You want to get beyond create-react-app?
Stars: ✭ 777 (+394.9%)
Mutual labels:  webpack4, babel
Wordpress Starter
📦 A starter template for WordPress websites
Stars: ✭ 26 (-83.44%)
Mutual labels:  babel, browsersync
Fast
Develop, build, deploy, redeploy, and teardown frontend projects fast.
Stars: ✭ 126 (-19.75%)
Mutual labels:  babel, scss

Shopify ThemeKit - Webpack

GitHub tag (latest SemVer) GitHub issues GitHub license GitHub stars GitHub forks

Development tool for Shopify using webpack and themekit.

Check out the node package version: Shopify Packer

  1. Requirements
  2. Getting Started
  3. Theme files
  4. Commands

Features

  • Ready to use blank starter theme
  • Webpack 4
  • Stylelint
  • ESLint
  • Babel
  • Middleware for Shopify preview
  • Webpack dev server for assets
  • BrowserSync
  • Chunks for templates and layouts

Requirements

  • Create config.js (see example.config.js)

Getting Started

  1. Install dependencies - npm install

  2. Start webpack compiler - npm run start

npm run deploy

Theme files

Webpack will create the following snippets that load all style and script chunks. You need to include this in your theme.liquid file.

 {% include 'script-tags' %}
 {% include 'style-tags' %}

Creating chunks

The system will check for any script or style sheet that matches Shopify template and layout files.

filename: scripts/templates/product.js

creates file: assets/template.product.js

script-tags snippet (auto generated) will only load this script on pages that use product template

{%- if template == 'product' -%}
<script type="text/javascript" src="{{ 'template.product.js' | asset_url }}" defer="defer"></script>
{%- else -%}
<link rel="prefetch" href="{{ 'template.product.js' | asset_url }}" as="script">
{%- endif -%}

Commands

Start - Watches files for changes and deploys changes to Shopify. Also builds and deploys all theme files to Shopify before starting

npm run start

Watch - Watches files for changes and deploys changes to Shopify. Skips first deployment.

npm run watch

Build - Builds js/scss in production mode

npm run build

Deploy - Deploys the contents of dist folder

npm run deploy

Test - Runs all tests and code linters

npm run test

Lint CSS - Checks scss for errors and best practices.

npm run lint:css

Lint JS - Checks js for errors and best practices.

npm run lint:js

Fix CSS - Checks scss for errors and best practices. Automatically fixes simple errors like line endings

npm run fix:css

Fix jS - Checks js for errors and best practices. Automatically fixes simple errors.

npm run fix:js

Linting

This project uses stylelint and eslint for checking css and js.

linter

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].