Laravel Mix HubSpot Extension

This is a Laravel Mix Extension for HubSpot Local Development

let mix = require('laravel-mix');
(require('@igomoon/hubspot-laravel-mix')(mix))

Usage

1. Setup package.json and webpack.mix.js using the examples below.
2. Run npm install
3. Run npm run local so Laravel Mix will install the dependencies need according to your mix config file.
   • IMPORTANT: Due to an error within the current version of the @hubspot/webpack-cms-plugins package, it is unable to be installed by Laravel Mix automatically. It should be included in your starting package.json file or by running npm install @hubspot/webpack-cms-plugins --save-dev.
4. Run hs init to use @hubspot/cli to authenticate with your HubSpot portal
5. Use one of the included npm scripts in our example package.json to begin
   • npm run local - Build in "development" mode
   • npm run watch - Build in "development" mode, and watch for changes (will upload to HubSpot)
   • npm run build - Build once in "development" mode (will upload to HubSpot)
   • npm run deploy - Build once in "production" mode (will upload to HubSpot)

Option: "hsSilent=true"

You can use "hsSilent" to mute the HubSpot Logger Information

mix watch -- --env hsAutoUpload=true "hsSilent=true"

Example package.json

{
	"scripts": {
		"local": "mix",
		"watch": "mix watch -- --env hsAutoUpload=true",
		"build": "mix -- --env hsAutoUpload=true",
		"deploy": "mix --production -- --env hsAutoUpload=true"
	},
	"devDependencies": {
		"@hubspot/webpack-cms-plugins": "^3.0.9",
		"@igomoon/hubspot-laravel-mix": "^1.0.0",
		"laravel-mix": "^6.0.39"
	}
}

Example webpack.mix.js

let mix = require('laravel-mix');
(require('@igomoon/hubspot-laravel-mix')(mix))

mix.js(`src/resources/js/main.js`, `assets/js/main.js`);

mix.sass(`src/resources/scss/main.dev.scss`, `assets/css/main.css`, {
	sassOptions: {
		indentWidth: 4,
		outputStyle: `expanded` // expanded | compressed
	}
});

mix.hubspot({
	Label: 'My Theme',
	Upload: {
		outputFolder: 'dist',
		dest: 'theme-folder',
		patterns: [
			{ from: 'src/hubl', to: 'hubl' },
			{ from: 'src/theme.json', to: 'theme.json' },
			{ from: 'src/resources/images', to: 'assets/images' },
			{ from: 'src/resources/icons', to: 'assets/icons' }
		]
	},
	FieldsJs: {
		extraDirsToWatch: ["./src/fields"]
	}
})

mix.options({
	manifest: false, // Disable manifest generation.
	processCssUrls: false, 	// Don't perform any css url rewriting by default
	autoprefixer: { remove: true } // Remove Outdated prefixes
})

This extensions uses:

• copy-webpack-plugin
• @hubspot/webpack-cms-plugins
• @igomoon/hubspot-fields-js
• webpack-build-notifier (Will override the Mix default)