لاراول اکسیر

• معرفی
• نصب و راه اندازی
• استفاده
• گلپ
• برنامه های افزودنی

معرفی

Laravel Elixir یک API تمیز و روان برای تعریف وظایف اصلی Gulp برای برنامه Laravel شما ارائه می دهد. Elixir از چندین پیش پردازنده رایج CSS و JavaScript و حتی ابزارهای تست پشتیبانی می کند.

اگر تا به حال در مورد نحوه شروع به کار با Gulp و مجموعه دارایی ها سردرگم شده اید، لاراول اکسیر را دوست خواهید داشت!

نصب و راه اندازی

در حال نصب Node

قبل از راه اندازی Elixir، ابتدا باید مطمئن شوید که Node.js روی دستگاه شما نصب شده است.

node -v

به طور پیش فرض، Laravel Homestead شامل همه چیزهایی است که شما نیاز دارید. با این حال، اگر از Vagrant استفاده نمی کنید، می توانید Node را به راحتی با مراجعه به صفحه دانلود آن نصب کنید . نگران نباشید، این سریع و آسان است!

گلپ

در مرحله بعد، شما می خواهید Gulp را به عنوان یک بسته جهانی NPM مانند زیر وارد کنید :

npm install --global gulp

لاراول اکسیر

تنها مرحله باقی مانده نصب اکسیر است! با نصب جدید لاراول، فایلی را package.json در ریشه پیدا خواهید کرد. به این مانند composer.json فایل خود فکر کنید، با این تفاوت که به جای PHP، وابستگی Node را تعریف می کند. می توانید وابستگی هایی را که به آن ارجاع می دهد با اجرای زیر نصب کنید:

npm install

استفاده

اکنون که اکسیر را نصب کرده اید، در کمترین زمان کامپایل و الحاق خواهید شد! فایل gulpfile.js موجود در دایرکتوری ریشه پروژه شما شامل تمام وظایف Elixir شما می باشد.

کمتر کامپایل کنید

elixir(function(mix) {
    mix.less("app.less");
});

در مثال بالا، Elixir فرض می‌کند که فایل‌های Less شما در ذخیره می‌شوند resources/assets/less .

کامپایل چندین فایل کمتر

elixir(function(mix) {
    mix.less([
        'app.less',
        'something-else.less'
    ]);
});

Sass را کامپایل کنید

elixir(function(mix) {
    mix.sass("app.scss");
});

این فرض می‌کند که فایل‌های Sass شما در ذخیره می‌شوند resources/assets/sass .

به طور پیش‌فرض، Elixir در زیر هود، از کتابخانه LibSass برای کامپایل استفاده می‌کند. در برخی موارد، ممکن است به جای استفاده از نسخه روبی، که اگرچه کندتر است، اما ویژگی‌های غنی‌تری دارد، سودمند باشد. با فرض اینکه هم Ruby و هم Sass gem را نصب کرده اید ( gem install sass )، می توانید حالت Ruby-mode را فعال کنید، مانند:

elixir(function(mix) {
    mix.rubySass("app.sass");
});

کامپایل بدون منبع نقشه

elixir.config.sourcemaps = false;
 
elixir(function(mix) {
    mix.sass("app.scss");
});

نقشه های منبع خارج از جعبه فعال هستند. *.css.map به این ترتیب، برای هر فایلی که کامپایل می شود، یک فایل همراه در همان دایرکتوری پیدا خواهید کرد . این نگاشت به شما این امکان را می دهد که هنگام اشکال زدایی، انتخابگرهای صفحه سبک کامپایل شده خود را به Sass اصلی یا جزئی های کمتر ردیابی کنید! با این حال، اگر باید این عملکرد را غیرفعال کنید، نمونه کد بالا این کار را انجام می دهد.

کامپایل CoffeeScript

elixir(function(mix) {
    mix.coffee();
});

این فرض می‌کند که فایل‌های CoffeeScript شما در ذخیره می‌شوند resources/assets/coffee .

کامپایل All Less و CoffeeScript

elixir(function(mix) {
    mix.less()
       .coffee();
});

تست های PHPUnit را راه اندازی کنید

elixir(function(mix) {
    mix.phpUnit();
});

تست های PHPSpec را راه اندازی کنید

elixir(function(mix) {
    mix.phpSpec();
});

برگه های سبک را ترکیب کنید

elixir(function(mix) {
    mix.styles([
        "normalize.css",
        "main.css"
    ]);
});

مسیرهای ارسال شده به این متد نسبت به resources/assets/css دایرکتوری هستند.

Stylesheets را ترکیب کرده و در یک فهرست سفارشی ذخیره کنید

elixir(function(mix) {
    mix.styles([
        "normalize.css",
        "main.css"
    ], 'public/build/css/everything.css');
});

Stylesheets را از یک فهرست پایه سفارشی ترکیب کنید

elixir(function(mix) {
    mix.styles([
        "normalize.css",
        "main.css"
    ], 'public/build/css/everything.css', 'public/css');
});

آرگومان سوم برای هر دو متد styles و، scripts دایرکتوری نسبی را برای همه مسیرهای ارسال شده به متدها تعیین می کند.

همه سبک ها را در یک فهرست ترکیب کنید

elixir(function(mix) {
    mix.stylesIn("public/css");
});

ترکیب اسکریپت ها

elixir(function(mix) {
    mix.scripts([
        "jquery.js",
        "app.js"
    ]);
});

باز هم، این فرض می‌کند که همه مسیرها نسبت به resources/assets/js دایرکتوری هستند.

همه اسکریپت ها را در یک فهرست ترکیب کنید

elixir(function(mix) {
    mix.scriptsIn("public/js/some/directory");
});

مجموعه های متعددی از اسکریپت ها را ترکیب کنید

elixir(function(mix) {
    mix.scripts(['jquery.js', 'main.js'], 'public/js/main.js')
       .scripts(['forum.js', 'threads.js'], 'public/js/forum.js');
});

نسخه / فایل هش

elixir(function(mix) {
    mix.version("css/all.css");
});

با این کار یک هش منحصر به فرد به نام فایل اضافه می شود که امکان از بین بردن حافظه پنهان را فراهم می کند. به عنوان مثال، نام فایل تولید شده چیزی شبیه به این خواهد بود all-16d570a7.css :

در نماهای خود، می توانید از elixir() تابع برای بارگیری دارایی هش شده مناسب استفاده کنید. در اینجا یک مثال است:

<link rel="stylesheet" href="{{ elixir("css/all.css") }}">

در پشت صحنه، elixir() تابع نام فایل هش شده ای را که باید گنجانده شود را تعیین می کند. آیا احساس نمی کنید که وزنه از روی شانه های شما برداشته شده است؟

همچنین می توانید یک آرایه را به version متد ارسال کنید تا چندین فایل را نسخه کنید:

elixir(function(mix) {
    mix.version(["css/all.css", "js/app.js"]);
});

<link rel="stylesheet" href="{{ elixir("css/all.css") }}">
<script src="{{ elixir("js/app.js") }}"></script>

یک فایل را در یک مکان جدید کپی کنید

elixir(function(mix) {
    mix.copy('vendor/foo/bar.css', 'public/css/bar.css');
});

یک فهرست کامل را در یک مکان جدید کپی کنید

elixir(function(mix) {
    mix.copy('vendor/package/views', 'resources/views');
});

Browserify را فعال کنید

elixir(function(mix) {
    mix.browserify('index.js');
});

آیا می خواهید به ماژول ها در مرورگر نیاز داشته باشید؟ امیدوارید زودتر از EcmaScript 6 استفاده کنید؟ به یک ترانسفورماتور JSX داخلی نیاز دارید؟ اگر چنین است، Browserify ، همراه با browserify وظیفه Elixir، کار را به خوبی انجام می دهد.

این وظیفه فرض می‌کند که اسکریپت‌های شما در ذخیره می‌شوند resources/assets/js ، اگرچه شما آزاد هستید که پیش‌فرض را لغو کنید.

روش زنجیر زنی

البته، می‌توانید تقریباً تمام روش‌های اکسیر را برای ساختن دستور پخت خود زنجیره‌وار کنید:

elixir(function(mix) {
    mix.less("app.less")
       .coffee()
       .phpUnit()
       .version("css/bootstrap.css");
});

گلپ

اکنون که به Elixir گفتید کدام وظایف را باید اجرا کنید، فقط باید Gulp را از خط فرمان فعال کنید.

تمام وظایف ثبت شده را یکبار اجرا کنید

gulp

Watch Assets For Changes

gulp watch

فقط اسکریپت ها را کامپایل کنید

gulp scripts

فقط سبک های کامپایل

gulp styles

تست‌ها و کلاس‌های PHP را برای تغییرات تماشا کنید

gulp tdd

توجه: همه وظایف دارای یک محیط توسعه هستند و کوچک سازی را حذف می کنند. برای تولید، استفاده کنید gulp --production .

وظایف و برنامه های افزودنی سفارشی

گاهی اوقات، شما می خواهید وظایف Gulp خود را به Elixir متصل کنید. شاید شما عملکرد خاصی داشته باشید که دوست دارید اکسیر آن را ترکیب کرده و برای شما تماشا کند. مشکلی نیست!

به عنوان مثال، تصور کنید که یک کار کلی دارید که در هنگام فراخوانی به سادگی کمی از متن صحبت می کند.

gulp.task("speak", function() {
    var message = "Tea...Earl Grey...Hot";
 
    gulp.src("").pipe(shell("say " + message));
});

به حد کافی ساده است. از خط فرمان، البته می توانید gulp speak برای فعال کردن کار تماس بگیرید. اما برای افزودن آن به اکسیر از mix.task() روش زیر استفاده کنید:

elixir(function(mix) {
    mix.task('speak');
});

خودشه! اکنون، هر بار که Gulp را اجرا می‌کنید، وظیفه «صحبت کردن» سفارشی شما در کنار سایر وظایف Elixir که با آن‌ها ترکیب کرده‌اید، اجرا می‌شود. برای ثبت نام یک تماشاگر، به طوری که هر بار یک یا چند کار سفارشی شما دوباره فعال می‌شود. فایل ها اصلاح می شوند، می توانید یک عبارت منظم را به عنوان آرگومان دوم ارسال کنید.

elixir(function(mix) {
    mix.task('speak', 'app/**/*.php');
});

با افزودن این آرگومان دوم، به Elixir دستور داده‌ایم که هر بار که یک فایل PHP در فهرست برنامه/" ذخیره می‌شود، وظیفه "speak" را دوباره راه اندازی کند.

برای انعطاف‌پذیری بیشتر، می‌توانید پسوندهای کامل Elixir را ایجاد کنید. با استفاده از مثال قبلی "speak"، می توانید یک پسوند بنویسید، مانند:

var gulp = require("gulp");
var shell = require("gulp-shell");
var elixir = require("laravel-elixir");
 
elixir.extend("speak", function(message) {
 
    gulp.task("speak", function() {
        gulp.src("").pipe(shell("say " + message));
    });
 
    return this.queueTask("speak");
 
 });

توجه داشته باشید که ما extend API Elixir را با ارسال نامی که در Gulpfile به آن ارجاع خواهیم داد، و همچنین یک تابع callback که وظیفه Gulp را ایجاد می کند، ارسال می کنیم.

مانند قبل، اگر می خواهید وظیفه سفارشی شما تحت نظارت باشد، یک ناظر ثبت نام کنید.

this.registerWatcher("speak", "app/**/*.php");

این خطوط نشان می دهد که وقتی هر فایلی که با عبارت معمولی مطابقت دارد، app/**/*.php اصلاح می شود، می خواهیم speak کار را فعال کنیم.

خودشه! می‌توانید آن را در بالای Gulpfile خود قرار دهید یا در عوض آن را در یک فایل وظایف سفارشی استخراج کنید. اگر روش دوم را انتخاب می کنید، به سادگی آن را در Gulpfile خود بخواهید، مانند:

require("./custom-tasks")

شما تمام شده اید! حالا می توانید آن را با هم مخلوط کنید.

elixir(function(mix) {
    mix.speak("Tea, Earl Grey, Hot");
});

با این اضافه کردن، هر بار که Gulp را تحریک می کنید، Picard مقداری چای درخواست می کند.