• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    迪恩网络公众号

jasewarner/gulp-shopify: Blank slate Shopify theme for Developers, packaged with ...

原作者: [db:作者] 来自: 网络 收藏 邀请

开源软件名称(OpenSource Name):

jasewarner/gulp-shopify

开源软件地址(OpenSource Url):

https://github.com/jasewarner/gulp-shopify

开源编程语言(OpenSource Language):

Liquid 97.3%

开源软件介绍(OpenSource Introduction):

Gulp + Shopify

Version: 2.0.3

Author

Jase Warner ( https://jase.io )

If this project has been a helping hand to you, feel free to give this grateful developer a coffee ☕️

Synopsis

Update: 2021/09/15 – This project has been updated to support Shopify CLI and Online Store 2.0 features.

Gulp + Shopify is for Developers wishing to use Gulp.js in combination with Shopify CLI to develop Shopify themes – 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 the latest syntax without worrying about browser support.

The theme Liquid and JSON files are all blank canvases – zero faffing, meaning you can crack on with the build right away.

The theme includes the Bootstrap 5 grid and reboot scss files. These can be removed in theme.scss.liquid and password.scss.liquid, or, if you so wish, 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 and then gulp watch.

Any changes to the SCSS files in dev/sass/ will be reflected in theme.css.liquid and/or password.css.liquid in assets.

Any alterations to the JS files in dev/js/ will be concatenated and uglified in assets to theme.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.

Shopify CLI

To get Shopify CLI up and running, follow the instructions here.

To get started on your theme, follow these instructions.

Important: Unfortunately the Shopify CLI hot reload feature fires too soon for Shopify to serve any updated assets, such as CSS or JS. I’ve only been working with Shopify CLI for a couple of weeks now, so maybe I’ve missed something, but I’m finding that a manual reload (delayed by a second or two) is still required after every change.

Features

The Gulp build features the following helpful packages:

Credits




鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
chmontgomery/gulp-help: Adds a default help task to gulp and provides the abilit ...发布时间:2022-06-22
下一篇:
desenmeng/learning-gulp发布时间:2022-06-22
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap