Computer >> Hướng Dẫn Máy Tính >  >> Lập Trình >> Lập Trình

Hướng dẫn Gulp 4 cho người mới bắt đầu (Quy trình Sass và JS)

Hướng dẫn Gulp 4 này giải thích từng bước, cách thiết lập Gulp trong quy trình làm việc để compile file Sass và JavaScript.

Nếu chưa dùng Gulp, tôi khuyên bạn nên thử! Gulp chạy nhiều tác vụ hữu ích: compile Sass thành CSS, xử lý file JavaScript, tối ưu file.

Các bước cơ bản cài và chạy Gulp, sẽ bao quát trong hướng dẫn:

  1. Cài gulp-cli trên dòng lệnh: npm install gulp-cli -g.
  2. Cài Gulp: npm install gulp.
  3. Cài các gói npm khác cho quy trình Gulp.
  4. Tạo file gulpfile.js ở gốc dự án.
  5. Import gói npm như module trong gulpfile.
  6. Thêm tác vụ vào gulpfile compile SCSS/JS và chạy watch task.
  7. Chạy lệnh gulp để chạy tất cả tác vụ.

Gulp là gì và làm gì?

Gulp là công cụ chạy các tác vụ trong quy trình phát triển web. Có thể gọi là bundler, build tool, hoặc task runner. Công cụ tương tự: Webpack và Grunt (Grunt đang nhanh chóng lỗi thời).

Đây là những gì Gulp sẽ làm cho chúng ta:

  1. Compile file Sass thành CSS
  2. Thêm vendor prefix cho CSS
  3. Minify file CSS cuối cùng
  4. Concatenate (gộp) file JS
  5. Uglify file JS cuối cùng
  6. Di chuyển file CSS/JS cuối vào thư mục /dist.

Hay không?! 😄

Cách hoạt động: mọi setting và task lưu trong gulpfile.js. Chạy Gulp trên dòng lệnh.

Phần hay: khi đã setup xong gulpfile, bạn dễ dàng tái dùng cho dự án khác. Tiết kiệm thời gian khổng lồ!

Chuyển sang cài đặt và thiết lập Gulp.

Cách cài đặt Gulp 4

Trước khi chạy Gulp, cần cài:

  • Cài Node.js nếu chưa có.
  • Cài Gulp Command Line Utility bằng npm install --global gulp-cli.

Sau khi Gulp chạy được, xem dự án demo tôi xây dùng Gulp!

Đây là dự án front-end boilerplate, khởi đầu nhanh cho website front-end đơn giản.

(Cũng có nhiều code snippet trong hướng dẫn, bạn có thể tham khảo!)

Setup boilerplate:

  • Clone hoặc tải Git repo dự án này về máy.
  • Mở dự án, ở thư mục gốc, dòng lệnh chạy npm install. Sẽ cài gói npm trong package.json, đặc biệt Gulp 4.

Bây giờ đã có file dự án và mọi gói npm cần thiết.

Vì file từ repo sẵn sàng, gõ gulp trên dòng lệnh, sẽ thấy output như sau:

> gulp [22:29:48] Using gulpfile ~\Documents\GitHub\frontend-boilerplate\gulpfile.js [22:29:48] Starting 'default'... [22:29:48] Starting 'scssTask'... [22:29:48] Starting 'cacheBustTask'... [22:29:48] Finished 'cacheBustTask' after 39 ms [22:29:48] Starting 'jsTask'... [22:29:48] Finished 'jsTask' after 340 ms [22:29:48] Finished 'scssTask' after 347 ms [22:29:48] Starting 'watchTask'...

Đã chạy Gulp!

Đang xảy ra gì trong dự án khi chạy Gulp?

Đã chạy thành công! Xem chi tiết cấu trúc dự án và cách hoạt động.

Cấu trúc file nhanh:

  • index.html — file HTML chính
  • package.json — chứa gói npm cài khi chạy npm install.
  • gulpfile.js — chứa config và chạy tất cả task Gulp
  • /app — thư mục làm việc, edit file SCSS/JS ở đây
  • /dist — Gulp xuất file ra đây, không edit file này

Trong quy trình, bạn edit HTML, SCSS, JS. Gulp phát hiện thay đổi và compile. Sau đó load file CSS/JS cuối từ /dist trong index.html.

Đã chạy Gulp, xem chi tiết gulpfile.js.

Nội dung chính xác trong gulpfile.js?

Giải thích chi tiết từng phần gulpfile, và chức năng:

Bước 1: Khởi tạo module npm

Đầu gulpfile.js, nhiều constant import gói npm cài trước, dùng hàm require().

Chức năng gói:

Gói Gulp:

  • gulp — chạy mọi thứ trong gulpfile.js. Export chỉ các function Gulp cụ thể sẽ dùng, như src, dest, watch, v.v. Cho phép gọi trực tiếp không cần prefix gulp., ví dụ src() thay gulp.src().

Gói CSS:

  • gulp-sourcemaps — map style CSS ngược về file SCSS gốc trong dev tools trình duyệt
  • gulp-sass — compile SCSS thành CSS
  • gulp-postcss — chạy autoprefixer và cssnano (xem dưới)
  • autoprefixer — thêm vendor prefix cho CSS
  • cssnano — minify CSS

Gói JS:

  • gulp-concat — gộp nhiều file JS thành một file
  • gulp-uglify — minify JS

Cũng dùng string replace cho cache busting trên tham chiếu CSS/JS trong index.html. Đảm bảo khi đổi file, web load bản mới nhất.

Gói string replace:

  • gulp-replace — thêm tham số chuỗi cho tham chiếu CSS/JS để cache bust

Đã có module, dùng chúng cho task!

Bước 2: Dùng module chạy Gulp task

"Task" trong Gulp cơ bản là hàm thực hiện mục đích cụ thể.

Tạo vài utility task compile SCSS/JS, watch file thay đổi. Utility task chạy trong default Gulp task khi gõ gulp.

Tạo constant cho đường dẫn file

Trước khi viết task, vài dòng code lưu đường dẫn file làm constant. Tùy chọn, nhưng tôi thích dùng biến path để không gõ lại mỗi lần:

Code tạo constant scssPath và jsPath dùng cho Gulp tìm file.

Sass task

Code Sass task:

function scssTask(){ return src(files.scssPath) .pipe(sourcemaps.init()) .pipe(sass()) .pipe(postcss([ autoprefixer(), cssnano() ])) .pipe(sourcemaps.write('.')) .pipe(dest('dist') ); }

Sass task scssTask() làm vài việc. Gulp chain nhiều function bằng pipe() sau function đầu.

Task này: Gulp chạy src() load thư mục nguồn SCSS, dùng constant files.scssPath.

Sau src() pipe mọi thứ vào build process. Giống như nối thêm ống vào ống hiện có.

Các function chạy:

  • sourcemaps.init() — sourcemaps phải thêm đầu tiên sau src()
  • sass() — compile tất cả SCSS thành một file CSS
  • postcss() chạy 2 plugin:
    • autoprefixer() thêm vendor prefix CSS
    • cssnano() minify file CSS
  • sourcemaps.write() tạo file sourcemaps cùng thư mục.
  • dest() bảo Gulp đặt file CSS cuối và sourcemaps vào thư mục /dist.

JS task

Code task compile JS:

function jsTask(){ return src([files.jsPath]) .pipe(concat('all.js')) .pipe(uglify()) .pipe(dest('dist') ); }

JS task jsTask() chạy nhiều function:

  • src() load file JS từ files.jsPath.
  • concat() gộp tất cả file JS thành một file.
  • uglify() uglify/minify file JS.
  • dest() di chuyển file JS cuối vào /dist.

Cache bust task

Code cache bust task:

var cbString = new Date().getTime(); function cacheBustTask(){ return src(['index.html']) .pipe(replace(/cb=\d+/, 'cb=' + cbString)) .pipe(dest('.')); }

Trong index.html, tôi dùng tham chiếu CSS/JS sau:

<link rel="stylesheet" href="dist/style.css?cb=123"> <script src="dist/all.js?cb=123"></script>

Cache bust hữu ích vì trình duyệt và server thường cache (lưu) bản copy file asset như CSS/JS. Load lại trang, trình duyệt dùng bản cache local thay vì tải lại từ server — nhanh hơn.

Vấn đề: đôi khi không muốn load bản cũ. Khi đổi CSS/JS và deploy lại server, muốn ép người dùng tải lại file mới.

Cách ép tải lại: thêm querystring nhỏ ?cb=123 cuối tham chiếu file. Nếu trình duyệt reload và querystring khác lần trước, sẽ refresh file.

Dùng Gulp replace() tìm chuỗi chứa "cb=" và số bất kỳ. Thay số đó bằng số mới từ thời gian hiện tại đổi ra milliseconds từ 1970.

Mỗi lần Gulp chạy, querystring khác nhau, đảm bảo file CSS/JS mới load trên trình duyệt người dùng.

Gulp watch task

Gulp watch() function rất hữu ích. Khi chạy, nó chạy liên tục, watch file phát hiện thay đổi. Khi có thay đổi, chạy các task bạn chỉ định.

Hay vì không phải chạy thủ công gulp sau mỗi lần sửa code.

Code watch task:

function watchTask(){ watch( [files.scssPath, files.jsPath], parallel(scssTask, jsTask) ); }

watch() nhận 3 tham số, dùng 2:

  • globs: chuỗi đường dẫn file
  • options (không dùng)
  • tasks: task nào muốn chạy

Watch task: theo dõi file trong scssPath và jsPath. Nếu có thay đổi, chạy scssTask và jsTask đồng thời.

Đã xong utility task, setup main Gulp task.

Default Gulp task

Main Gulp task, tự chạy khi gõ gulp trên dòng lệnh.

exports.default = series( parallel(scssTask, jsTask), watchTask);

Gulp tự tìm task default trong gulpfile.js khi dùng lệnh gulp. Phải export default task để chạy.

Default task làm:

  • Chạy scssTask và jsTask đồng thời dùng parallel()
  • Sau đó chạy watchTask

Tất cả task bọc trong series().

Đây là thay đổi lớn Gulp 4: bắt buộc bọc mọi task (dù đơn lẻ) trong series() hoặc parallel().

Thay đổi trong Gulp 4

Nếu dùng task() function cũ, có thể nhận ra khác biệt.

Thay vì gulp.task() chứa tất cả task function, giờ tạo function thực như scssTask(), watchTask().

Để tuân thủ hướng dẫn chính thức Gulp cho tạo task.

Nhóm Gulp khuyên dùng exports thay task():

Mặc dù vẫn cho dùng task(), nhưng tạo JS function cho mỗi task rồi export là hiện đại hơn. Nên cập nhật cú pháp, vì Gulp có thể deprecate task() sau này.

Vấn đề chuyển từ Gulp 3?

Nếu dùng Gulp 3 và chỉ muốn chạy được với Gulp 4, may mắn cho bạn!

Thay đổi chính: cách chạy task.

Gulp 4 giới thiệu 2 function mới chạy task: series() và parallel(). Cho phép chạy nhiều task đồng thời, hoặc tuần tự.

Trước Gulp 3, liệt kê function đơn lẻ hoặc mảng nhiều function. Gulp 4, làm vậy mà không bọc trong series() hoặc parallel() sẽ báo lỗi.

Lỗi dạng:

AssertionError [ERR_ASSERTION]: Task function must be specified

Sửa nhanh:

Task cú pháp Gulp 3 cũ

gulp.task('default', ['sass', 'js', 'watch']); gulp.watch('app/scss/*.scss', ['sass']);

Task cú pháp Gulp 4

gulp.task('default', gulp.series('sass', 'js', 'watch')); gulp.watch('app/scss/*.scss', gulp.series('sass'));

Sửa lỗi task function với thay đổi nhỏ nhất! 🙂

Tải file dự án

Tất cả code ở đây từ GitHub repo front-end boilerplate của tôi. Starter kit nhanh cho dự án front-end đơn giản.

Mời bạn xem, tùy chỉnh, dùng cho dự án!

Xem GitHub repository tại đây.