Cara memakai elixir di laravel 4 dengan mudah

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?

1. Bisa dengan mudah untuk minify file css dan js di projek yang sedang kamu buat
2. Bisa dengan mudah untuk cache busting
3. 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.

Sebenarnya kita juga bisa buat fitur seperti elixir dengan manual di atas gulp. Tapi kenapa ga pakai elixir aja yang memang di buat khusus buat laravel?

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.

Sebelumnya ingat juga install beberapa depedency untuk elxir seperti gulp dan bower.

Cara installnya gampang, tinggal run kode dibawah ini:

npm install -g gulp bower

Kalau sudah kamu bisa cek apakah gulp dan bower sudah terinstall dengan command ini:

gulp -v bower -v</code>

Tahap 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 otomatis

Selanjutnya kita akan mendownload depedency dengan menjalankan command dibawah.

Tunggu 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.

npm install

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 5

Ada 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

~~~.javascript
"files" : [     "app/libraries/elixir-helper.php" ]

Jalankan composer dump-autoload

Sekarang kita bisa panggil fungsi elixir() di semua view

<link href="{{ elixir('build/min.css') }}" rel="stylesheet">
<script src="{{ elixir("build/min.js") }}">&lt;/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.