1. خانه
2. مقاله
3. استفاده از لاراول میکس در پروژه های غیر لاراولی

استفاده از لاراول میکس در پروژه های غیر لاراولی

لاراول میکس چیست؟

laravel mix ابزاری قدرتمند در frontend است که بسیار شبیه laravel elixir می باشد و با آن می توانید javascript,css,html را compile کنید و یا آنها را فشرده سازی کنید. حتی به شما اجازه می دهد بصورت آنی نتیجه کدهای سمت frontend را مشاهده و آنها را دیباگ کنید.

پیش نیازها برای نصب laravel mix

NPM مدیریت بسته های جاوا اسکریپتی، که با نصب NODE js نصب میشود. نصب Composer برای مدیریت بسته PHP هم امری ضروری است. بعد از نصب حتما در CMD و یا در terminal موارد بالا را تست کنید که نصب شده باشند:

node -v
npm -v
composer

نصب laravel mix و SASS

بسته های laravel mix و SASS را با دستور زیر نصب می کنیم:

    npm install laravel-mix cross-env node-sass --save-dev

ایجاد webpack mix

یک فایل به نام webpack.mix.js را در root پروژه ایجاد می کنیم و کدهای زیر را وارد می کنیم:

const mix = require('laravel-mix');

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

اضافه کردن اسکریپت به package.js

وقتی شما از لاراول میکس استفاده می کنید حتما باید کدهای زیر را به package.js اضافه کنید:

   "scripts": {
    "dev": "node node_modules/cross-env/dist/bin/cross-env.js NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
    "watch": "node node_modules/cross-env/dist/bin/cross-env.js NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
    "hot": "node node_modules/cross-env/dist/bin/cross-env.js NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
    "production": "node node_modules/cross-env/dist/bin/cross-env.js NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
  },

ساخت Assets برای کامپایل فایلها

ترتیب قرار گرفتن فایلها باید به شکل زیر باشد تا فایلهای موجود در assets را در public کامپایل کند.

• public
  • css
  • js
• resources
  • assets
    • css
    • js
      • app.js
    • sass
      • app.sass

اجرای laravel mix

با دستور زیر لاراول میکس را اجرا می کنیم:

   npm run dev

دستور زیر فایلهای شما را فشرده سازی نیز می کند:

    npm run production