Computer >> 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 làm việc Sass và JS)

Hướng dẫn về Gulp 4 này sẽ giải thích từng bước, cách thiết lập Gulp trong quy trình làm việc của bạn để biên dịch các tệp Sass và JavaScript.

Nếu bạn chưa sử dụng Gulp, tôi thực sự khuyên bạn nên kiểm tra nó! Bạn có thể sử dụng Gulp để chạy nhiều tác vụ hữu ích, chẳng hạn như biên dịch tệp Sass của bạn sang CSS, xử lý tệp JavaScript và tối ưu hóa tệp của bạn.

Dưới đây là các bước cơ bản để cài đặt và chạy Gulp mà chúng tôi sẽ đề cập trong hướng dẫn này:

  1. Cài đặt gulp-cli trên dòng lệnh của bạn bằng cách chạy npm install gulp-cli -g .
  2. Cài đặt Gulp bằng cách chạy npm install gulp .
  3. Cài đặt các gói npm khác cho quy trình làm việc Gulp của bạn.
  4. Tạo một gulpfile.js tệp trong thư mục gốc dự án của bạn.
  5. Nhập các gói npm của bạn dưới dạng mô-đun trong gulpfile của bạn.
  6. Thêm các tác vụ của bạn vào gulpfile để biên dịch các tệp SCSS / JS của bạn và chạy tác vụ đồng hồ.
  7. Chạy gulp lệnh để chạy tất cả các tác vụ của bạn.

Gulp là gì và nó có chức năng gì?

Gulp là một công cụ sẽ chạy các tác vụ khác nhau cho bạn trong quy trình phát triển web của bạn. Nó có thể được gọi là một gói, một công cụ xây dựng hoặc một trình chạy tác vụ. Các công cụ tương tự là Webpack và Grunt (mặc dù Grunt đang nhanh chóng trở nên lỗi thời).

Đây là những gì chúng tôi sẽ nhờ Gulp làm cho chúng tôi:

  1. Biên dịch các tệp Sass của chúng tôi sang CSS
  2. Thêm tiền tố nhà cung cấp vào CSS của chúng tôi
  3. Thu nhỏ tệp CSS cuối cùng của chúng tôi
  4. Kết hợp (tức là kết hợp) các tệp JS của chúng tôi
  5. Hủy xác minh tệp JS cuối cùng của chúng tôi
  6. Di chuyển các tệp CSS / JS cuối cùng vào /dist của chúng tôi thư mục.

Khá tuyệt, phải không ?!

Vì vậy, cách nó hoạt động là, tất cả các cài đặt và tác vụ của bạn được lưu trữ trong một gulpfile.js tập tin. Và bạn chạy Gulp trên dòng lệnh của mình.

Phần tuyệt vời của điều đó là khi bạn đã thiết lập xong gulpfile, bạn có thể dễ dàng sử dụng lại nó cho các dự án khác. Vì vậy, đó là một tiết kiệm thời gian rất lớn!

Hãy chuyển sang cài đặt và thiết lập Gulp trên máy tính của bạn.

Cách cài đặt Gulp 4

Trước khi có thể chạy Gulp, bạn sẽ cần cài đặt một số thứ:

  • Cài đặt Node.js nếu bạn chưa có.
  • Cài đặt Tiện ích Dòng lệnh Gulp bằng cách chạy npm install --global gulp-cli .

Khi bạn đã Gulp hoạt động, hãy xem một dự án demo mà tôi đã xây dựng sử dụng Gulp!

Đó là một dự án giao diện người dùng có nghĩa là một cách nhanh chóng để tôi bắt đầu với bất kỳ trang web giao diện người dùng đơn giản nào.

(Tôi cũng có nhiều đoạn mã trong phần còn lại của hướng dẫn này, vì vậy bạn cũng có thể tham khảo những đoạn mã đó!)

Để thiết lập dự án bảng điều khiển phía trước:

  • Sao chép hoặc tải xuống kho lưu trữ Git của dự án này vào máy tính của bạn.
  • Mở dự án và trong thư mục dự án gốc, đi tới dòng lệnh của bạn và chạy npm install . Thao tác này sẽ cài đặt các gói npm được liệt kê trong package.json tệp, đặc biệt là Gulp 4.

Bây giờ bạn sẽ thiết lập các tệp dự án và cài đặt tất cả các gói npm mà chúng tôi sẽ sử dụng để chạy các tác vụ Gulp.

Vì các tệp từ kho đã sẵn sàng, nếu bạn nhập gulp trong dòng lệnh, bạn sẽ thấy một kết quả như thế này:

> 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'...

Và bạn đã chạy Gulp!

Điều gì đang xảy ra trong dự án khi bạn chạy Gulp?

Được rồi, bạn có dự án hoạt động thành công! Bây giờ, hãy đi vào chi tiết hơn về những gì có trong dự án và cách thức hoạt động của dự án.

Đầu tiên, đây là tóm tắt nhanh về cấu trúc tệp của dự án của chúng tôi:

  • index.html - tệp HTML chính của bạn
  • package.json - chứa tất cả các gói npm để cài đặt khi bạn chạy npm install .
  • gulpfile.js - chứa cấu hình và chạy tất cả các tác vụ Gulp
  • / app - thư mục làm việc, bạn sẽ chỉnh sửa các tệp SCSS / JS tại đây
  • / dist - Gulp sẽ xuất các tệp tại đây, không chỉnh sửa các tệp này

Trong quy trình làm việc của mình, bạn sẽ chỉnh sửa các tệp HTML, SCSS và JS. Sau đó, Gulp sẽ phát hiện bất kỳ thay đổi nào và biên dịch mọi thứ. Sau đó, bạn sẽ tải các tệp CSS / JS cuối cùng của mình từ /dist trong index.html của bạn tệp.

Bây giờ chúng ta đã có Gulp đang chạy, hãy xem xét kỹ hơn cách hoạt động của Gulp.

Gulpfile.js chính xác là gì?

Dưới đây là giải thích chuyên sâu về từng phần của gulpfile và những gì chúng thực hiện:

Bước 1:Khởi tạo mô-đun npm

Ở đầu gulpfile.js , chúng tôi có một loạt các hằng số nhập các gói npm mà chúng tôi đã cài đặt trước đó, bằng cách sử dụng require() chức năng.

Đây là những gì mà các gói của chúng tôi thực hiện:

Gói Gulp:

  • gulp - chạy mọi thứ trong gulpfile.js. Chúng tôi chỉ xuất các hàm gulp cụ thể mà chúng tôi sẽ sử dụng, như src , dest , watch , và những người khác. Điều này cho phép chúng tôi gọi các hàm đó trực tiếp mà không cần gulp , ví dụ, chúng ta có thể chỉ cần nhập src() thay vì gulp.src() .

Các gói CSS:

  • gulp-sourcemaps - ánh xạ các kiểu CSS trở lại tệp SCSS ban đầu trong các công cụ dành cho nhà phát triển trình duyệt của bạn
  • gulp-sass - biên dịch SCSS sang CSS
  • gulp-postcss - chạy trình sửa lỗi tự động và cssnano (xem bên dưới)
  • autoprefixer - thêm tiền tố nhà cung cấp vào CSS
  • cssnano - thu nhỏ CSS

Các gói JS:

  • gulp-concat - nối nhiều tệp JS vào một tệp
  • gulp-uglify - thu nhỏ JS

Chúng tôi cũng đang sử dụng một chuỗi thay thế để thực hiện một số chặn bộ nhớ cache trên các tham chiếu tệp CSS và JS trong index.html. Điều này đảm bảo rằng khi bạn thực hiện thay đổi tệp, trang web sẽ tải bản sao mới nhất của các tệp đó.

Gói thay thế chuỗi:

  • gulp-replace - thêm một tham số chuỗi vào tham chiếu CSS / JS để phá vỡ bộ nhớ cache

Bây giờ chúng tôi đã thêm các mô-đun của mình, hãy bắt đầu hoạt động!

Bước 2:Sử dụng các mô-đun để chạy các tác vụ Gulp của bạn

“Nhiệm vụ” trong Gulp về cơ bản là một hàm thực hiện một mục đích cụ thể.

Chúng tôi đang tạo một số tác vụ tiện ích để biên dịch các tệp SCSS và JS của chúng tôi, đồng thời cũng để xem các tệp đó để biết bất kỳ thay đổi nào. Sau đó, các tác vụ tiện ích đó sẽ được chạy trong tác vụ Gulp mặc định của chúng tôi khi chúng tôi nhập gulp trên dòng lệnh.

Tạo hằng số cho đường dẫn tệp

Tuy nhiên, trước khi viết các nhiệm vụ của mình, chúng ta có một vài dòng mã lưu các đường dẫn tệp của chúng ta dưới dạng hằng số. Đây là tùy chọn, nhưng tôi thích sử dụng các biến đường dẫn để chúng tôi không phải nhập lại chúng theo cách thủ công mỗi lần:

Mã này tạo scssPath và jsPath hằng số mà chúng tôi sẽ sử dụng để cho Gulp biết nơi tìm thấy tệp.

Nhiệm vụ thông minh

Đây là mã cho nhiệm vụ Sass của chúng tôi:

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

Nhiệm vụ Sass của chúng tôi, được gọi là scssTask() , đang làm một số điều. Trong Gulp, bạn có thể xâu chuỗi nhiều hàm bằng cách sử dụng hàm Gulp pipe() sau chức năng đầu tiên.

Trong nhiệm vụ của chúng tôi, Gulp đầu tiên đang chạy src() để tải thư mục nguồn của các tệp SCSS. Nó đang sử dụng hằng số mà chúng tôi đã tạo trước đó, files.scssPath .

Sau đó, sau src() chúng tôi đang đưa mọi thứ khác vào quá trình xây dựng. Bạn có thể nghĩ về nó giống như việc thêm ngày càng nhiều đoạn ống vào một đường ống hiện có.

Các chức năng mà nó đang chạy là:

  • sourcemaps.init() - sơ đồ nguồn cần được thêm vào đầu tiên sau src()
  • sass() biên dịch tất cả các tệp SCSS thành một tệp CSS
  • postcss() chạy hai plugin khác:
    • autoprefixer() để thêm tiền tố nhà cung cấp vào CSS
    • cssnano() để giảm thiểu tệp CSS
  • sourcemaps.write() tạo tệp bản đồ nguồn trong cùng một thư mục.
  • dest() yêu cầu Gulp đặt tệp CSS cuối cùng và tệp bản đồ nguồn CSS vào /dist thư mục.

Tác vụ JS

Đây là mã cho nhiệm vụ biên dịch tệp JS của chúng tôi:

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

Tác vụ JavaScript của chúng tôi, được gọi là jsTask() , cũng đang chạy nhiều chức năng:

  • src() để tải các tệp JS từ files.jsPath .
  • concat() để nối tất cả các tệp JS thành một tệp JS.
  • uglify() để hủy xác minh / thu nhỏ tệp JS.
  • dest() để di chuyển tệp JS cuối cùng vào /dist thư mục.

Nhiệm vụ phá vỡ bộ nhớ cache

Đây là mã cho tác vụ phá vỡ bộ nhớ cache:

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

Trong tệp index.html, tôi đang sử dụng các tham chiếu sau cho các tệp CSS và JS:

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

<script src="dist/all.js?cb=123"></script>

Lý do mà bộ nhớ đệm tạm dừng hữu ích là vì trình duyệt của bạn và máy chủ lưu trữ web thường sẽ lưu vào bộ nhớ cache hoặc lưu bản sao của các tệp nội dung như tệp CSS và JS. Vì vậy, khi bạn tải lại cùng một trang, trình duyệt sẽ nhanh hơn chỉ cần tải lên các bản sao được lưu trong bộ nhớ cache cục bộ thay vì phải tải xuống lại chúng từ máy chủ.

Vấn đề là đôi khi bạn không muốn tải phiên bản đã lưu cũ. Khi bạn đã thực hiện các thay đổi đối với tệp CSS hoặc JS của mình và bạn triển khai lại máy chủ, bạn muốn buộc mọi người tải xuống lại các tệp đó.

Vì vậy, một cách để buộc tải xuống lại là thêm một chuỗi truy vấn nhỏ
?cb=123 ở cuối các tham chiếu tệp đó. Nếu trình duyệt tải lại trang và chuỗi truy vấn khác với lần trước, nó sẽ làm mới tệp.

Tôi đang sử dụng Gulp replace() hàm để tìm kiếm các chuỗi có chứa “cb =” và bất kỳ số nào. Và thay thế số đó bằng một số mới tính theo thời gian hiện tại được chuyển đổi thành mili giây kể từ năm 1970.

Bằng cách đó mỗi khi Gulp chạy, chuỗi truy vấn sẽ khác nhau và bạn sẽ đảm bảo rằng các tệp CSS và JS mới được tải trong trình duyệt của người dùng

Gulp w atch task

Gulp watch() chức năng là một tính năng siêu hữu ích. Khi bạn chạy nó, nó sẽ chạy liên tục, theo dõi các tệp của bạn để phát hiện bất kỳ thay đổi nào. Khi phát hiện thay đổi, nó sẽ chạy bất kỳ số lượng tác vụ nào mà bạn yêu cầu.

Điều này thật tuyệt vì sau đó bạn không phải tiếp tục chạy gulp theo cách thủ công sau mỗi lần thay đổi mã.

Đây là mã ví dụ về tác vụ đồng hồ Gulp của chúng tôi:

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

watch() hàm nhận ba tham số, nhưng chúng tôi chỉ sử dụng hai tham số:

  • globs, nghĩa là các chuỗi đường dẫn tệp,
  • tùy chọn (không được sử dụng) và
  • nhiệm vụ, nghĩa là những tác vụ chúng tôi muốn chạy.

Những gì chúng tôi đang có nhiệm vụ xem của mình là xem các tệp trong scssPath của chúng tôi và jsPath các thư mục. Sau đó, nếu có bất kỳ thay đổi nào được thực hiện trong một trong hai, hãy chạy scssTask và jsTask nhiệm vụ đồng thời.

Bây giờ chúng tôi đã thiết lập xong các tác vụ tiện ích, chúng tôi cần thiết lập tác vụ Gulp chính của mình.

Tác vụ Gulp mặc định

Đây là tác vụ Gulp chính, sẽ tự động chạy nếu bạn nhập gulp trên dòng lệnh. 

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

Gulp sẽ tự động tìm kiếm default tác vụ trong gulpfile.js của bạn khi bạn sử dụng gulp yêu cầu. Vì vậy, bạn phải xuất tác vụ mặc định để nó hoạt động.

Nhiệm vụ mặc định của chúng tôi sẽ thực hiện như sau:

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

Bạn cũng sẽ nhận thấy rằng chúng tôi đang đặt tất cả các tác vụ đó bên trong series() chức năng.

Đây là một trong những thay đổi mới lớn trong Gulp 4 về cách nó xử lý các tác vụ– bạn bắt buộc phải gói tất cả các tác vụ (ngay cả những tác vụ đơn lẻ) trong series() hoặc parallel() .

Những thay đổi trong Gulp 4

Nếu bạn đang sử dụng tasks() để chạy mọi thứ, bạn có thể nhận thấy rằng có một sự khác biệt bây giờ.

Thay vì sử dụng gulp.task() để chứa tất cả các hàm tác vụ của bạn, chúng tôi đang tạo các hàm thực tế như scssTask() và watchTask() .

Điều này tuân theo nguyên tắc chính thức của Gulp để tạo nhiệm vụ.

Nhóm Gulp khuyên bạn nên sử dụng exports chứ không phải là tasks() :

Vì vậy, trong khi họ vẫn cho phép bạn sử dụng tasks() , hiện tại hơn là tạo các hàm JS cho từng tác vụ và sau đó xuất chúng. Nếu có thể, tôi khuyên bạn nên cập nhật cú pháp của mình để phản ánh điều này, vì có thể Gulp sẽ không chấp nhận tasks() tại một số điểm.

Sự cố khi di chuyển từ Gulp 3?

Nếu bạn đang sử dụng Gulp 3 và tất cả những gì bạn muốn là có được thứ hoạt động tốt với Gulp 4, thì bạn thật may mắn!

Thay đổi chính liên quan đến cách bạn chạy các tác vụ.

Gulp 4 giới thiệu hai hàm mới để chạy các tác vụ:series() và parallel() . Nó cung cấp cho bạn tùy chọn chạy nhiều tác vụ đồng thời hoặc cái này đến cái khác.

Trước đây, trong Gulp 3, bạn có thể chỉ cần liệt kê một hàm duy nhất hoặc nhiều hàm trong một mảng. Tuy nhiên, trong Gulp 4, làm như vậy mà không đặt chúng trong series() hoặc parallel() sẽ xuất hiện một lỗi ngay bây giờ.

Một cái gì đó như:

AssertionError [ERR_ASSERTION]: Task function must be specified


Dưới đây là cách bạn có thể nhanh chóng khắc phục điều đó:


Công việc trong cú pháp Gulp 3 (cũ)

Trong Gulp 3, bạn có thể đã chạy các tác vụ theo cách này:

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


Công việc trong cú pháp Gulp 4

Đặt những tác vụ đó vào một hàm chuỗi () như thế này:

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


Và điều đó sẽ sửa lỗi chức năng tác vụ với thay đổi nhỏ nhất có thể! 🙂

Tải xuống tệp dự án

Tất cả mã tôi đã hiển thị ở đây là từ một kho lưu trữ GitHub mà tôi có cho bảng soạn sẵn giao diện người dùng. Nó có nghĩa là một bộ công cụ khởi động nhanh cho bất kỳ dự án trang web front-end đơn giản nào.

Chúng tôi hoan nghênh bạn kiểm tra, tùy chỉnh và sử dụng nó cho các dự án của riêng bạn!

Kiểm tra kho lưu trữ GitHub tại đây.