Duyệt qua đang ngày càng trở thành một giải pháp khả thi để phát triển các tập lệnh JS và đề xuất một cú pháp được mô phỏng theo cú pháp của Node.js. Biên dịch tập lệnh với Duyệt qua Thì đơn giản. Trong quá trình phát triển, việc sử dụng theo dõi cho phép bạn biên dịch các tập tin một cách nhanh chóng. Mặc dù vậy, khi bạn muốn tích hợp phần biên dịch của mình với các tác vụ khác Nuốt chửng (như biên dịch tập tin Ít hơn), bạn gặp phải một vấn đề: cách sử dụng giám sát đồng thời với nuốt nước bọt. Câu trả lời trong bài viết này!

tóm lại

Sử dụng Gulp và Browserify – Cấp độ 0

Name: Agence Web Tremplin Numérique
Price range: $$$

dùng Nuốt chửng et Duyệt qua là khá đơn giản. Bạn có thể sử dụng API Browserify hoặc đơn giản hơn và sử dụng gulp-browserify sẽ cho phép bạn biên dịch các tệp của mình một cách dễ dàng.

const nuốt nước bọt = yêu cầu('nuốt chửng');
const trình duyệt = yêu cầu('gulp-browserify');
nuốt nước bọt. nhiệm vụ ('js', chức năng() {
nuốt nước bọt.src('src/*.js', { đọc: sai })
.pipe(trình duyệt())
.pipe(gulp.dest('./xây dựng/'))
});

Vấn đề bạn nhanh chóng gặp phải là để làm việc trên các tệp của bạn và biên dịch lại chúng một cách nhanh chóng, bạn sẽ phải phân tích cú pháp tất cả các tệp. Cái này rất đắt tiền. Duyệt qua sẽ phải tải tất cả các tệp của bạn cũng như tất cả các phụ thuộc mà bạn sử dụng. Dự án của bạn càng lớn, thời gian sẽ trôi qua càng nhanh. Ngoài ra, nếu bạn sử dụng biến đổi như Babelify thời gian sẽ tăng nhanh hơn nữa (Danh sách tất cả các plugin có sẵn qua Babel). Cũng là danh sách của tất cả duyệt biến đổi.

Trước khi tôi chỉ cho bạn giải pháp cuối cùng, đây là giải pháp sẽ trông như thế nào với giải pháp cổ điển nuốt nước bọt.

nuốt nước bọt. nhiệm vụ ("đồng hồ", chức năng () {
nuốt nước bọt.watch(“./src/*.js”, [“js”]).chúng tôi("thay đổi", chức năng(sự kiện) {
giao diện điều khiển.log(`Tệp ${event.path} đã ${event.type}`);
});
});

Với giải pháp này, mỗi khi bạn thay đổi một trong các tệp của mình, toàn bộ phần tổng hợp sẽ được khởi chạy.

theo dõi

theo dõi làm cho nó hiệu quả để biên dịch các tập tin của bạn với Duyệt qua. Nó sẽ lưu trong bộ nhớ kết quả của việc biên dịch từng tệp (tất cả các tệp được liên kết với tệp của bạn, chẳng hạn như tệp phụ thuộc…).

Khi một tệp được cập nhật, nó sẽ cập nhật dấu vân tay của tệp vừa được sửa đổi và tạo ra một bó lại mà không cần phân tích cú pháp tất cả các phụ thuộc của bạn.

Sử dụng Gulp, Browserify và Watchify – Cấp độ ∞

Cài đặt phụ thuộc Node.js

Bạn có thể cài đặt chúng bằng Yarn (nếu bạn thực sự cập nhật 🙂)!

1	$ sợi thêm trình duyệt gulp vinyl-buffer vinyl-source-stream watchify –dev

Nếu không, bạn đang sử dụng NPM cũ tốt 🙉

1	$ npm cài đặt browserify gulp vinyl-buffer vinyl-source-stream watchify –save-dev

gulpfile.js

"sử dụng nghiêm ngặt";
const trình duyệt = yêu cầu("duyệt"),
bộ đệm = yêu cầu("đệm vinyl"),
nuốt nước bọt = yêu cầu("nuốt chửng"),
đường dẫn = yêu cầu("con đường"),
nguồn = yêu cầu(“vinyl-nguồn-dòng”),
người dùng = yêu cầu(“nuốt chửng”),
theo dõi = yêu cầu(“quan sát”),
src = {
js: “./src/main.js”
},
điểm đến = {
js: "./xây dựng/"
};
cho phép người đóng gói;
chức năng bó(Hồ sơ) {
if (bó === undefined) {
if (hồ sơ === "đồng hồ") {
bundler = watchify(browserify(src.js));
} khác {
bundler = browserify(src.js);
}
}
bó();
}
chức năng bó lại() {
cho phép bắt đầu = mới Ngày().dành thời gian(),
_ = gói
.bó()
.chúng tôi("lỗi", util.log.bind(util, “Lỗi trình duyệt”))
.pipe(nguồn(“chính.js”))
.pipe(bộ đệm())
.pipe(gulp.dest(dest.js)),
thời gian = mới Ngày().getTime() – bắt đầu;
util.log("[browserify] gói hoàn trả đã mất" , sử dụng.colors.cyan(`${thời gian} ms`), util.colors.grey(`(${src.js})`));
trở lại _;
}
nuốt nước bọt. nhiệm vụ (“js”, bó.bind(vô giá trị));
nuốt nước bọt. nhiệm vụ ("đồng hồ", chức năng () {
bó("đồng hồ");
gói.on("cập nhật", bó.bind(vô giá trị));
});
nuốt nước bọt. nhiệm vụ ("mặc định", ["đồng hồ", “js”]);

Ở đây bạn có một ví dụ cực kỳ đơn giản nhưng đầy đủ chức năng. Mã này có thể được đơn giản hóa hơn nữa nhưng nó hiển thị cho bạn một bản phác thảo mã cần tạo để xử lý một tải lại nóng có hiệu quả.

Để đơn giản hóa nhiệm vụ của bạn, tôi cung cấp cho bạn một kho lưu trữ có guplfile.js hoàn chỉnh hơn, xử lý biên dịch tệp JavaScript avec Babel (và một số cài đặt trước như ES2015) mà còn cả các tệp Ít hơn trong khi quản lý hồ sơ như Développement có hay không đồng hồ đeo tay nhưng cũng sản xuất với sự thu nhỏ!

Kết luận

Hoàn toàn có thể sử dụng Duyệt qua hiệu quả với Nuốt chửng miễn là bạn chơi với API. Điều này buộc bạn phải đi chệch hướng một chút và làm mà không cần plugin Nuốt chửng mà chúng ta thường sử dụng.