Recommended
More Related Content
What's hot
What's hot (19)
Viewers also liked
Similar to Sử dụng Gulp trong phát triển theme
Similar to Sử dụng Gulp trong phát triển theme (20)
Recently uploaded
Recently uploaded (20)
Sử dụng Gulp trong phát triển theme
- 1. SỬ DỤNG GULP TRONG PHÁT TRIỂN THEME NGUYỄN VĂN ĐƯỢC – LAPTRINH.SENVIET.ORG
- 2. CONTENT • Why we should change. • How to use Gulp. • What plugins should be used.
- 3. DEVELOPMENT BUILD CODE COMPILE CODE COMPRESS IMAGES CLEAN FILES UPDATE CHANGELOG VERSION DOCCUMENT ZIP CODE COMPILE CODE BROWSER ON PC BROWSER ON MOBILE
- 4. BUILD CODE COMPILE CODE COMPRESS IMAGES REMOVE FILES UPDATE CHANGELOG BUMB VERSION UPDATE DOCCUMENT ZIP
- 5. WE HATE • Do things repeatedly. • Many tedious task. • Waste of time. • Complex config.
- 6. WE LOVE • SASS, ES6. • Optimize image. • More time to do exciting task. • Do less, get more.
- 7. TASK RUNNER
- 8. TASK RUNNER
- 9. Config: easier to read Speed: Fast Plugin: 2670 plugins Personal Interest
- 10. GO WITH GULP BUILD DEVELOPMENT config tasks gulp dev code gulp build
- 11. 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
- 12. PROJECT STRUCTURE gulptheme |-- dev | |-- fonts | |-- scss | | `-- main.scss | |-- js | | |-- mergable | | | |-- share-dialog.js | | | `-- script.js | | `-- customizer.js | `-- img
- 13. THE PLUGIN NEEDED • gulp-sass • gulp-concat • gulp-autoprefixer • gulp-uglify • gulp-plumber • browser-sync • gulp-imagemin • gulp-zip
- 14. 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 }); SASS
- 15. 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 }); IMAGE
- 16. 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 }); JACASCRIPT
- 19. CẢM ƠN CÁC BẠN LAPTRINH.SENVIET.ORG
Editor's Notes
- Ví dụ ta tạo một loạt thao tác, compile scss, điền minify, combine nhiều file, đổi tên file. Rồi khi có file scss nào đó thay đổi thì một loạt thao tác trên được thực hiện tự động.
- Ví dụ ta tạo một loạt thao tác, compile scss, điền minify, combine nhiều file, đổi tên file. Rồi khi có file scss nào đó thay đổi thì một loạt thao tác trên được thực hiện tự động.
- Ví dụ ta tạo một loạt thao tác, compile scss, điền minify, combine nhiều file, đổi tên file. Rồi khi có file scss nào đó thay đổi thì một loạt thao tác trên được thực hiện tự động.
- Ví dụ ta tạo một loạt thao tác, compile scss, điền minify, combine nhiều file, đổi tên file. Rồi khi có file scss nào đó thay đổi thì một loạt thao tác trên được thực hiện tự động.