-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Sean Delaney
committed
Jan 20, 2022
0 parents
commit 6478af8
Showing
14 changed files
with
763 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,32 @@ | ||
# CRAFT ENVIRONMENT | ||
.env.php | ||
.env.sh | ||
.env | ||
|
||
# COMPOSER | ||
/vendor | ||
|
||
# BUILD FILES | ||
/bower_components/* | ||
/node_modules/* | ||
/build/* | ||
/yarn-error.log | ||
|
||
# MISC FILES | ||
.cache | ||
.DS_Store | ||
.idea | ||
.project | ||
.settings | ||
*.esproj | ||
*.sublime-workspace | ||
*.sublime-project | ||
*.tmproj | ||
*.tmproject | ||
.vscode/* | ||
!.vscode/settings.json | ||
!.vscode/tasks.json | ||
!.vscode/launch.json | ||
!.vscode/extensions.json | ||
config.codekit3 | ||
prepros-6.config |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,30 @@ | ||
# Changelog | ||
|
||
## 1.0.7 - 2022-01-20 | ||
|
||
### Updates | ||
- Renamed the project to Craft Mix | ||
|
||
## 1.0.6 - 2022-01-20 | ||
|
||
### Updates | ||
- Updated CraftCMS minimum version | ||
|
||
## 1.0.5 - 2022-01-20 | ||
|
||
### Fixes | ||
- Fixed Dependabot alerts. | ||
|
||
## 1.0.4 - 2012-09-01 | ||
|
||
### Fixes | ||
- Fixed Dependabot alerts. | ||
|
||
## 1.0.1 - 2017-09-05 | ||
|
||
### Changed | ||
- Fixes. | ||
|
||
## 1.0.0 - 2017-09-05 | ||
### Added | ||
- Initial release. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,9 @@ | ||
The MIT License (MIT) | ||
|
||
Copyright (c) 2017 DelaneyMethod Web Development Ltd. | ||
|
||
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: | ||
|
||
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. | ||
|
||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,198 @@ | ||
<p align="center"> | ||
<img src="https://github.com/delaneymethod/craft-mix/blob/master/resources/img/craft-mix.png" width="300px" alt="Craft Mix Logo"> | ||
</p> | ||
|
||
<p align="center"> | ||
Helper plugin for <a href="https://github.com/JeffreyWay/laravel-mix/">Laravel Mix</a> in <a href="https://github.com/craftcms/cms/">Craft CMS</a> templates. | ||
</p> | ||
|
||
<p align="center"> | ||
<a href="https://packagist.org/packages/delaneymethod/craft-mix/"> | ||
<img src="https://poser.pugx.org/delaneymethod/craft-mix/d/total.svg" alt="Total Downloads"> | ||
</a> | ||
<a href="https://packagist.org/packages/delaneymethod/craft-mix/"> | ||
<img src="https://poser.pugx.org/delaneymethod/craft-mix/v/stable.svg" alt="Latest Stable Version"> | ||
</a> | ||
<a href="https://packagist.org/packages/delaneymethod/craft-mix/"> | ||
<img src="https://poser.pugx.org/delaneymethod/craft-mix/license.svg" alt="License"> | ||
</a> | ||
</p> | ||
|
||
## Requirements | ||
|
||
* Craft CMS 3.7+ | ||
* PHP | ||
* Node.js 6+ | ||
|
||
## Installation | ||
|
||
To install the plugin, follow these instructions. | ||
|
||
1. Open your terminal and go to your Craft project: | ||
|
||
```bash | ||
cd /path/to/project | ||
``` | ||
|
||
2. Then tell Composer to load the plugin: | ||
|
||
```bash | ||
composer require delaneymethod/craft-mix | ||
``` | ||
|
||
3. In the Craft Control Panel, go to Settings → Plugins and click the "Install" button for **Craft Mix**. | ||
|
||
4. Create a `package.json` file with the following contents to install Laravel Mix dependencies and configure asset build tasks. | ||
|
||
```json | ||
{ | ||
"private": true, | ||
"scripts": { | ||
"dev": "npm run development", | ||
"development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js", | ||
"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", | ||
"watch-poll": "npm run watch -- --watch-poll", | ||
"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", | ||
"prod": "npm run production", | ||
"production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js" | ||
}, | ||
"devDependencies": { | ||
"cross-env": "^7.0.3", | ||
"laravel-mix": "^6.0.41" | ||
} | ||
} | ||
``` | ||
|
||
Install the Node.js dependencies using `npm` or `yarn`. | ||
|
||
```bash | ||
npm install # OR yarn install | ||
``` | ||
|
||
## Configuration | ||
|
||
To configure Craft Mix go to Settings → Plugins → Craft Mix in the Craft Control Panel. | ||
|
||
The available settings are: | ||
|
||
* **Public Path** - The path of the public directory containing the index.php | ||
* **Asset Path** - The path of the asset directory where Laravel Mix stores the compiled files | ||
|
||
To demonstrate usage of the plugin, let's imagine a project with the following directory structure. | ||
|
||
``` | ||
... | ||
assets/ | ||
js/ | ||
global.js | ||
scss/ | ||
global.scss | ||
web/ | ||
assets/ | ||
js/ | ||
css/ | ||
... | ||
``` | ||
|
||
Create 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: | ||
|
||
```js | ||
const del = require('del'); | ||
const { mix } = require('laravel-mix'); | ||
|
||
del(['web/assets/**', '!web/assets']); | ||
|
||
mix.setPublicPath('web/assets'); | ||
|
||
if (mix.inProduction) { | ||
mix.disableNotifications(); | ||
} | ||
|
||
if (!mix.inProduction) { | ||
mix.sourceMaps(); | ||
} | ||
|
||
mix.options({ | ||
processCssUrls: false | ||
}); | ||
|
||
mix.sass('assets/sass/global.scss', 'web/assets/css/global.css'); | ||
|
||
mix.js('assets/js/global.js', 'web/assets/js/global.js'); | ||
|
||
mix.copy('assets/fonts', 'web/assets/fonts'); | ||
|
||
mix.copy('assets/img', 'web/assets/img'); | ||
|
||
mix.version(); | ||
``` | ||
|
||
## Usage | ||
|
||
The 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: | ||
|
||
```twig | ||
{# Twig Filter #} | ||
<script type="text/javascript" src="{{ 'js/global.js' | mix }}"></script> | ||
<link rel="stylesheet" href="{{ 'css/global.css' | mix }}"> | ||
{# Twig Function #} | ||
<script type="text/javascript" src="{{ mix('js/global.js') }}"></script> | ||
<link rel="stylesheet" href="{{ mix('css/global.cs') }}"> | ||
{# CraftCMS Variable #} | ||
<script type="text/javascript" src="{{ craft.mix.withTag('js/global.js') }}"></script> | ||
{{ craft.mix.withTag(\'css/global.css\') | raw }} | ||
// include the content of a versioned file inline. | ||
{{ craft.mix.withTag(\'css/global.css\', true) | raw }} | ||
``` | ||
|
||
There 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. | ||
|
||
### Dev Mode | ||
|
||
Dev 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: | ||
|
||
```bash | ||
npm run dev | ||
``` | ||
|
||
### Watch Mode | ||
|
||
Functions 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. | ||
|
||
```bash | ||
npm run watch | ||
``` | ||
|
||
### Hot Module Replacement Mode | ||
|
||
Builds 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: | ||
|
||
```bash | ||
npm run hot | ||
``` | ||
|
||
### Production Mode | ||
|
||
or bundle your assets for production | ||
|
||
```bash | ||
npm run production | ||
``` | ||
|
||
## Credits | ||
|
||
* [Sean Delaney](https://github.com/seandelaney) | ||
|
||
## About DelaneyMethod | ||
|
||
DelaneyMethod 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). | ||
|
||
## License | ||
|
||
The MIT License (MIT). Please see [License File](LICENSE) for more information. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,61 @@ | ||
{ | ||
"name": "delaneymethod/craft-mix", | ||
"description": "Helper plugin for Laravel Mix in Craft CMS templates.", | ||
"version": "1.0.7", | ||
"type": "craft-plugin", | ||
"license": "MIT", | ||
"keywords": [ | ||
"craft", | ||
"cms", | ||
"craftcms", | ||
"yii2", | ||
"craft-plugin", | ||
"mix", | ||
"craft-mix", | ||
"craft3", | ||
"laravel", | ||
"delaneymethod" | ||
], | ||
"support": { | ||
"email": "[email protected]", | ||
"issues": "https://github.com/delaneymethod/craft-mix/issues?state=open", | ||
"source": "https://github.com/delaneymethod/craft-mix", | ||
"docs": "https://github.com/delaneymethod/craft-mix", | ||
"rss": "https://github.com/delaneymethod/craft-mix/commits/master.atom" | ||
}, | ||
"authors": [ | ||
{ | ||
"name": "DelaneyMethod", | ||
"email": "[email protected]", | ||
"homepage": "http://www.delaneymethod.com" | ||
} | ||
], | ||
"require": { | ||
"craftcms/cms": "^3.7" | ||
}, | ||
"repositories": [ | ||
{ | ||
"type": "composer", | ||
"url": "https://asset-packagist.org" | ||
} | ||
], | ||
"autoload": { | ||
"psr-4": { | ||
"delaneymethod\\craftMix\\": "src/" | ||
} | ||
}, | ||
"extra": { | ||
"name": "Craft Mix", | ||
"handle": "craft-mix", | ||
"schemaVersion": "1.0.0", | ||
"documentationUrl": "https://github.com/delaneymethod/craft-mix/blob/master/README.md", | ||
"changelogUrl": "https://raw.githubusercontent.com/delaneymethod/craft-mix/master/CHANGELOG.md", | ||
"downloadUrl": "https://github.com/delaneymethod/craft-mix/archive/master.zip", | ||
"hasCpSettings": true, | ||
"hasCpSection": false, | ||
"components": { | ||
"craftMix": "delaneymethod\\craftMix\\services\\CraftMixService" | ||
}, | ||
"class": "delaneymethod\\craftMix\\CraftMix" | ||
} | ||
} |
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Oops, something went wrong.