Catatan Front End Workflow

Catatan Front End Workflow

KuReview –Sebagai melengkapi  bagian dari #100DaysOfCode. Saya mencoba untuk mulai menerapkan menggunakan gulp untuk beberapa portofolio saya. Salah satunya, saya akan mencoba untuk membut Aplikasi Cuaca dengan memanfatkan gulp untuk manajemen front end. Sambil belajar gulp saya juga mencoba mulai memasuki ekosistem javascript disamping saya mengerjakan skripsi saya.

Nah, dbawaah ini saya tuliskan beberapa Catatan Front End Workflow  yang saya dapatkan ketika menonton salah satu video dari Youtube. Mengingat agar saya sendiri bisa hafal dan memahami serta jika lupa cukup melihat catatan saya ini dan tidak membuka video di youtube lagi. Selamat Membaca dan mempraktekannya ya!

Menggunakan :

  1. Gulp
  2. Webpack + Babel es5 / es6
  3. Sass
  4. Browser-sync

Tools :

  1.  Visual Studio Code
  2. Setting Javascript Babel


Contoh Project baru :

  1. yarn init
  2. Run Command ” yarn add gulp gulp-sass gulp-autoprefixer webpack-stream browser-sync baabel-core babel-loader babel-preset-es2016 –dev
  3. Buat file gulpfile.js dan isikan seperti dibawah ini

    4. Buat struktur folder seperti berikut

    5. Selanjutnya kita buat untuk Gulp Task untuk Sass dengan seperti ini

    6. Gulp Task untuk Browser Sync

    7. Buat file di folder resource/sass/ dan beri nama file tersebut app.scss dan buat bodynya diberi warna hitam.
    8. Buat file di folder public dan beri nama file tersebut index.html hasilnya nanti seperti ini :

   9. Selanjutnya kita compile dengan perintah gulp sass

 10. Hasilnya nanti di folder public/assets/css akan ada file app.css

 11. Selanjutnya kita akan mencoba untuk menjalankan BrowserSync. Ketikkan di terminal gulp serve

 Nanti otomatis browser akan membuka port 3000 dan hasilnya seperti ini :

Nah, itu tadi Front End Workflow  untuk Gulpnya. Selanjutnya kita akan membahas workflow untuk Webpack.
1, Buatlah file dengan nama webpack.config.js dan taruh di file yang sejajar dengan gulpfile.js dan ketikan seperti berikut ini

2.Lalu buatlah file dengan nama app.js di file resource/assets/js/app.js sehingga nanti hasil compile webpack akan muncul di /public/assets/js/ yang telah kita setting tadi di Webpack.

3. Lalu kita install jquery dengan ketikkaan perintah di terminal “yarn add jquery –dev “
4.  Selanjutnya di app.js yang telah kita buat tadi , ketikkan sebagai berikut :

window.$ = window.jQuery = require(“jquery”);

5. Selanjutnya kita ketikkan command ” webpack -d ” , d untuk development

6. Setelah itu kita balik lagi ke gulpfile.js kita. Selanjutnya kita tambahkan gulp task untuk webpack. Seperti berikut

    7. Jangan lupa tambahkaan gulp watch  untuk webpack. seperti berikut :

        gulp.watch(‘./resource/assets/js/**/*.js’,[‘script’]);
        gulp.watch(“./public/assets/js/app.js”).on(“change”,browserSync.reload)

    8. Selanjutnya jalankan Gulp Serve. Semoga tidak terjadi error!

    9. Test apakaah javascript tersebut sudah msuk dengan mengetikkan function alert.

    $(function () {
        alert(“oke”)
    })

    10. File Lengkap Gulp nanti seperti ini :

    Oke, mungkin cukup sekian catatan saya mengenai  Front End Workflow . Artikel saya ini disandur dari salah satu video kepunyaannya mas Ade Yahya. Bisa cek di bawah ini untuk videonya seperti apa. Jangan lupaa untuk melihat artikel saya sebelumnya mengeni Review Novel Sherlock HolmesThe Game of Death.

    Terima Kasih
    Rabu, 24 Januari 2018
    Naufaldi Rafif S

    Leave a Reply

    Your email address will not be published. Required fields are marked *