SỬ DỤNG GULP TRONG PHÁT TRIỂN THEMENGUYỄN VĂN ĐƯỢC – LAPTRINH.SENVIET.ORG

CONTENT• Why we should change.• How to use Gulp.• What plugins should be used.

DEVELOPMENT BUILDCODE

COMPILE CODE

COMPRESS IMAGES

CLEAN FILES

UPDATE CHANGELOG

VERSION

DOCCUMENT

ZIP

CODE

COMPILE CODE

BROWSER ON PC

BROWSER ON MOBILE

BUILD CODE

COMPILE CODE

COMPRESS IMAGES

REMOVE FILES

UPDATE CHANGELOG

BUMB VERSION

UPDATE DOCCUMENT

ZIP

WE HATE• Do things repeatedly.• Many tedious task.• Waste of time.• Complex config.

WE LOVE• SASS, ES6.• Optimize image.• More time to do exciting task.• Do less, get more.

TASK RUNNER

TASK RUNNER

Config: easier to readSpeed: FastPlugin: 2670 pluginsPersonal Interest

GO WITH GULP BUILD

DEVELOPMENTconfig tasks

gulp dev

code

gulp build

INSTALL GULP

Install nodejs Install gulp cli

Install gulpConfig task

$ npm install –g gulp-cli $ mkdir my-project $ cd my-project $ npm install gulp --save-dev $ >> gulpfile.js

PROJECT STRUCTURE gulptheme |-- dev | |-- fonts | |-- scss | | `-- main.scss | |-- js | | |-- mergable | | | |-- share-dialog.js | | | `-- script.js | | `-- customizer.js | `-- img | |-- logo.png | `-- banner.png |-- css |-- js |-- img |-- inc |-- languages |-- doccuments |-- template-parts |-- gulpfile.js |-- node_modules |-- style.css |-- index.php `-- functions.php

THE PLUGIN NEEDED• gulp-sass• gulp-concat• gulp-autoprefixer• gulp-uglify• gulp-plumber• browser-sync

• gulp-imagemin• gulp-zip

PLUGIN $ npm install gulp-sass gulp-autoprefixer –save-dev-------------------------------------------------- 1 const sass = require('gulp-sass'); 2 const autoprefixer = require('gulp-autoprefixer'); 3 4 gulp.task('sass', function() { 5 return gulp.src(scssFiles) 6 .pipe(plumber({ errorHandler: onError })) 7 .pipe(sass()) 8 .pipe(autoprefixer()) 9 .pipe(gulp.dest("css")) 10 .pipe(browserSync.stream()); 11 });

SASSIMAGEJACASCRIPTZIP

PLUGIN $ npm install gulp-imagemin –save-dev-------------------------------------------------- 1 const imagemin = require('gulp-imagemin'); 2 const plumber = require('gulp-plumber'); 3 4 gulp.task(’image', function() { 5 return gulp.src(imageFiles) 6 .pipe(plumber({ errorHandler: onError })) 7 .pipe(imagemin()) 8 .pipe(gulp.dest('img')); 9 });

SASSIMAGEJACASCRIPTZIP

PLUGIN $ npm install gulp-concat –save-dev-------------------------------------------------- 1 const concat = require('gulp-concat'); 2 const plumber = require('gulp-plumber'); 3 4 gulp.task(‘js-vendor ', function() { 5 return gulp.src(jsFiles) 6 .pipe(plumber({ errorHandler: onError })) 7 .pipe(concat(‘vendor.js’)) 8 .pipe(uglify()) 9 .pipe(gulp.dest(’js')); 10 });

SASSIMAGEJACASCRIPTZIP

PLUGINSASSIMAGEJACASCRIPTZIP

HỎI ĐÁPNguyenVanDuocIT@gmail.com

CẢM ƠN CÁC BẠNLAPTRINH.SENVIET.ORG