Otomasi pengembangan Frontend dengan SASS dan Gulp menggunakan NodeJS (Bahasa Indonesia).
Disclaimer: alur kerja ini cocok untuk project menengah hingga besar. Untuk pembuatan 1-3 halaman website static yang tidak akan banyak dimaintenance cukup menggunakan cara tradisional saja.
Selain disclaimer diatas, berikut adalah peruntukan dari dibuatnya readme ini:
- Untuk profesional: sebagai pengingat saat akan memulai project. Karena pasti step2 ini hanya dilakukan diawal project saja, bisa aja lupa.
- Untuk pemula: sebagai media pembelajaran untuk meningkatkan kemampuan dibidang frontend developer, karena pengetahuan ini akan menjadi nilai+ di industri nanti.
- Untuk saya: kembali ke poin satu.
Karena (menurut saya) ini penting untuk semua tingkatan, jadi silahkan di watching saja.
NB: workflow ini dibuat untuk developer yang sudah cukup sering mengerjakan project. 5x project kecil atau 3x project menegah. Untuk yang baru banget mulai belajar web development boleh diskip dulu.
Secara garis besar, peralatan perang yang digunakan terdiri dari 3 tools sakti yaitu SASS, Gulp dan tentu NodeJS.
SASS atau Syntactically Awesome StyleSheets adalah sebuah bahasa yang diadopsi dari CSS, namun dengan fitur yang lebih baik yang dapat memudahkan developer dalam hal menulis kode CSS.
SASS bukan pengganti CSS, SASS adalah tools yang membuat CSS menjadi lebih mudah.
SASS memiliki fitur2 bahasa pemgrograman seperti variable, nesting dll. Lengkapnya disini.
Gulp adalah tool untuk membantu proses web development. Seperti asisten virtual, Gulp dapat membantu mengerjakan tugas yang repetitif dan membosankan.
Seperti merefresh browser untuk melihat perubahan, seru kan? Lebih lengkap mengenal Gulp bisa klik disini.
Menurut Wikipedia, Node.js adalah platform perangkat lunak pada sisi-server dan aplikasi jaringan.
Ditulis dengan bahasa JavaScript. Node.js memiliki library server HTTP sendiri sehingga memungkinkan untuk menjalankan server web tanpa menggunakan program server web seperti Apache atau Lighttpd.
Go ahead. Oiya, semua step ini dijalankan melalui terminal atau CMD.
Unduh installer Node.js di https://nodejs.org dengan memilih sistem operasi dan arsitektur yang digunakan. Jalankan installer, lalu ikuti instruksi instalasi.
NPM (Node Package Manager) sudah ada dalam paket instalasi node, https://www.npmjs.com
Buka CMD, lalu instal Gulp secara global.
npm install gulp --global
node -v && npm -v && gulp -v && sass --version
Jika muncul versi dari tools diatas berarti semua sudah siap.
mkdir mywork && cd mywork
npm init
Package.json berisi informasi metadata tentang project seperti deskripsi, versi, dan module yang akan digunakan dalam project, dsb. Isinya kira-kira seperti berikut :
{
"name": "mywork",
"version": "1.0.0",
"description": "belajar SASS dan Gulp dengan NodeJS",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "Your Nick",
"license": "ISC"
}
mkdir app dist && cd app && mkdir css img js scss && type NUL > scss/style.scss && type NUL > css/style.css && type NUL > index.html && cd..
Maka akan membuat struktur folder sepeti ini:
- app
-- css
--- style.css
-- img
-- js
-- scss
--- style.scss
-- index.html
- dist
Ada 2 folder. Folder app digunakan pada saat proses development. Terdapat file html, css, gambar javascript dan library lain yang digunakan dalam project. Sedangkan dist adalah optimasi dari folder app yang siap untuk di publish.
npm install --save-dev gulp
Proses ini akan menghasilkan folder node_modules didalam folder project (mywork).
- gulp-sass
- gulp-sass
- browser-sync
- gulp-sourcemaps
- gulp-clean
- gulp-minify-html
- gulp-uglify
- gulp-imagemin
- gulp-concat
- gulp-cssnano
- gulp-plumber
- gulp-notify
- gulp-zip
- merge-stream
- gulp-htmlmin
npm install --save-dev gulp-sass browser-sync gulp-sourcemaps gulp-clean gulp-minify-html gulp-uglify gulp-imagemin gulp-concat gulp-cssnano gulp-plumber gulp-notify gulp-zip merge-stream gulp-htmlmin
Untuk fungsi2 package diatas bisa digoogling
Buat file baru dengan nama gulpfile.js di dalam folder mywork. File ini menyimpan tugas2 yang akan dilakukan oleh Gulp.
Contoh tugas untuk compile file *.scss dari folder scss menjadi file *.css ke folder css
// Konfigurasi
var gulp = require('gulp');
// Compile SCSS
gulp.task('sass', function () {
return gulp.src('./app/scss/*.scss')
.pipe(sass())
.pipe(gulp.dest('./app/css'))
});// Konfigurasi
var gulp = require('gulp');
var sass = require('gulp-sass');
var browserSync = require('browser-sync').create();
var reload = browserSync.reload;
var plumber = require('gulp-plumber');
var notify = require('gulp-notify');
var merge = require('merge-stream');
var clean = require('gulp-clean');
var cssnano = require('gulp-cssnano');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var imagemin = require('gulp-imagemin');
var htmlmin = require('gulp-htmlmin');
var zip = require('gulp-zip');
var gutil = require('gulp-util');
var clean = require('gulp-clean');
gulp.task('sass', function(){
var onError = function(err) {
notify.onError({
title: "Gulp",
subtitle: "Failure!",
message: "Error: <%= error.message %>",
sound: "Beep"
})(err);
this.emit('end');
};
return gulp.src('./app/scss/*.scss')
.pipe(plumber({errorHandler: onError}))
.pipe(sass({ style: 'expanded' }))
.pipe(gulp.dest('./app/css'))
.pipe(gulp.dest('./app/css'))
.pipe(notify({
title: 'Gulp',
subtitle: 'success',
message: 'Sass task success'
}));
});
// Clean Build Directory
gulp.task('cleanBuild',function(){
return gulp.src('dist/**/*', {read: false})
.pipe(clean());
});
// Deploy to Build Directory
gulp.task('deploy', gulp.series(['cleanBuild']), function(){
// optimasi css
var cssOptimize = gulp.src('app/css/*.css')
.pipe(cssnano())
.pipe(gulp.dest('dist/css/'));
// menggabung semua file js dan optimasi
var jsOptimize = gulp.src('app/js/*.js')
.pipe(concat('all.js'))
.pipe(uglify())
.pipe(gulp.dest('dist/js'));
// optimasi image
var imgOptimize = gulp.src('app/images/*')
.pipe(imagemin())
.pipe(gulp.dest('dist/images'))
// optimasi html
var htmlOptimize = gulp.src('app/*.html')
.pipe(htmlmin({collapseWhitespace: true}))
.pipe(gulp.dest('dist'));
// fonts folder
var fonts= gulp.src('app/fonts/**')
.pipe(gulp.dest('dist/fonts'));
return merge(cssOptimize,jsOptimize,imgOptimize,htmlOptimize,fonts);
});
// Deploy to Zip file
gulp.task('deployZip', gulp.series(['deploy']),function(){
var zipNow = gulp.src('dist/**')
.pipe(zip('deploy.zip'))
.pipe(gulp.dest('dist'));
});
gulp.task('cfonts',function(){
gulp.src('app/fonts/**')
.pipe(gulp.dest('dist/fonts'));
});
// Default Task. Local webserver dan sinkronisasi dengan browser.
gulp.task('default', function(){
browserSync.init({
server: {
baseDir: "./app"
}
});
gulp.watch('./app/**/*').on('change', reload);
gulp.watch('./app/scss/*.scss', gulp.series(['sass']));
});Untuk fungsi2nya silahkan dipelajari disini sudah sangat lengkap.
Jalankan dengan perintah
gulp
Browser akan mebuka lokal server, koding seperti biasa, setiap save file browser akan merefresh otomatis.
Kode error? akan ada notifikasi di pojok kanan atas browser, error log akan ditampilkan pada jendela CMD.
Untuk membuat file yang sudah di optimasi, mengunakan perintah
gulp deployZip
File2 pada folder app akan dikirim ke folder dist dalam bentuk sudah terpotimasi.
Sampai sini merupakan proses2 pengembangan web dengan pendekatan frontend, masih ada step2 lanjutan seperti koneksi dengan Git, normalsasi struktur folder dan lain
Inti dari Ilmu pengetahuan adalah explorasi, silahkan explorasi kemampuanmu dan jangan lupa sesuaikan dengan lingkungan kerja.
File readme ini dibuat sebagai catatan pribadi, tools ataupun package yang digunakan bersifat personal. Sesuaikan dengan lingkungan kerja agar semua team (jika ada) merasa nyaman dan terbantu.
Sebagai sumber inspirasi penulisan adalah Sastra Panca Nababan pada kegiatan MedanJs Meetup2 (December 2016).
Contact Me: yogiprsetya@gmail.com