[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"blog-cats-ngidenet":3,"blog-detail-ngidenet-cara-memakai-elixir-di-laravel-4-dengan-mudah":20},{"items":4},[5,9,13,17],{"name":6,"slug":7,"count":8},"Digital Marketing","digital-marketing",41,{"name":10,"slug":11,"count":12},"Programming","programming",56,{"name":14,"slug":15,"count":16},"Tips","tips",75,{"name":18,"slug":19,"count":8},"Web Development","web-development",{"id":21,"slug":22,"title":23,"short_text":24,"excerpt":24,"cover":25,"cover_image":25,"cover_alt_text":25,"category":10,"tags":26,"published_at":27,"created_at":28,"full_text":29,"meta_title":25,"meta_description":30,"faqs":31,"images":32,"views_count":33},354,"cara-memakai-elixir-di-laravel-4-dengan-mudah","Cara memakai elixir di laravel 4 dengan mudah","Agus Yusida February 22, 2017 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 c",null,[],"2019-08-25T16:00:00Z","2026-07-14T04:39:32.990102Z","\u003Cimg alt=\"\" src=\"data:image\u002Fgif;base64,R0lGODlhAQABAIAAAAAAAP\u002F\u002F\u002FyH5BAEAAAAALAAAAAABAAEAAAIBRAA7\"\u002F>  \u003Cimg alt=\"Go to the profile of Agus Yusida\" src=\"http:\u002F\u002F0.gravatar.com\u002Favatar\u002Fc0b0eeb94d5a7fd159a09fd4a506d27b?s=96&d=mm&r=g\"\u002F>  Agus Yusida February 22, 2017\u003Cp>Apa itu elixir? Dikutip dari laravel.com\u003C\u002Fp>\u003Cblockquote>\u003Cp>Laravel Elixir provides a clean, fluent API for defining basic \u003Ca href=\"http:\u002F\u002Fgulpjs.com\u002F\">Gulp\u003C\u002Fa> tasks for your Laravel application. Elixir supports several common CSS and JavaScript pre-processors, and even testing tools.\u003C\u002Fp>\u003C\u002Fblockquote>\u003Cp>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.\u003C\u002Fp>\u003Cp>Terus kenapa pakai elixir?\u003C\u002Fp>\u003Col>\u003Cli>Bisa dengan mudah untuk minify file css dan js di projek yang sedang kamu buat\u003C\u002Fli>\u003Cli>Bisa dengan mudah untuk cache busting\u003C\u002Fli>\u003Cli>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 \u003Cem>livereloading\u003C\u002Fem> jika mau.\u003C\u002Fli>\u003C\u002Fol>\u003Cp>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?\u003C\u002Fp> \u003Cp>Yuk mulai ngodingnya teman-teman. Adapun ruang lingkup yang akan kita bahas ditutorial kali ini adalah \u003Cem>meminify\u003C\u002Fem> js dan css dan juga membuat cache busting untuk project yang sudah kita punya.\u003C\u002Fp>\u003Cp>Kita juga sudah siapkan sample repository yang bisa kamu coba cek repo \u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fyusidabcs\u002Flaravel4-elixir\">disini\u003C\u002Fa>.\u003C\u002Fp>\u003Cp>Pertama siapkan project laravel 4 baik baru atau lama. Nah folder struckturenya kurang lebih akan seperti di bawah ini:\u003C\u002Fp>\u003Cfigure>\u003Cimg alt=\"\" src=\"data:image\u002Fgif;base64,R0lGODlhAQABAIAAAAAAAP\u002F\u002F\u002FyH5BAEAAAAALAAAAAABAAEAAAIBRAA7\"\u002F>\u003C\u002Ffigure>\u003Cp>Pertama pastikan komputer kamu sudah diinstall nodejs dan npm di komputer kamu. Caranya gampang kok, kamu bisa kunjungi \u003Ca href=\"http:\u002F\u002Fnodejs.org\u002F\">official site\u003C\u002Fa> dan install dulu itu si nodejs.\u003C\u002Fp>\u003Cp>Kemudian siapkan project laravel 4 yang mau kita install elixir.\u003C\u002Fp>\u003Cp>Sebelumnya ingat juga install beberapa depedency untuk elxir seperti gulp dan bower.\u003C\u002Fp>\u003Cp>Cara installnya gampang, tinggal run kode dibawah ini:\u003C\u002Fp>\u003Cpre>\u003Ccode>npm install -g gulp bower\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp>Kalau sudah kamu bisa cek apakah gulp dan bower sudah terinstall dengan command ini:\u003C\u002Fp>\u003Cpre>\u003Ccode>gulp -v bower -v\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp>Tahap awal sudah berhasil kita lewati, selanjutnya kita buka ke project laravel 4 dan buat sebuah file \u003Ccode>package.json\u003C\u002Fcode> di root folder dengan isi seperti di bawah.\u003C\u002Fp>\u003Cpre>\u003Ccode>{\n\"devDependencies\": {\n    \"gulp\": \"^3.9.1\",\n    \"gulp-shell\": \"^0.5.2\",\n    \"laravel-elixir\": \"*\"\n  }\n}\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp>Note, kamu juga bisa membuat \u003Ccode>package.json\u003C\u002Fcode> file dengan command npm init, tinggal ikuti saja langkah2nya nanti filenya akan tergenerate otomatis\u003C\u002Fp>Rekomendasi:  Laravel vs Codeigniter, php framework mana yang lebih baik?\u003Cp>Selanjutnya kita akan mendownload depedency dengan menjalankan command dibawah.\u003C\u002Fp>\u003Cp>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.\u003C\u002Fp>\u003Cpre>\u003Ccode>npm install\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp>Salah satu perbedaan utama dari laravel 5 dan 4 adalah struktur folder yang berubah total terutama di bagian assets.\u003C\u002Fp>\u003Cp>Jadi karena elixir awalnya hanya support laravel 5 kita perlu sedikit modifikasi agar bisa bekerja dengan baik dengan laravel 4.\u003C\u002Fp>\u003Cpre>\u003Ccode>Buat gulpfile.json\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp>Karena elixir dibangun di atas gulp maka kita perlu membuat sebuah file dengan nama \u003Ccode>gulpfile.json\u003C\u002Fcode> yang berisi bebera scripts untuk memanggil elixir atau command yang lainnya.\u003C\u002Fp>\u003Cp>File dibawah adalah default dari elixir untuk laravel 5. Kita modif supaya bisa berjalan dengan project structure di laravel 4.\u003C\u002Fp> \u003Cpre>\u003Ccode>var elixir = require('laravel-elixir');\n\u002F*\n |--------------------------------------------------------------------------\n | Elixir Asset Management\n |--------------------------------------------------------------------------\n |\n | Elixir provides a clean, fluent API for defining some basic Gulp tasks\n | for your Laravel application. By default, we are compiling the Less\n | file for our application, as well as publishing vendor resources.\n |\n *\u002F\nelixir(function(mix) {\n   \u002F\u002Fcodenya disini\n});\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp>Tambahkan beberapa config untuk overwrite path default dari elixir.\u003C\u002Fp>\u003Cpre>\u003Ccode>\u002F\u002Fini dimana assetsPath dari project kamu\nelixir.config.assetsPath = 'public\u002Fassets\u002F';\n\u002F\u002Fini folder js kamu ada dimana\nelixir.config.js.folder = 'js';\n\u002F\u002Fini folder css kamu ada dimana\nelixir.config.css.folder = ‘css';\n\u002F\u002Fpublic path kamu ada dmn, defaulny laravel 4 adalah public\nelixir.config.publicPath = 'public';\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp>Kita akan mencoba untuk minify beberapa scripts dengan menambahkan commmand seperti di bawah ini:\u003C\u002Fp>\u003Cpre>\u003Ccode>mix.scripts([\n        \"vendor\u002Fjquery\u002Fjquery.min.js\",\n        \"vendor\u002Fbootstrap\u002Fjs\u002Fbootstrap.min.js\",\n        \"vendor\u002Fjquery\u002Fjquery.easing.min.js\",\n        \"js\u002Fnew-age.min.js\"\n    ],'public\u002Fbuild\u002Fmin.js');\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp>Jadi tinggal masukin aja filenya di dalam scripts sebagai array, kamu juga bisa mengisi parameter kedua sebagai output location nya.\u003C\u002Fp>\u003Cp>Kedua minify css seperti di bawah ini:\u003C\u002Fp>\u003Cpre>\u003Ccode>mix.styles([\n        \"vendor\u002Fbootstrap\u002Fcss\u002Fbootstrap.min.css\",\n        \"vendor\u002Ffont-awesome\u002Fcss\u002Ffont-awesome.min.css\",\n        \"vendor\u002Fsimple-line-icons\u002Fcss\u002Fsimple-line-icons.css\",\n        \"vendor\u002Fdevice-mockups\u002Fdevice-mockups.min.css\",\n        \"css\u002Fnew-age.min.css\"\n    ],'public\u002Fbuild\u002Fmin.css');\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp>Sama seperti command scripts, kamu tinggal masukin array berupa location styles dimana dan parameter kedua untuk location outpunya dimana.\u003C\u002Fp>Rekomendasi:  Laravel Notification: Bagaimana cara mengirim pesan ke slack dengan Laravel?\u003Cp>Kadang-kadang ada beberapa file seperti font dan images yang pathnya tidak sesuai setelah kita minify.\u003C\u002Fp>\u003Cp>Kita bisa akalin dengan command copy manual asset dari masing-masing vendor seperti di bawah ini.\u003C\u002Fp>\u003Cpre>\u003Ccode>mix.copy('public\u002Fassets\u002Fvendor\u002Ffont-awesome\u002Ffonts', 'public\u002Fbuild\u002Ffonts');    mix.copy('public\u002Fassets\u002Fvendor\u002Fbootstrap\u002Ffonts', 'public\u002Fbuild\u002Ffonts');\nmix.copy('public\u002Fassets\u002Fimg', 'public\u002Fbuild\u002Fimg');\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp>Nah kamu sekarang tinggal jalanin fungsi gulp di command line.\u003C\u002Fp>\u003Cp>Elixir akan meminify scripts dan styles dan juga copy beberapa assets yg dibutuhkan ke folder public\u002Fbuild\u003C\u002Fp>\u003Cp>Lalu bagaimana cara memanggil js dan css yang sudah kita minify tersebut?\u003C\u002Fp>\u003Cp>Kita akan pakai yang namanya versioning, fitur ini uda ada di elixir juga.\u003C\u002Fp>\u003Cp>Caranya kamu tambahin lagi script untuk versioning di file gulpfile.js seperti di bawah ini:\u003C\u002Fp>\u003Cpre>\u003Ccode>mix.version([\n        'build\u002Fmin.js',\n        'build\u002Fmin.css'\n    ]);\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp>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.\u003C\u002Fp>\u003Cp>Sekarang kita akan menampilkan file yg sudah di minify ini di view yang kita punya.\u003C\u002Fp>\u003Cp>Kita buat dulu helpers file untuk manambahkan fungsi \u003Ccode>elixir()\u003C\u002Fcode> seperti yang ada di laravel 5\u003C\u002Fp>\u003Cp>Ada banyak cara menambahkan helper di laravel 4. Kita buat sebuah file baru di folder app\u002Flibraries dengan nama elixir-helper.php\u003C\u002Fp>\u003Cpre>\u003Ccode><?php\nif ( ! function_exists('elixir'))\n{\n    \u002F**\n     * Get the path to a versioned Elixir file.\n     *\n     * @param  string  $file\n     * @return string\n     *\u002F\n    function elixir($file)\n    {\n        static $manifest = null;\n        if (is_null($manifest))\n        {\n            $manifest = json_decode(file_get_contents(public_path().'\u002Fbuild\u002Frev-manifest.json'), true);\n        }\n        if (isset($manifest[$file]))\n        {\n            return '\u002Fbuild\u002F'.$manifest[$file];\n        }\n        throw new InvalidArgumentException(\"File {$file} not defined in asset manifest.\");\n    }\n}\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp>Edit composer.json file, tambahkan baris di bawah ini di bawah classmap\u003C\u002Fp>\u003Cpre>\u003Ccode>\"files\" : [     \"app\u002Flibraries\u002Felixir-helper.php\" ]\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp>Jalankan composer dump-autoload\u003C\u002Fp>\u003Cp>Sekarang kita bisa panggil fungsi \u003Ccode>elixir()\u003C\u002Fcode> di semua view\u003C\u002Fp>\u003Cpre>\u003Ccode><link href=\"{{ elixir('build\u002Fmin.css') }}\" rel=\"stylesheet\">\n<script src=\"{{ elixir(\"build\u002Fmin.js\") }}\"><\u002Fscript>\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp>That is gays, gitu kira-kira bagaimana cara mengaplikasikan elixir yang ada di laravel 5 untuk laravel 4. \u003C\u002Fp>\u003Cp>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.\u003C\u002Fp>Please follow and like us:\u003Ca href=\"http:\u002F\u002Fwww.specificfeeds.com\u002Fwidgets\u002FemailSubscribeEncFeed\u002FUmN5cWduWHlmN09VS1JQcFMrLzFJODRBMlMxY3R4RWlzQnFqb2REQlVwRWxodzRTT3NLYTNxQ2FUbzFvSkJTM2hFMU9SOVdWdGNiSlF0N3ZFMjdqR1A0U2VoL0tFYXdjb1JOUnRldUlqd2ZHYU84K2lvQXZ4aHNXQ3hYZ2g2N018RlF5OExKZXdlaW1QWllodDc3c3ZscmliQ1pDaTFBSFdTWUQ3MElieVNIST0=\u002FOA==\u002F\">\u003Cimg src=\"data:image\u002Fgif;base64,R0lGODlhAQABAIAAAAAAAP\u002F\u002F\u002FyH5BAEAAAAALAAAAAABAAEAAAIBRAA7\"\u002F>\u003C\u002Fa>\u003Ca href=\"http:\u002F\u002Ftwitter.com\u002Fshare\">\u003C\u002Fa>\u003Ca href=\"https:\u002F\u002Fwww.pinterest.com\u002Fpin\u002Fcreate\u002Fbutton\u002F?url=&media=&description=\">\u003C\u002Fa> Tags: Elixir Laravel","Agus Yusida February 22, 2017 Apa itu elixir? Dikutip dari laravel.com Laravel Elixir provides a clean, fluent API for defining basic Gulp tasks for your Larave",[],[],0]