diff --git a/gulpfile.js b/gulpfile.js
new file mode 100644
index 0000000..0caab43
--- /dev/null
+++ b/gulpfile.js
@@ -0,0 +1,125 @@
+// Gulp file config by iqbal
+
+const {src, dest, watch, parallel} = require('gulp');
+const notify = require('gulp-notify');
+const browserSync = require('browser-sync').create();
+const sass = require('gulp-sass');
+const concat = require('gulp-concat');
+const plumber = require('gulp-plumber');
+const rename = require('gulp-rename');
+const postcss = require('gulp-postcss');
+const autoprefixer = require('autoprefixer');
+const cssnano = require('cssnano');
+const uglify = require('gulp-uglify');
+const imagemin = require('gulp-imagemin');
+const imageminMozjpeg = require('imagemin-mozjpeg');
+//dir
+var cssDir = './assets/css'; 
+var jsDir = './assets/js'; 
+var sassDir = './assets/sass/*.scss';
+var imgDir = './assets/img/*';
+
+//css
+var cssFileOne = 'path';
+var cssFileTwo = 'path';
+var cssFileThree = 'path';
+
+//js
+var jsFileOne = 'path';
+var jsFileTwo = 'path';
+var jsFileThree = 'path';
+
+// moving js
+function js(){
+	return src([jsFileOne, jsFileTwo, jsFileThree])
+     .pipe(plumber())
+	 .pipe(concat('plugin.min.js'))
+	 .pipe(uglify())
+	 .pipe(dest(jsDir))
+	 .pipe(notify({
+	 	message: 'File <%= file.relative %> wis dadi' 
+	 }));
+}
+
+// moving css
+function css(){
+	return src([cssFileOne,cssFileTwo,cssFileThree,])
+	 .pipe(plumber())
+	 .pipe(concat('plugin.min.css'))
+	 .pipe(postcss([autoprefixer(), cssnano()]))
+	 .pipe(dest(cssDir))
+	 .pipe(notify({
+	 	message: 'File <%= file.relative %> wis dadi'
+	 }));
+}
+
+//make structural folder
+function folder(){
+	 return src('*.*', {read: false})
+        .pipe(dest('./sandbox/_test'))
+        .pipe(dest('./assets'))
+        .pipe(dest('./assets/sass'))
+        .pipe(dest('./assets/css'))
+        .pipe(dest('./assets/js'))
+        .pipe(dest('./assets/img'))
+}
+
+//minify compile
+function minify(){
+	return src(sassDir)	
+	.pipe(plumber())
+	.pipe(sass({
+	 	errorLogToConsole: true
+	 }))
+	.on('error', console.error.bind( console ))
+	.pipe(rename({
+	 	suffix: '.min'
+	 }))
+	.pipe(postcss([autoprefixer(), cssnano()]))
+	.pipe(dest(cssDir))
+	 .pipe(notify({
+	 	message: 'Minify <%= file.relative %> berhasil bos'
+	 }));
+}
+
+
+//minfy image
+function image(){
+	 return src(imgDir)
+	.pipe(plumber())
+	.pipe(imagemin([
+		imageminMozjpeg({quality: 80})
+		]))
+	.pipe(dest(imgDir))
+	.pipe(plumber.stop())
+}
+
+function watching (){
+	browserSync.init({
+		server:{
+			baseDir: "./"
+		},
+		port: 8080
+	});
+	watch('./assets/sass/*.scss',minify).on('change',browserSync.reload);
+	watch("*.html").on('change',browserSync.reload);
+}
+
+function  watchcss(){
+	watch('./assets/sass/*.scss',minify);
+}
+
+//create folder first
+exports.folder = folder;
+//then update source
+exports.update = parallel(js, css);
+//updating  JS SOURCE ONLY
+exports.js = js;
+//updating  CSS SOURCE ONLY
+exports.css = css;
+//minify  IMG SOURCE
+exports.image = image;
+//Run this command for styling OPs
+exports.minify = minify;
+//Run this command for dev.
+exports.default = watching;
\ No newline at end of file
diff --git a/package.json b/package.json
index e1267e0..39cf57e 100644
--- a/package.json
+++ b/package.json
@@ -1,52 +1,64 @@
-{
-  "name": "4.Stisla",
-  "version": "1.0.0",
-  "description": "Stisla : Free Bootstrap Admin Template",
-  "main": "index.js",
-  "repository": "https://github.com/iqbalaqaba/stisla.git",
-  "author": "Iqbal <hello@iqbaldesignui.com>",
-  "license": "MIT",
-  "dependencies": {
-    "bootstrap": "^4.2.1",
-    "bootstrap-colorpicker": "^3.0.3",
-    "bootstrap-daterangepicker": "^3.0.3",
-    "bootstrap-social": "^5.1.1",
-    "bootstrap-tagsinput": "^0.7.1",
-    "bootstrap-timepicker": "^0.5.2",
-    "chocolat": "^0.4.2.1",
-    "cleave.js": "^1.4.7",
-    "codemirror": "^5.43.0",
-    "datatables": "^1.10.18",
-    "dropzone": "^5.5.1",
-    "flag-icon-css": "^3.2.1",
-    "font-awesome": "^4.7.0",
-    "fullcalendar": "^3.10.0",
-    "ionicons": "^4.5.5",
-    "izitoast": "^1.4.0",
-    "jquery-pwstrength": "https://github.com/matoilic/jquery.pwstrength",
-    "jquery": "^3.3.1",
-    "jquery-selectric": "^0.1.3",
-    "jquery-ui": "^1.12.1",
-    "jqvmap": "^1.5.1",
-    "jquery.nicescroll": "^3.7.6",
-    "moment": "^2.24.0",
-    "nicescroll": "^3.7.4",
-    "owl.carousel": "^2.3.4",
-    "perfect-scrollbar": "^1.4.0",
-    "prism": "^4.1.2",
-    "select2": "^4.0.6-rc.1",
-    "simple-weather": "^1.2.2",
-    "summernote": "^0.8.11",
-    "sweetalert": "^2.1.2",
-    "popper.js": "^1.14.7",
-    "tooltip.js": "^1.3.1",
-    "weathericons": "^2.1.0",
-    "jquery_upload_preview": "https://github.com/opoloo/jquery_upload_preview",
-    "chart.js": "^2.7.3",
-    "gmaps": "^0.4.24",
-    "jquery-sparkline": "https://github.com/gwatts/jquery.sparkline"
-  },
-  "devDependencies": {
-    "gulp": "^4.0.0"
-  }
-}
+{
+  "name": "4.Stisla",
+  "version": "1.0.0",
+  "description": "Stisla : Free Bootstrap Admin Template",
+  "main": "index.js",
+  "repository": "https://github.com/iqbalaqaba/stisla.git",
+  "author": "Iqbal <hello@iqbaldesignui.com>",
+  "license": "MIT",
+  "dependencies": {
+    "bootstrap": "^4.2.1",
+    "bootstrap-colorpicker": "^3.0.3",
+    "bootstrap-daterangepicker": "^3.0.3",
+    "bootstrap-social": "^5.1.1",
+    "bootstrap-tagsinput": "^0.7.1",
+    "bootstrap-timepicker": "^0.5.2",
+    "chocolat": "^0.4.2.1",
+    "cleave.js": "^1.4.7",
+    "codemirror": "^5.43.0",
+    "datatables": "^1.10.18",
+    "dropzone": "^5.5.1",
+    "flag-icon-css": "^3.2.1",
+    "font-awesome": "^4.7.0",
+    "fullcalendar": "^3.10.0",
+    "ionicons": "^4.5.5",
+    "izitoast": "^1.4.0",
+    "jquery-pwstrength": "https://github.com/matoilic/jquery.pwstrength",
+    "jquery": "^3.3.1",
+    "jquery-selectric": "^0.1.3",
+    "jquery-ui": "^1.12.1",
+    "jqvmap": "^1.5.1",
+    "jquery.nicescroll": "^3.7.6",
+    "moment": "^2.24.0",
+    "nicescroll": "^3.7.4",
+    "owl.carousel": "^2.3.4",
+    "perfect-scrollbar": "^1.4.0",
+    "prism": "^4.1.2",
+    "select2": "^4.0.6-rc.1",
+    "simple-weather": "^1.2.2",
+    "summernote": "^0.8.11",
+    "sweetalert": "^2.1.2",
+    "popper.js": "^1.14.7",
+    "tooltip.js": "^1.3.1",
+    "weathericons": "^2.1.0",
+    "jquery_upload_preview": "https://github.com/opoloo/jquery_upload_preview",
+    "chart.js": "^2.7.3",
+    "gmaps": "^0.4.24",
+    "jquery-sparkline": "https://github.com/gwatts/jquery.sparkline"
+  },
+  "devDependencies": {
+    "gulp": "^4.0.0",
+    "autoprefixer": "^9.4.7",
+    "browser-sync": "^2.26.3",
+    "cssnano": "^4.1.8",
+    "gulp-concat": "^2.6.1",
+    "gulp-imagemin": "^5.0.3",
+    "gulp-notify": "^3.2.0",
+    "gulp-plumber": "^1.2.1",
+    "gulp-postcss": "^8.0.0",
+    "gulp-rename": "^1.4.0",
+    "gulp-sass": "^4.0.2",
+    "gulp-uglify": "^3.0.1",
+    "imagemin-mozjpeg": "^8.0.0"
+  }
+}