Laravel (5.7) Составление активов

Последнее обновление 17 июля 2019 08:09:24 (UTC / GMT +8 часов)

script1adsense2code

script1adsense3code

Шаг 1: Установите Laravel 5.7

Перейдите к своему терминалу и введите следующее.

composer create-project laravel/laravel mix --prefer-dist

Теперь, после установки, перейдите в каталог проекта и откройте файл package.json . У этого есть devDependencies как следующее.

"devDependencies": {
        "axios": "^0.17",
        "bootstrap": "^4.0.0",
        "popper.js": "^1.12",
        "cross-env": "^5.1",
        "jquery": "^3.2",
        "laravel-mix": "^2.0",
        "lodash": "^4.17.4",
        "vue": "^2.5.7"
}

В общем, нам нужно нажать следующую команду, чтобы установить локальные зависимости в нашем проекте.

npm install

Он соберет все пакеты и создаст дамп в папке node_modules внутри нашего корневого каталога.

Шаг 2: Запуск Mix.

Микс - это слой конфигурации поверх Webpack, поэтому для запуска задач Mix вам нужно всего лишь выполнить один из сценариев NPM, которые включены в файл package.json по умолчанию Laravel.

// Run all Mix tasks...
npm run dev

// Run all Mix tasks and minify output...
npm run production

Он скомпилирует наши файлы CSS и JS и поместит сборку в общую папку. Затем мы включаем эти файлы CSS и JS в наш основной файл blade-сервера. Вы можете увидеть код внутри файла webpack.mix.js. Файл webpack.mix.js находится в корневой папке проекта Laravel.

// webpack.mix.js
let mix = require('laravel-mix');
/*
 |--------------------------------------------------------------------------
 | Mix Asset Management
 |--------------------------------------------------------------------------
 |
 | Mix provides a clean, fluent API for defining some Webpack build steps
 | for your Laravel application. By default, we are compiling the Sass
 | file for the application as well as bundling up all the JS files.
 |
 */
mix.js('resources/assets/js/app.js', 'public/js')
   .sass('resources/assets/sass/app.scss', 'public/css');

Сначала мы потребовали модуль mix, а затем вызвали его различные методы. Мы можем связать эти методы.

Меньше файлов

Метод less используется для компиляции Less в CSS. Во-первых, давайте создадим одну новую папку внутри каталога resources >> assets с именем less. Теперь в этой папке сделайте один файл caledl app.less.

@nice-blue: #5B83AD;
@light-blue: @nice-blue + #111;
.title {
  color: @light-blue;
}

Теперь нам нужно включить этот класс в файл welcome.blade.php. Таким образом, мы можем увидеть изменения.

<!doctype html>
<html lang="{{ app()->getLocale() }}">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Laravel</title>
        <!-- Fonts -->
        <link href="https://fonts.googleapis.com/css?family=Raleway:100,600" rel="stylesheet" type="text/css"/>
    </head>
    <body>
        <div class="flex-center position-ref full-height ">
            <div class="content">
                <div class="title">
                    Laravel
                </div>
            </div>
        </div>
    </body>
</html>

Теперь напишите код внутри файла webpack.mix.js .

// webpack.mix.js
mix.js('resources/assets/js/app.js', 'public/js')
   .less('resources/assets/less/app.less', 'public/css');

Итак, мы написали код для компиляции меньшего кода в код CSS. Запустите процесс компиляции веб-пакета, нажав следующую команду.

npm run watch

Кроме того , необходимо включить файл app.css внутри файла welcome.blade.php.

<link href="{{ asset('css/app.css') }}" rel="stylesheet" type="text/css"/>

Теперь вы можете запустить сервер Laravel.

php artisan serve

Перейдите на http: // localhost: 8000. Вы можете увидеть изменения отражены в файле.

Sass Files

Метод sass позволяет вам скомпилировать Sass в CSS. Вы можете использовать способ, как так.

mix.sass('resources/assets/sass/app.scss', 'public/css');

Таким образом, вы можете использовать sass-файлы так же, как и меньше файлов.

Файлы стилуса

Подобно Less и Sass, метод стилуса позволяет вам компилировать Stylus в CSS.

// webpack.config.js
mix.stylus('resources/assets/stylus/app.styl', 'public/css');

PostCSS файлы

PostCSS, мощный инструмент для преобразования вашего CSS, входит в состав Laravel Mix из коробки.

// webpack.config.js
mix.sass('resources/assets/sass/app.scss', 'public/css')
   .options({
    postCss: [
       require('postcss-css-variables')()
    ]
});

Исходные карты

Хотя исходные карты отключены по умолчанию, их можно активировать, вызвав метод mix.sourceMaps () в файле webpack.mix.js .

// webpack.mix.js
mix.js('resources/assets/js/app.js', 'public/js')
   .sourceMaps();

Javascript Files

Микс предоставляет несколько функций, которые помогут вам работать с вашими файлами JavaScript, такими как компиляция ECMAScript 2015, объединение модулей, минификация и объединение простых файлов JavaScript.

mix.js('resources/assets/js/app.js', 'public/js');

С этой единственной строкой кода вы можете теперь воспользоваться:

Синтаксис ES2015.
Модули
Компиляция файлов .vue .
Минификация для производственных сред.

реагировать

Mix может автоматически установить плагины Babel, необходимые для поддержки React. Для начала замените вызов mix.js () на mix.react ().

mix.react('resources/assets/js/app.jsx', 'public/js');

Ваниль JS

// webpack.mix.js
mix.scripts([
    'public/js/admin.js',
    'public/js/dashboard.js'
], 'public/js/all.js');

Вот как вы можете использовать Laravel Mix для компиляции ваших ресурсов.

Предыдущая: Laravel (5.7) Локализация
Следующая: Laravel (5.7) Леса фронтенда