Người chạy tác vụ (Gulp, Grunt, v.v.) và Bundlers (Webpack, Browserify). Tại sao sử dụng cùng nhau?

Tôi là một chút mới mẻ với thế giới nhiệm vụ và người chạy nhiệm vụ và trong khi trải qua những thứ như

Grunt, Gulp, Webpack, Browserify

, Tôi không cảm thấy có nhiều sự khác biệt giữa chúng. Nói cách khác, tôi cảm thấy Webpack có thể làm mọi thứ mà một người chạy nhiệm vụ làm. Nhưng tôi vẫn nhận được một ví dụ lớn trong đó gulp và webpack được sử dụng cùng nhau. Tôi không thể tìm ra lý do tại sao.

Là người mới trong việc này, tôi có thể đang đưa mọi thứ đi sai hướng. Sẽ thật tuyệt nếu bạn có thể chỉ ra những gì tôi đang thiếu. Bất kỳ liên kết hữu ích đều được chào đón.

Cảm ơn trước.

Grunt và Gulp thực sự là những người chạy nhiệm vụ và chúng có những khác biệt như các tác vụ được điều khiển cấu hình so với các phép biến đổi dựa trên luồng. Mỗi người có điểm mạnh và điểm yếu riêng, nhưng vào cuối ngày, họ giúp bạn tạo ra các nhiệm vụ có thể chạy để giải quyết vấn đề xây dựng lớn hơn. Hầu hết thời gian, họ không liên quan gì đến thời gian chạy thực tế của ứng dụng, mà họ chuyển đổi hoặc họ đặt các tệp, cấu hình và những thứ khác để thời gian chạy hoạt động như mong đợi. Đôi khi, họ thậm chí sinh ra các máy chủ hoặc các quy trình khác mà bạn cần để chạy ứng dụng của mình.

Webpack và Browserify là gói gói. Về cơ bản, chúng được thiết kế để chạy qua tất cả các phụ thuộc của gói và nối nguồn của chúng vào một tệp mà lý tưởng nhất có thể được sử dụng trong trình duyệt. Chúng rất quan trọng đối với sự phát triển web hiện đại, bởi vì chúng tôi sử dụng rất nhiều thư viện được thiết kế để chạy với Node.js và trình biên dịch v8 . Một lần nữa, có những ưu và nhược điểm và những lý do khác nhau mà một số nhà phát triển thích cái này hoặc cái kia (hoặc đôi khi cả hai!). Thông thường các gói đầu ra của các giải pháp này chứa một số loại cơ chế bootstrapping để giúp bạn đến đúng tệp hoặc mô-đun trong gói có khả năng rất lớn.

Dòng mờ giữa vận động viên và bundlers có thể là bundlers cũng có thể làm biến đổi phức tạp hoặc xuyên pilations trong thời gian chạy của họ, vì vậy họ có thể làm một vài điều mà người chạy nhiệm vụ có thể làm. Trên thực tế, giữa browserify và webpack có lẽ có khoảng một trăm máy biến áp mà bạn có thể sử dụng để sửa đổi mã nguồn của mình. Để so sánh, có ít nhất 2000 plugin được liệt kê trên npm ngay bây giờ. Vì vậy, bạn có thể thấy rằng có những định nghĩa rõ ràng (hy vọng ...;)) về những gì hoạt động tốt nhất cho ứng dụng của bạn.

Điều đó đang được nói, bạn có thể thấy một dự án phức tạp thực sự sử dụng cả hai trình chạy tác vụ và gói gói cùng một lúc hoặc song song. Ví dụ tại văn phòng của tôi, chúng tôi sử dụng gulp để bắt đầu dự án của chúng tôi và webpack thực sự được chạy từ một tác vụ gulp cụ thể tạo ra các gói nguồn mà chúng tôi cần để chạy ứng dụng của chúng tôi trong trình duyệt. Và vì ứng dụng của chúng tôi là đẳng cấu , chúng tôi cũng gói một số mã máy chủ .

Theo ý kiến ​​khiêm tốn của tôi, bạn có thể muốn làm quen với tất cả các công nghệ này bởi vì rất có thể bạn sẽ thấy (sử dụng) tất cả chúng trong quá trình phát triển sự nghiệp của mình.

Tôi vừa mới tạo ra trình chạy / gói nhiệm vụ của riêng mình.

Nó đơn giản để sử dụng hơn gulp và có lẽ là webpack (mặc dù tôi chưa bao giờ sử dụng webpack).

Nó rất đơn giản và có babel, browserify, uglify, minify và tay lái ra khỏi hộp.

Cú pháp trông như thế này:

const Autumn = require("autumn-wizard");




const w = new Autumn();

//----------------------------------------
// CSS
//----------------------------------------
var cssFiles = [
    './lib/pluginABC/src/css/**/*.{css,scss}',
];
w.forEach(cssFiles, srcPath => {
    var dstPath = w.replace('/src/', '/dist/', srcPath);
    dstPath = w.replace('.scss', '.css', dstPath);
    dstPath = w.replace('.css', '.min.css', dstPath);
    w.minify(srcPath, dstPath, {
        sourceMap: useSourceMap,
    });
});


//----------------------------------------
// BUNDLE THE JS MODULE
//----------------------------------------
var srcPath = "./lib/pluginABC/src/main.js";
var dstPath = "./lib/pluginABC/dist/bundled.min.js";
w.bundle(srcPath, dstPath, {
    debug: useSourceMap,
});


//----------------------------------------
// CREATE THE HANDLEBARS TEMPLATES
//----------------------------------------
var tplPaths = [
    "./lib/pluginABC/src/templates/**/*.hbs",
];
dstPath = "./lib/pluginABC/dist/templates/bundled.js";
w.precompile(tplPaths, dstPath);

Và tài liệu ở đây: https://github.com/lingtalfi/Autumn

Hy vọng nó sẽ giúp.