Memakai Elixir Laravel 4 Part 1 |Cara Memakai Elixir Pada Laravel
Cara Memakai Elixir di Laravel 4 dengan Mudah
21 Feb 2017 at 11:11 pm
Apa itu elixir? Dikutip dari laravel.com
Laravel Elixir provides a clean, fluent API for defining basic Gulp tasks for your Laravel application. Elixir supports several common CSS and JavaScript pre-processors, and even testing tools.Nah ceritanya elixir ini diperkenalkan pas rilis laravel versi 5. Jadi kalau kamu pakai laravel versi 5, tinggal install aja lewat node dan npm aja uda beres. Ga ada config-config lagi.
Terus kenapa pakai elixir?
- Bisa dengan mudah untuk minify file css dan js di projek yang sedang kamu buat
- Bisa dengan mudah untuk cache busting
- Gulp watch, nah fitur ini bisa membantu kamu untuk auto minify file js atau css jika ada file yang berubah. Kamu bisa gabungkan juga dengan fitur livereloading jika mau.
Yuk mulai ngodingnya teman-teman. Adapun ruang lingkup yang akan kita bahas ditutorial kali ini adalah meminify js dan css dan juga membuat cache busting untuk project yang sudah kita punya.
Kita juga sudah siapkan sample repository yang bisa kamu coba cek repo disini.
Pertama siapkan project laravel 4 baik baru atau lama. Nah folder struckturenya kurang lebih akan seperti di bawah ini:
Pertama pastikan komputer kamu sudah diinstall nodejs dan npm di komputer kamu. Caranya gampang kok, kamu bisa kunjungi official site dan install dulu itu si nodejs.
Kemudian siapkan project laravel 4 yang mau kita install elixir.
Cara installnya gampang, tinggal run kode dibawah ini:
npm install -g gulp bowerKalau sudah kamu bisa cek apakah gulp dan bower sudah terinstall dengan command ini:
gulp -v bower -vTahap awal sudah berhasil kita lewati, selanjutnya kita buka ke project laravel 4 dan buat sebuah file
package.json di root folder dengan isi seperti di bawah.{
"devDependencies": {
"gulp": "^3.9.1",
"gulp-shell": "^0.5.2",
"laravel-elixir": "*"
}
}
Note, kamu juga bisa membuat package.json file dengan command npm init, tinggal ikuti saja langkah2nya nanti filenya akan tergenerate otomatisSelanjutnya kita akan mendownload depedency dengan menjalankan command dibawah.
npm installTunggu sampai proses selesai (biasanya lama kalau internet kamu lemot :p), kamu akan mendapati sebuah folder baru yaitu node_modules dimana disana tersimpan depedency dari npm yang akan kita pakai seperti elixir dan teman-temannya.
Salah satu perbedaan utama dari laravel 5 dan 4 adalah struktur folder yang berubah total terutama di bagian assets.
Jadi karena elixir awalnya hanya support laravel 5 kita perlu sedikit modifikasi agar bisa bekerja dengan baik dengan laravel 4.
Buat gulpfile.json
Karena elixir dibangun di atas gulp maka kita perlu membuat sebuah file dengan nama
gulpfile.json yang berisi bebera scripts untuk memanggil elixir atau command yang lainnya.File dibawah adalah default dari elixir untuk laravel 5. Kita modif supaya bisa berjalan dengan project structure di laravel 4.
var elixir = require('laravel-elixir');
/*
|--------------------------------------------------------------------------
| Elixir Asset Management
|--------------------------------------------------------------------------
|
| Elixir provides a clean, fluent API for defining some basic Gulp tasks
| for your Laravel application. By default, we are compiling the Less
| file for our application, as well as publishing vendor resources.
|
*/
elixir(function(mix) {
//codenya disini
});
Tambahkan beberapa config untuk overwrite path default dari elixir.//ini dimana assetsPath dari project kamu elixir.config.assetsPath = 'public/assets/'; //ini folder js kamu ada dimana elixir.config.js.folder = 'js'; //ini folder css kamu ada dimana elixir.config.css.folder = ‘css'; //public path kamu ada dmn, defaulny laravel 4 adalah public elixir.config.publicPath = 'public';Kita akan mencoba untuk minify beberapa scripts dengan menambahkan commmand seperti di bawah ini:
mix.scripts([
"vendor/jquery/jquery.min.js",
"vendor/bootstrap/js/bootstrap.min.js",
"vendor/jquery/jquery.easing.min.js",
"js/new-age.min.js"
],'public/build/min.js');
Jadi tinggal masukin aja filenya di dalam scripts sebagai
array, kamu juga bisa mengisi parameter kedua sebagai output location
nya.Kedua minify css seperti di bawah ini:
mix.styles([
"vendor/bootstrap/css/bootstrap.min.css",
"vendor/font-awesome/css/font-awesome.min.css",
"vendor/simple-line-icons/css/simple-line-icons.css",
"vendor/device-mockups/device-mockups.min.css",
"css/new-age.min.css"
],'public/build/min.css');
Sama seperti command scripts,
kamu tinggal masukin array berupa location styles dimana dan parameter
kedua untuk location outpunya dimana.Kadang-kadang ada beberapa file seperti font dan images yang pathnya tidak sesuai setelah kita minify.
Kita bisa akalin dengan command copy manual asset dari masing-masing vendor seperti di bawah ini.
mix.copy('public/assets/vendor/font-awesome/fonts', 'public/build/fonts'); mix.copy('public/assets/vendor/bootstrap/fonts', 'public/build/fonts');
mix.copy('public/assets/img', 'public/build/img');
Nah kamu sekarang tinggal jalanin fungsi gulp di command line.Elixir akan meminify scripts dan styles dan juga copy beberapa assets yg dibutuhkan ke folder public/build
Lalu bagaimana cara memanggil js dan css yang sudah kita minify tersebut?
Kita akan pakai yang namanya versioning, fitur ini uda ada di elixir juga.
Caranya kamu tambahin lagi script untuk versioning di file gulpfile.js seperti di bawah ini:
mix.version([
'build/min.js',
'build/min.css'
]);
Versioning ini sangat berfungsi untuk cache busting yang
maksudnya kalau ada file yg berubah kamu tinggal jalankan gulp maka
versi dari js dan css yang sudah di minify akan berubah.Sekarang kita akan menampilkan file yg sudah di minify ini di view yang kita punya.
Kita buat dulu helpers file untuk manambahkan fungsi
elixir() seperti yang ada di laravel 5Ada banyak cara menambahkan helper di laravel 4. Kita buat sebuah file baru di folder app/libraries dengan nama elixir-helper.php
<?php
if ( ! function_exists('elixir'))
{
/**
* Get the path to a versioned Elixir file.
*
* @param string $file
* @return string
*/
function elixir($file)
{
static $manifest = null;
if (is_null($manifest))
{
$manifest = json_decode(file_get_contents(public_path().'/build/rev-manifest.json'), true);
}
if (isset($manifest[$file]))
{
return '/build/'.$manifest[$file];
}
throw new InvalidArgumentException("File {$file} not defined in asset manifest.");
}
}
Edit composer.json file, tambahkan baris di bawah ini di bawah classmap"files" : [ "app/libraries/elixir-helper.php" ]Jalankan composer dump-autoloa
Sekarang kita bisa panggil fungsi
elixir() di semua view<link href="{{ elixir('build/min.css') }}" rel="stylesheet">
<script src="{{ elixir("build/min.js") }}"></script>
That is gays, gitu kira-kira bagaimana cara mengaplikasikan elixir yang ada di laravel 5 untuk laravel 4.Mudah bukan? Kamu bisa segera mengaplikasikan elixir ini di beberapa project laravel 4 yang kamu punya untuk mendapatkan kemudahan untuk minify file dan yang paling penting keuntungan untuk cache busting dengan fitur versioningnya.
https://ngide.net/posts/2017/02/22/cara-memakai-elixir-di-laravel-4-dengan-mudah
Comments