{"id":34001620,"url":"https://github.com/delaneymethod/craft-mix","last_synced_at":"2026-04-06T07:02:01.891Z","repository":{"id":24801272,"uuid":"102476652","full_name":"delaneymethod/craft-mix","owner":"delaneymethod","description":"Helper plugin for Laravel Mix in Craft CMS templates.","archived":false,"fork":false,"pushed_at":"2022-05-09T10:14:49.000Z","size":101,"stargazers_count":6,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-12-14T22:07:23.990Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"PHP","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/delaneymethod.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-09-05T12:09:44.000Z","updated_at":"2022-05-09T07:15:10.000Z","dependencies_parsed_at":"2022-08-07T11:01:21.450Z","dependency_job_id":null,"html_url":"https://github.com/delaneymethod/craft-mix","commit_stats":null,"previous_names":[],"tags_count":9,"template":false,"template_full_name":null,"purl":"pkg:github/delaneymethod/craft-mix","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/delaneymethod%2Fcraft-mix","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/delaneymethod%2Fcraft-mix/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/delaneymethod%2Fcraft-mix/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/delaneymethod%2Fcraft-mix/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/delaneymethod","download_url":"https://codeload.github.com/delaneymethod/craft-mix/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/delaneymethod%2Fcraft-mix/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31463015,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-05T21:22:52.476Z","status":"online","status_checked_at":"2026-04-06T02:00:07.287Z","response_time":112,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-12-13T09:56:39.962Z","updated_at":"2026-04-06T07:02:01.886Z","avatar_url":"https://github.com/delaneymethod.png","language":"PHP","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://github.com/delaneymethod/craft-mix/blob/master/resources/img/craft-mix.png\" width=\"300px\" alt=\"Craft Mix Logo\"\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  Helper plugin for \u003ca href=\"https://github.com/JeffreyWay/laravel-mix/\"\u003eLaravel Mix\u003c/a\u003e in \u003ca href=\"https://github.com/craftcms/cms/\"\u003eCraft CMS\u003c/a\u003e templates.\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://packagist.org/packages/delaneymethod/craft-mix/\"\u003e\n    \u003cimg src=\"https://poser.pugx.org/delaneymethod/craft-mix/d/total.svg\" alt=\"Total Downloads\"\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://packagist.org/packages/delaneymethod/craft-mix/\"\u003e\n    \u003cimg src=\"https://poser.pugx.org/delaneymethod/craft-mix/v/stable.svg\" alt=\"Latest Stable Version\"\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://packagist.org/packages/delaneymethod/craft-mix/\"\u003e\n    \u003cimg src=\"https://poser.pugx.org/delaneymethod/craft-mix/license.svg\" alt=\"License\"\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n## Requirements\n\n  * Craft CMS 3.7+\n  * PHP\n  * Node.js 6+\n\n## Installation\n\nTo install the plugin, follow these instructions.\n\n1. Open your terminal and go to your Craft project:\n\n```bash\ncd /path/to/project\n```\n\n2. Then tell Composer to load the plugin:\n\n```bash\ncomposer require delaneymethod/craft-mix\n```\n\n3. In the Craft Control Panel, go to Settings → Plugins and click the \"Install\" button for **Craft Mix**.\n\n4. Create a `package.json` file with the following contents to install Laravel Mix dependencies and configure asset build tasks.\n\n```json\n{\n\t\"private\": true,\n\t\"scripts\": {\n\t\t\"dev\": \"npm run development\",\n\t\t\"development\": \"cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js\",\n\t\t\"watch\": \"cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js\",\n\t\t\"watch-poll\": \"npm run watch -- --watch-poll\",\n\t\t\"hot\": \"cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js\",\n\t\t\"prod\": \"npm run production\",\n\t\t\"production\": \"cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js\"\n\t},\n\t\"devDependencies\": {\n\t\t\"cross-env\": \"^7.0.3\",\n\t\t\"laravel-mix\": \"^6.0.41\"\n\t}\n}\n```\n\nInstall the Node.js dependencies using `npm` or `yarn`.\n\n```bash\nnpm install # OR yarn install\n```\n\n## Configuration\n\nTo configure Craft Mix go to Settings → Plugins → Craft Mix in the Craft Control Panel.\n\nThe available settings are:\n\n  * **Public Path** - The path of the public directory containing the index.php\n  * **Asset Path** - The path of the asset directory where Laravel Mix stores the compiled files\n\nTo demonstrate usage of the plugin, let's imagine a project with the following directory structure.\n\n```\n...\nassets/\n  js/\n    global.js\n  scss/\n    global.scss\nweb/\n  assets/\n    js/\n    css/\n...\n```\n\nCreate a `webpack.mix.js` file at the root of your project to configure Laravel Mix for building your assets. See the [Laravel Mix](https://laravel.com/docs/5.5/mix) documentation for configuration details and more options. Be sure to configure the `publicPath` option to point at the directory from which you will serve static assets (images, fonts, javascript and CSS). Here's an example configuration as a starting point that would work with the previously described project structure:\n\n```js\nconst del = require('del');\nconst { mix } = require('laravel-mix');\n\ndel(['web/assets/**', '!web/assets']);\n\nmix.setPublicPath('web/assets');\n\nif (mix.inProduction) {\n    mix.disableNotifications();\n}\n\nif (!mix.inProduction) {\n\tmix.sourceMaps();\n}\n\nmix.options({\n\tprocessCssUrls: false\n});\n\nmix.sass('assets/sass/global.scss', 'web/assets/css/global.css');\n\nmix.js('assets/js/global.js', 'web/assets/js/global.js');\n\nmix.copy('assets/fonts', 'web/assets/fonts');\n\nmix.copy('assets/img', 'web/assets/img');\n\nmix.version();\n```\n\n## Usage\n\nThe primary purpose of this plugin is to provide template helpers that translate between a known path to your build assets and the real path to the assets after they have been built (which varies depending on the build mode). There are three main ways you can use Mix from Twig templates in CraftCMS:\n\n```twig\n{# Twig Filter #}\n\u003cscript type=\"text/javascript\" src=\"{{ 'js/global.js' | mix }}\"\u003e\u003c/script\u003e\n\n\u003clink rel=\"stylesheet\" href=\"{{ 'css/global.css' | mix }}\"\u003e\n\n{# Twig Function #}\n\u003cscript type=\"text/javascript\" src=\"{{ mix('js/global.js') }}\"\u003e\u003c/script\u003e\n\n\u003clink rel=\"stylesheet\" href=\"{{ mix('css/global.cs') }}\"\u003e\n\n{# CraftCMS Variable #}\n\u003cscript type=\"text/javascript\" src=\"{{ craft.mix.withTag('js/global.js') }}\"\u003e\u003c/script\u003e\n\n{{ craft.mix.withTag(\\'css/global.css\\') | raw }}\n\n// include the content of a versioned file inline.\n{{ craft.mix.withTag(\\'css/global.css\\', true) | raw }}\n```\n\nThere are a handful of different modes in which you can run Mix and the plugin will work differently in each mode, as described in the following sections.\n\n### Dev Mode\n\nDev mode will build your assets to target a development environment. Depending on how you've configured Mix, this may bypass certain build instructions intended only for the production environment. In the example `webpack.mix.js` file, we are only versioning assets in production mode for cache busting or similar use cases. You can build the assets for developer mode by using the `npm` script we added in our `package.json` file:\n\n```bash\nnpm run dev\n```\n\n### Watch Mode\n\nFunctions just like Dev Mode except Mix will continue running as a foreground process through NodeJS and building assets as changes to the source files are detected.\n\n```bash\nnpm run watch\n```\n\n### Hot Module Replacement Mode\n\nBuilds your assets and runs the Webpack dev server to allow [Hot Module Replacement](https://webpack.js.org/concepts/hot-module-replacement/). It works very similarly to what is described in the [Laravel Mix](https://github.com/JeffreyWay/laravel-mix/blob/master/docs/hot-module-replacement.md) documentation. To run in HMR mode, run the following command:\n\n```bash\nnpm run hot\n```\n\n### Production Mode\n\nor bundle your assets for production\n\n```bash\nnpm run production\n```\n\n## Credits\n\n* [Sean Delaney](https://github.com/seandelaney)\n\n## About DelaneyMethod\n\nDelaneyMethod are a Full-Stack Web Development Agency with a no-nonsense, get it done attitude with a proven track record for delivering their part of a project. Learn more about us on [our website](http://www.delaneymethod.com).\n\n## License\n\nThe MIT License (MIT). Please see [License File](LICENSE) for more information.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdelaneymethod%2Fcraft-mix","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdelaneymethod%2Fcraft-mix","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdelaneymethod%2Fcraft-mix/lists"}