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

mikenorthorp/gulp-shopify-upload: gulp plugin to watch and upload files to Shopi ...

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

开源软件名称(OpenSource Name):

mikenorthorp/gulp-shopify-upload

开源软件地址(OpenSource Url):

https://github.com/mikenorthorp/gulp-shopify-upload

开源编程语言(OpenSource Language):

JavaScript 100.0%

开源软件介绍(OpenSource Introduction):

gulp-shopify-upload

Introduction

gulp-shopify-upload is a Gulpjs plugin used to watch and upload theme files to Shopify. By using this plugin you can watch and deploy all of the different folders in a Shopify theme and have them automatically deploy to your Shopify store. This is more lightweight than using Shopifys inline theme editor or desktop theme editor, and works on all platforms that support Node (Windows, Mac and Linux).

This is a port of a similar plugin using Grunt called grunt-shopify, thank you to the author for making a great plugin for Shopify.

Features

  • Uploads any file changes to Shopify in the folders: assets, layout, config, snippets, templates, locales.
  • Automatically uploads changes to the current working theme in Shopify unless a themeid is specified.
  • Supports incremental file changes as well as a full site deploy for continuous integration.
  • Lightweight and fast, changes are uploaded instantly.

Basic Usage

  1. Download whatever theme you are working on from Shopify to a local directory
  2. Create a private app in Shopify and get the API Key and Password for it.
  3. Your folder structure and gulpfile.js should have look something like below
shopifyTheme/
|-- gulpfile.js
|-- assets/
|-- config/
|-- layout/
|-- locales/
|-- snippets/
|-- templates/

Example Gulpfile

// Gulp plugin setup
var gulp = require('gulp');
// Watches single files
var watch = require('gulp-watch');
var gulpShopify = require('gulp-shopify-upload');

gulp.task('shopifywatch', function() {
  return watch('./+(assets|layout|config|snippets|templates|locales)/**')
.pipe(gulpShopify('API KEY', 'PASSWORD', 'MYSITE.myshopify.com', 'THEME ID'));
});

// Default gulp action when gulp is run
gulp.task('default', [
  'shopifywatch'
]);
  1. The basic function call looks like
gulpShopify('API KEY', 'PASSWORD', 'MYSITE.myshopify.com', 'THEME ID')
- `API KEY` is the API Key generated when creating a private app in Shopify
- `PASSWORD` is the Password generated when creating a private app in Shopify
- `MYSITE.myshopify.com` is the URL of your shop
- `THEME ID` is the ID of your theme and is **OPTIONAL**, if not passed in, the current working theme will be used
  1. Run npm install gulp gulp-watch gulp-shopify-upload
  2. Run gulp and edit one of your theme files, it should automatically be uploaded to Shopify

Advanced Usage

Customize Your Base Deployment Path If your project structure is different (perhaps you use Gulpjs to compile your theme to another directory), you can change the directory from which the plugin picks up files. To do so, simply provide an additional options hash to function call, with a basePath property.

var options = {
  "basePath": "some/other-directory/"
};

// With a theme id
gulpShopify('API KEY', 'PASSWORD', 'MYSITE.myshopify.com', 'THEME ID', options)

// Without a theme id
gulpShopify('API KEY', 'PASSWORD', 'MYSITE.myshopify.com', null, options)

Deploy the Entire Site You can also deploy the entire site for use with continuous integration.

gulp.task('deploy', ['build'], function() {
  return gulp.src('./+(assets|layout|config|snippets|templates|locales)/**')
    .pipe(gulpShopify('API KEY', 'PASSWORD', 'MYSITE.myshopify.com', 'THEME ID'));
;
});

Created by Able Sense Media - 2015




鲜花

握手

雷人

路过

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

请发表评论

全部评论

专题导读
上一篇:
furzeface/gulp-cache-bust: ⚠️ not maintained发布时间:2022-06-21
下一篇:
trentearl/gulp-css-url-adjuster: adjust css urls for images and stuff发布时间:2022-06-21
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

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

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

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