Gulp là gì
Gulp là tools giúp ta viết một số task để có thể đấy nhanh qúa trình phát triển Web. gulp là công cụ dành cho giai đoạn Preprocesing (quá trình tiền xử lý code public). Nó cho phép chúng ta làm nhiều tác vụ ( task ) để đi đến kết quả là automate & enhance your workflow(tự động hóa và nâng cao quy trình làm việc của bạn).
Nó thường được sử dụng để làm các tác vụ front end như:
- Reload trình duyệt ví dụ: livereload, browser load,...
- Xử lý các Preprocesing như LESS, SASS, ES6,...
- Optimizing assets như CSS, JS, images
Bạn có thể xem thêm: tạo gulp file minify CSS và tự động compile js Preprocesing .
Sử dụng thành thạo Gulp sẽ giúp ta thao tác rất nhanh trong việc development web. Tuy nhiên thì do không phải sử dụng thường xuyên nên hiện tại mình chỉ sử dụng để Code front-end cho nhanh.
Install Gulp
Trước khi sử dụng gulp bạn cần có nodejs. Nếu bạn sử dụng macos bạn có thể follow bài viết này: thêm nodejs - npm vào hệ điều hành macos Nếu bạn dùng windows bạn có thể download nodejs từ trang chủ này https://nodejs.org/en/download/ và auto bấm next liên tục là xong.
Sau đó để instal gulp vào thì bạn cần instal vào global trước:
# install global
npm install gulp -g
Tạo project và install dependencies
Sau khi cài đặt gulp xong bạn tạo file package.json thông qua npm bằng cách gõ vào terminal như sau:
Cài Gulp dependencies
sau khi cài gulp thì chúng ta có thể cài đặt gulp để chạy thực bằng terminal:
npm install gulp
npm install sass gulp-sass
npm install gulp-livereload
npm install gulp-minify
npm install gulp-minify-css
npm install gulp-sass
npm install node-sass
npm install gulp-cached
npm install gulp-rename
Tạo Cấu Trúc Thư Mục
|- BUILDER
|- JAVASCRIPT/
|- app.js
|- SCSS/
|- client.scss
|- dist/
|- gulpfile.js
|- node_modules/
|- package.json
folder app (đầu vào input ) là folder chứa tất cả code source của bạn trong đó, ví dụ scss less hoặc javascript cần build, hay thậm chí nếu bạn cần build cả images và font
dist (đầu ra output ) là folder code sẽ được build ra.
gulpfile.js là file code bạn sẽ code các task ở đây
package.json là của nodejs khi bạn muốn sử dụng gulp bạn phải tạo ra nó trước.
Viết gulp task
Bạn có thể sửa lại file gulpfile.js thành như sau:
var gulp = require('gulp')
var sass = require('gulp-sass')(require('sass'));
var livereload = require('gulp-livereload')
var minify = require('gulp-minify')
var minifyCss = require('gulp-minify-css')
var path = require('path')
var rename = require("gulp-rename")
var cache = require('gulp-cached')
gulp.task('sass', function () {
return gulp.src('SCSS/client.scss')
.pipe(sass())
.pipe(minifyCss({ compatibility: 'ie8' }))
.pipe(gulp.dest(path.join(__dirname, '/dist/css/')))
.pipe(livereload())
});
gulp.task('js', function() {
return gulp.src([ "JAVASCRIPT/*.js" ])
.pipe(cache('linting'))
.pipe(minify({
ext: {
min: '.min.js'
},
noSource: true
}))
// .pipe(rename({ suffix: '.min' }))
.pipe(gulp.dest(path.join(__dirname, '/dist/js/')))
.pipe(livereload())
});
// Watch Files For Changes
gulp.task('watch', function () {
livereload.listen()
gulp.watch('SCSS/*.scss', gulp.series('sass'))
gulp.watch([
'JAVASCRIPT/*.js'
], gulp.series('js'));
});
khi đó đoạn gulp.task('watch', function () { sẽ lắng nghe mọi thay đổi trong folder JAVASCRIPT và SCSS. bạn thay đổi nó sẽ build code ví dụ bạn code scss và file trong folder SCSS thì task watch sẽ chạy và build ra css, js đã minify.
Run gulp watch
khâu chuẩn bị đã xong, bây giờ chúng ta đã có thể chạy gulp watch bằng terminal với lệnh :
# Bạn cần thay PATH là đường dẫn đến FOLDER BUILDER
cd [PATH]/BUILDER
# ví dụ: cd C:/xampp/BUILDER
gulp watch
nếu bạn dính lỗi trong hình hoặc điều gì tương tự thì hãy thử dùng terminal của máy hoặc command line của windows nhé!
Auto reload trong trình duyệt
Mỗi lần bạn có những thay đổi trong folder JAVASCRIPT/ thì bạn đã có thể build lại 1 cách tự động hơn bằng gulp watch, nhưng bạn hoàn toàn có thể tự động ngay cả với trình duyệt của bạn mà không cần F5 để php render lại code.
Việc hạn chế refresh trình duyệt sẽ khiến bạn code nhanh hơn cho hiệu suất làm việc tốt hơn. để làm được điều này chúng ta sẽ sử dụng extention của chrome như sau:
truy cập vào trình duyệt gõ vào url này:
chrome://extensions/?id=jnihajbhpnppcggbcgedagnkighmdlei
Lưu ý là sau khi cài xong bạn chạy Gulp watch trước rồi bấm vào cái icon này cho nó lắng nghe thay đổi nha. Nếu chưa chạy Gulp watch thì nó không có lắng nghe đc và ra lỗi này:
Thành Công thì cái nút nó sẽ như này:
