README

安装

此项目使用composer。

$ composer require danialrahimy/meta-laravel

用法

执行以下步骤

默认情况下，配置文件路径为 /resources/etc/sourcesHtml.json

所以按照这种格式生成配置文件

{
    "sassToCss": {
        "client": [
            "resources/sass/client/styles.scss"
        ],
        "shared": [],
        "admin": []
    },
    "minify": {
        "client": {
            "home": {
                "js": [
                    "resources/vendor/jquery/v3.3.1/js/jquery.min.js",
                    "resources/vendor/popper/v2019/js/popper.min.js",
                    "resources/vendor/bootstrap/v4.3.1/js/bootstrap.min.js",
                    "resources/vendor/jqueryEasing/v1.3/js/jquery.easing.min.js",
                    "resources/vendor/swiper/v4.4.6/js/swiper.min.js",
                    "resources/vendor/magnific/v1.1.0/js/jquery.magnific-popup.js",
                    "resources/vendor/validator/v0.11.8/js/validator.min.js",
                    "resources/js/client/scripts.js"
                ],
                "css": [
                    "resources/vendor/bootstrap/v4.3.1/css/bootstrap.css",
                    "resources/vendor/fontawesome/v5.0.13/css/fontawesome-all.css",
                    "resources/vendor/swiper/v4.4.6/css/swiper.css",
                    "resources/vendor/magnific/v1.1.0/css/magnific-popup.css",
                    "resources/css/client/styles.css"
                ]
            }
        },
        "admin": {},
        "shared": {}
    }
}

将以下代码添加到或替换（根据您的需求）项目根目录中的 webpack.mix.js

const mix = require('laravel-mix');
const fs = require('fs');
const env = require('dotenv');

const config = env.config({path: '.env'})["parsed"];
let data = fs.readFileSync("resources/etc/sourcesHtml.json", 'utf8');
data = JSON.parse(data);

if (!data.hasOwnProperty("minify")){

    console.error("Config File {sourcesHtml.json} must be has minify key");
    return;
}

if (data.hasOwnProperty("sassToCss")){

    let i, j;

    for (i in data["sassToCss"]){

        for (j in data["sassToCss"][i]){

            mix.sass(data["sassToCss"][i][j], `public/css/${i}`)
        }
    }
}

if (data.hasOwnProperty("minify")){

    let type, id, category;
    let list = {}

    for (category in data["minify"]){

        for (id in data["minify"][category]){

            for (type in data["minify"][category][id]){

                if (!list.hasOwnProperty(type))
                    list[type] = {};

                if (!list[type].hasOwnProperty(category))
                    list[type][category] = {};

                list[type][category][id] = data["minify"][category][id][type]
            }
        }
    }

    for (type in list){

        for (category in list[type]){

            for (id in list[type][category]){

                if (type === "js")
                    mix.scripts(list[type][category][id], `public/${type}/${category}/${id}.js`);

                if (type === "css")
                    mix.styles(list[type][category][id], `public/${type}/${category}/${id}.css`);
            }
        }
    }
}

继续，在项目根目录的 .env 文件中创建一个新的键 VERSION=dev。在项目处于生产模式时也可以设置为 prod

让我们使用

要描述配置文件，有两个主要键

1. sassToCss

   • 在这个对象中可以定义多个键，它们是包含Sass文件路径的数组，这些文件被编译成CSS文件，根据键进行编译，例如client，这个数组中的Sass文件编译后的文件将放在 /public/css/client 目录中

2. minify

   • 在这个对象中可以定义多个键（它们可以是您的主要类别），它们是对象，在它们的对象中可以有多个键（它们可以是您的子类别），并且它们也是对象，包含以下键：1.js 2.css，它们是包含CSS和JS文件路径的数组。
   • 当使用 VERSION=dev 时，CSS和JS文件将以您在配置文件中定义的列表加载到您的页面中
   • 当使用 VERSION=prod 时，如果您在页面上加载client类别和home子类别CSS和JS文件路径，则路径是 /css/client/home.css，/js/client/home.js

提示：如果您的项目是一个网站，您可以使用主要类别将应用程序分为部分（管理员、客户）并使用子类别来区分每个页面

在blade文件中使用

获取JS文件

client类别，home子类别

    <?= \Danialrahimy\MetaLaravel\Meta::getJs("client", "home") ?>

获取CSS文件

client类别，home子类别

    <?= \Danialrahimy\MetaLaravel\Meta::getCss("client", "home") ?>

一起获取CSS和JS文件，CSS在前

client类别，home子类别

    <?= \Danialrahimy\MetaLaravel\Meta::get("client", "home") ?>