Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
The scripts portion of a package.json file used for Shopify theme development

The scripts portion of a package.json file used for Shopify theme development.

To run use the command npm run build.

Watch and build JS files in the _src/js/ folder. This will create a minified file and a debug version (including a sourcemap) for development, and add them to the assets folder.

We also watch for changes the main theme.js file in the assets folder and then minify this for production.

{
"scripts": {
"build": "npm-run-all --parallel build:*",
"build:themeJS": "watch 'npm run themeJS' ./assets/ --filter=_tasks/theme-js-watch.js",
"themeJS": "uglifyjs ./assets/theme.js -c -m > ./assets/theme.min.js",
"build:core": "npm-run-all --parallel build:core:*",
"build:core:debug": "watchify -v --debug ./_src/js/core.js -o ./assets/core.js",
"build:core:min": "watchify ./_src/js/core.js -v -o 'uglifyjs -c -m > ./assets/core.min.js'",
"build:product": "npm-run-all --parallel build:product:*",
"build:product:debug": "watchify --debug ./_src/js/product.js -v -o ./assets/product.js",
"build:product:min": "watchify ./_src/js/product.js -v -o 'uglifyjs -c -m > ./assets/product.min.js'",
"build:collection": "npm-run-all --parallel build:collection:*",
"build:collection:debug": "watchify --debug ./_src/js/collection.js -v -o ./assets/collection.js",
"build:collection:min": "watchify ./_src/js/collection.js -v -o 'uglifyjs -c -m > ./assets/collection.min.js'",
"build:subscriptions": "npm-run-all --parallel build:subscriptions:*",
"build:subscriptions:debug": "watchify --debug ./_src/js/subscriptions.js -v -o ./assets/subscriptions.js",
"build:subscriptions:min": "watchify ./_src/js/subscriptions.js -v -o 'uglifyjs -c -m > ./assets/subscriptions.min.js'",
"build:mini-cart": "npm-run-all --parallel build:mini-cart:*",
"build:mini-cart:debug": "watchify --debug ./_src/js/mini-cart.js -v -o ./assets/mini-cart.js",
"build:mini-cart:min": "watchify ./_src/js/mini-cart.js -v -o 'uglifyjs -c -m > ./assets/mini-cart.min.js'",
"build:mc-popup": "npm-run-all --parallel build:mc-popup:*",
"build:mc-popup:debug": "watchify --debug ./_src/js/mc-popup.js -v -o ./assets/mc-popup.js",
"build:mc-popup:min": "watchify ./_src/js/mc-popup.js -v -o 'uglifyjs -c -m > ./assets/mc-popup.min.js'",
"build:polyfills": "watchify ./_src/js/polyfills.js -o 'uglifyjs -c -m > ./assets/polyfills.min.js'"
},
"devDependencies": {
"npm-run-all": "^4.1.3",
"uglify-es": "^3.3.9",
"watch": "^1.0.2",
"watchify": "^3.11.0"
}
}
/*
We want to minify theme.js if there are any changes, but we don't want a
recursive loop when watching the assets directory
*/
module.exports = function (file) {
if (file === 'assets/theme.js') {
return true;
}
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment