Elixir در لاراول قسمت دوم
جلسه قبلی در مورد gulp و Elixir در لاراول صحبت کردیم و با نصب و راه اندازی gulp و سرویس الکسیر آشنا شدید. امروز میخواهیم در مورد شیوه نامه ها (stylesheet) در لاراول صحبت کنیم. فایل gulp.js موجود در مسیر ریشه پروژه حاوی تمام وظایف الکسیر (Elixir task) می باشد. این وظایف می تونن بصورت زنجیری به هم وصل بشن و نحوه کامپایل شدن asset ها رو مشخص کنن.
فایل های Less در لاراول
با استفاده از متد Less در Elixir میتوانید فایل های less ره به CSS کامپایل کنید. این متد بطور پیش فرض فایل های Less را از مسیر resource/assets/less خوانده و همچنین فایل کامپایل شده را در مسیر public/css/app.css ذخیره میکند.
elixir(function(mix) {
mix.less('app.less');
});
در این مثال فایل app.less حاوی استایل مورد نظر و در آدرس resource/assets/less/app.less می باشد و با اجرای فرمان gulp در خط فرمان، فایل مذکور ('app.less') به فایل CSS تبدیل شده و در مسیر public/css/app.css ذخیره میشود. به همین راحتی!!!! گاهی ممکنه بخواهیم چندین فایل less درون یک فایل CSS کامپایل بشه.
elixir(function(mix) {
mix.less(['app.less', 'controllers.less']);
});
خب حالا اگه مثل مرحله قبل از دستور gulp استفاده کنید فایل های 'app.less' و 'controllers.less' با نام app.css و در پوشه public/css ذخیره میشه. جالبه نه!!! اگه بخواهیم محل ذخیره شدن فایل CSS کامپایل شده رو تغییر بدیم (پیش فرض در مسیر public/css/app.css) باید از ارگومان دوم متد less رو مقداردهی کنیم
elixir(function(mix) {
mix.less('app.less', 'public/stylesheets');
});
// Specifying a specific output filename...
elixir(function(mix) {
mix.less('app.less', 'public/stylesheets/style.css');
});
مثال اول فایل app.css رو در پوشه stylesheet میسازه و مثال دوم فایل کامپایل شده رو با نام style.css و در پوشه stylesheet میسازه.
فایل های Sass در لاراول
متد sass در لاراول به شما اجازه میده تا فایل های Sass پروژه رو به CSS کامپایل کنید. بطور پیش فرض فایل های sass پروژه در مسیر resource/assets/sass قرار دارند. برای کامپایل کردن فایل sass از دستور زیر استفاده میشه:
elixir(function(mix) {
mix.sass('app.scss');
});
همانند متد less می توانید چندین فایل Sass رو داخل یه فایل CSS کامپایل کنید و یا مسیر ذخیره فایل کامپایل شده رو تغییر بدین.
elixir(function(mix) {
mix.sass(['app.scss', 'controllers.scss'], 'public/assets/css');
});
متد styles در لاراول
در صورتیکه بخواهیم چندین فایل CSS رو با هم ترکیب کنیم و در یک فایل قرار بدیم از متد styles در الکسیر استفاده می کنیم. فایل های مورد نظر از مسیر resource/assets/css به این متد ارسال می شوند و مسیر فایل خروجی پوشه public/css/all.css می باشد
elixir(function(mix) {
mix.styles(['normalize.css', 'main.css']);
});
همانند متدهای قبلی این متد نیز این قابلیت رو داره که مسیر و نام فایل خروجی رو بر اساس انتخاب شما تغییر بده و کافیه ارگومان دوم این متد رو مقداردهی کنید
elixir(function(mix) {
mix.styles(['normalize.css', 'main.css'], 'public/assets/css');
});
source map ها در لاراول
به ازای هر فایل کامپایل شده توسط Elixir یه فایل با نام *.css.map در همان پوشه پیدا خواهید کرد. این فایل map هنگام خطایابی و trace کدهای کامپایل شده داخل مرورگر به شما این امکان رو میده که سلکتورهای css رو درون فایل اصلی Sass و less مربوط به پروژه پیدا کنید. (با استفاده از این قابلیت به راحتی میتوانید سورس کدهای جاوا و CSS رو عیب یابی کنید) اگر نمی خواهید source map برای فایل های CSS ایجاد شودبا استفاده از دستور زیر می توانید آن را غیر فعال کنید
elixir.config.sourcemaps = false;
elixir(function(mix) {
mix.sass('app.scss');
});
کار کردن با اسکریپت ها:
Elixir توابع متعددی برای کار با اسکریپت ها در اختیار شما قرار میده که با استفاده از اون ها می تونید با فایل های جاوااسکریپت کار کنید. مثل توابع کامپایل کننده ECMAScript 6 و یا تابع کامپایل کننده CoffeeScript ، همچنین توابع minify کننده کد ها، الحاق کننده چند فایل javascript و ...
تابع CoffeeScript در الکسیر
برای تبدیل CoffeeScript به فایل های JavaScript در لاراول می تونید از متد coffee استفاده کنید. تابع coffee یک رشته یا ارایه ای از فایل های CoffeeScript های مرتبط با هم را از مسیر resource/assets/coffee گرفته و یک فایل app.js در مسیر public/js برای شما ایجاد می کنه.
elixir(function(mix) {
mix.coffee(['app.coffee', 'controllers.coffee']);
});
تابع Browserify
الکسیر از متدی به نام Browserify نیز پشتیبانی می کند که با استفاده از از ECMAScript و JSX تمام مزایای ماژول های مورد نیاز در مرورگر را به شما ارائه می دهد. این دستور به طور پیش فرض اسکریپت ها را از مسیر resource/assets/js خوانده و فایل خروجی را در مسیر public/js/main.js ذخیره میکند. به عنوان پارامتر اختیاری می توانید مسیر ذخیره فایل خروجی را تغییر دهید. به مثال زیر توجه کنید
elixir(function(mix) {
mix.browserify('main.js');
});
// Specifying a specific output filename...
elixir(function(mix) {
mix.browserify('main.js', 'public/javascripts/main.js');
});
قطعه کد اول فایل main.js را در مسیر پیشفرض (public/js) و قطعه کد دوم فایل خروجی را در مسیر (public/javascripts) ذخیره می کند این تابع همراه انتقال دهنده هایی (transformer) همچون Babelify و Partialify ارائه می شود، در صورتیکه می خواهید این تابع را بصورت مجزا نصب کنید از دستور زیر در CMD استفاده کنید.
npm install aliasify --save-dev
پس از نصب می توانید از این تابع در الیکسیر به شکل زیر استفاده کنید.
elixir.config.js.browserify.transformers.push({
name: 'aliasify',
options: {}
});
elixir(function(mix) {
mix.browserify('main.js');
});
تابع Babel
از متد Babel برای تبدیل اسکریپت های ECMA نسخه ۶ و ۷ و همچنین JSX به فایل های جاوا اسکریپت استفاده می شود. این تابع ارایه ای از فایل ها را از پوشه resource/assets/js بعنوان ورودی دریافت کرده و یک فایل all.js در پوشه public/js ایجاد می کند.
elixir(function(mix) {
mix.babel(['order.js', 'product.js', 'react-component.jsx']);
});
برای تغییر مسیر پیش فرض فایل خروجی به سادگی می توانید آرگومان دوم این تابع را با مسیر دلخواه خود مقدار دهی نمایید. به استثنای کامپایل کردن، این متد از نظر عملکرد و قابلیت (پارامتر ورودی و نوع آن) مشابه تابع Scripts است.
تابع Scripts
در صورتیکه چندین فایل جاوا اسکریپت داشته باشیم و بخواهیم همه آنها را درون یک فایل کامپایل کنیم از تابع Scripts استفاده می شود. این متد فایل های ورودی را از مسیر resource/assets/js گرفته و یک فایل JavaScript در مسیر public/js/all.js ایجاد می کند.
elixir(function(mix) {
mix.scripts(['jquery.js', 'app.js']);
});
در صورتیکه بخواهیم مجموعه ای از اسکریپت های مختلف را در فایل های مختلف کامپایل کنیم باید متد scripts را چند مرحله فراخوانی کنید. در هر فراخوانی آرگومان دوم مسیر فایل خروجی را تعیین می کند.
elixir(function(mix) {
mix.scripts(['app.js', 'controllers.js'], 'public/js/app.js')
.scripts(['forum.js', 'threads.js'], 'public/js/forum.js');
});
اگر بخواهیم همه اسکریپت های یک پوشه را با هم ترکیب کنیم از متد scriptsIn به شکل زیر استفاده می شود
elixir(function(mix) {
mix.scriptsIn('public/js/some/directory');
});
فایل خروجی در مسیر public/js/all.js ذخیره خواهد شد. برای مطالعه قسمت قبلی روی نوشته زیر بزنید. Elixir در لاراول قسمت اول