Task Runners (Gulp, Grunt, v.v.) và Bundlers (Webpack, Browserify). Tại sao lại sử dụng cùng nhau?

119
invincibleDudess 2015-11-06 21:05.

Tôi hơi mới đối với thế giới task runner và Bundler 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 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 task runner làm. Nhưng tôi vẫn có một ví dụ rất 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.

Chưa quen với điều này, tôi có thể đang đưa mọi thứ đi sai hướng. Sẽ rất tuyệt nếu bạn có thể chỉ ra những gì tôi đang thiếu. Mọi liên kết hữu ích đều được chào đón.

Cảm ơn trước.

2 answers

227
4m1r 2015-11-07 09:51.

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

WebpackBrowserify là các 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 (lý tưởng là) 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, 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à khuyết đ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 hay 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ế khởi động để giúp bạn truy cập đúng tệp hoặc mô-đun trong một gói lớn tiềm năng.

Ranh giới mờ nhạt giữa người chạy và người hỗ trợ có thể là người đóng gói cũng có thể thực hiện các chuyển đổi phức tạp hoặc chuyển đổi thí điểm trong thời gian chạy của họ, vì vậy họ có thể làm một số việc mà người chạy tác vụ có thể làm. Trên thực tế, giữa Browserify và webpack có thể có khoảng một trăm 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 gulp đượ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 là ...;)) về những gì hoạt động tốt nhất cho ứng dụng của bạn.

Nói như vậy, bạn có thể thấy một dự án phức tạp thực sự sử dụng cả trình chạy tác vụ và trình gói gói cùng một lúc hoặc song song với nhau. 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 mình 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 mình trong trình duyệt. Và bởi 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á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ả những công nghệ này vì rất có thể bạn sẽ thấy (sử dụng) tất cả chúng trong quá trình làm nghề của mình.

0
ling 2020-04-01 23:00.

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

Nó đơn giản hơn để sử dụng so với 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.

Cú pháp có dạng như sau:

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 rằng nó sẽ giúp.

Related questions

MORE COOL STUFF

Cate Blanchett chia tay chồng sau 3 ngày bên nhau và vẫn kết hôn với anh ấy 25 năm sau

Cate Blanchett chia tay chồng sau 3 ngày bên nhau và vẫn kết hôn với anh ấy 25 năm sau

Cate Blanchett đã bất chấp những lời khuyên hẹn hò điển hình khi cô gặp chồng mình.

Tại sao Michael Sheen là một diễn viên phi lợi nhuận

Tại sao Michael Sheen là một diễn viên phi lợi nhuận

Michael Sheen là một diễn viên phi lợi nhuận nhưng chính xác thì điều đó có nghĩa là gì?

Hallmark Star Colin Egglesfield Các món ăn gây xúc động mạnh đối với người hâm mộ tại RomaDrama Live! [Loại trừ]

Hallmark Star Colin Egglesfield Các món ăn gây xúc động mạnh đối với người hâm mộ tại RomaDrama Live! [Loại trừ]

Ngôi sao của Hallmark Colin Egglesfield chia sẻ về những cuộc gặp gỡ với người hâm mộ ly kỳ tại RomaDrama Live! cộng với chương trình INSPIRE của anh ấy tại đại hội.

Tại sao bạn không thể phát trực tuyến 'chương trình truyền hình phía Bắc'

Tại sao bạn không thể phát trực tuyến 'chương trình truyền hình phía Bắc'

Bạn sẽ phải phủi sạch đầu đĩa Blu-ray hoặc DVD để xem tại sao Northern Exposure trở thành một trong những chương trình nổi tiếng nhất của thập niên 90.

Where in the World Are You? Take our GeoGuesser Quiz

Where in the World Are You? Take our GeoGuesser Quiz

The world is a huge place, yet some GeoGuessr players know locations in mere seconds. Are you one of GeoGuessr's gifted elite? Take our quiz to find out!

8 công dụng tuyệt vời của Baking Soda và Giấm

8 công dụng tuyệt vời của Baking Soda và Giấm

Bạn biết đấy, hai sản phẩm này là nguồn điện để làm sạch, riêng chúng. Nhưng cùng với nhau, chúng có một loạt công dụng hoàn toàn khác.

Hạn hán, biến đổi khí hậu đe dọa tương lai của thủy điện Hoa Kỳ

Hạn hán, biến đổi khí hậu đe dọa tương lai của thủy điện Hoa Kỳ

Thủy điện rất cần thiết cho lưới điện của Hoa Kỳ, nhưng nó chỉ tạo ra năng lượng khi có nước di chuyển. Bao nhiêu nhà máy thủy điện có thể gặp nguy hiểm khi các hồ và sông cạn kiệt?

Quyên góp tóc của bạn để giúp giữ nước sạch của chúng tôi

Quyên góp tóc của bạn để giúp giữ nước sạch của chúng tôi

Tóc tỉa từ các tiệm và các khoản quyên góp cá nhân có thể được tái sử dụng như những tấm thảm thấm dầu và giúp bảo vệ môi trường.

Một thương hiệu kế thừa khác có được cuộc sống mới khi những người chủ mới của Black Opal có được Hội chợ thời trang

Một thương hiệu kế thừa khác có được cuộc sống mới khi những người chủ mới của Black Opal có được Hội chợ thời trang

Desiree Rogers, trái, và Cheryl Mayberry McKissack Chuyển sang, Fenty Beauty và Pat McGrath, có một đế chế làm đẹp mới do phụ nữ làm chủ đang trỗi dậy. Sau thương vụ mua lại mỹ phẩm Black Opal vào tháng 9, đội ngũ quyền lực của Giám đốc điều hành công ty Desiree Rogers và Chủ tịch Cheryl Mayberry McKissack đã thông báo mua lại thương hiệu làm đẹp tiên phong Fashion Fair từ người sáng lập Johnson Publishing Company (JPC).

Ngoài việc trở nên vô nghĩa, các bên bộc lộ giới tính giờ đây đã trở nên chết người

Ngoài việc trở nên vô nghĩa, các bên bộc lộ giới tính giờ đây đã trở nên chết người

Đối với những người có quá nhiều thời gian, tiệc tiết lộ giới tính là một cách thú vị để không cần áp đặt những định kiến ​​hạn chế lên thai nhi trước một đối tượng bạn bè giả vờ quan tâm một cách lịch sự. Tuy nhiên, việc chỉ dựa vào những chiếc bánh nướng có màu nhân tạo để biểu thị một tiếng hoo-ha hoặc một đứa trẻ đi tè đã trở nên xa xỉ trong các bậc cha mẹ trên Instagram.

Kirstjen Nielsen đang cố gắng đổi mới bản thân với tư cách là một người phụ nữ 'nói ra sự thật cho sức mạnh'

Kirstjen Nielsen đang cố gắng đổi mới bản thân với tư cách là một người phụ nữ 'nói ra sự thật cho sức mạnh'

Hôm thứ Tư, cựu Bộ trưởng An ninh Nội địa Kirstjen Nielsen vì một lý do nào đó đã được đưa ra một diễn đàn để phát biểu tại Hội nghị thượng đỉnh Những người phụ nữ quyền lực nhất của Fortune. Và có thể đoán trước được, người phụ nữ giám sát các nỗ lực (đang diễn ra) của chính quyền Trump nhằm chia cắt các gia đình ở biên giới đã sử dụng thời gian của mình như một cơ hội để tự bảo vệ mình và tự nhận mình là người — và hãy hít thở sâu ở đây — “đã nói sự thật với quyền lực.

Toyota Racing Development sẽ cho ra mắt Supra 3000GT Concept, Massive Wing vào tháng tới

Toyota Racing Development sẽ cho ra mắt Supra 3000GT Concept, Massive Wing vào tháng tới

Vì thế hệ mới nhất của chiếc xe điều chỉnh được yêu thích trên thế giới hiện đã có mặt tại đây, nên chỉ có điều kiện là Toyota Racing Development sẽ đưa phiên bản Supra thế hệ thứ năm sửa đổi của riêng mình đến SEMA vào tháng tới. Toyota đã cho chúng tôi một gợi ý về những gì sẽ xảy ra trong tuần này: một chiếc Concept GR Supra 3000GT hiện đại.

Nicky Hilton Forced to Borrow Paris' 'I Love Paris' Sweatshirt After 'Airline Loses All [My] Luggage'

Nicky Hilton Forced to Borrow Paris' 'I Love Paris' Sweatshirt After 'Airline Loses All [My] Luggage'

Nicky Hilton Rothschild's luggage got lost, but luckily she has an incredible closet to shop: Sister Paris Hilton's!

Kate Middleton dành một ngày bên bờ nước ở London, cùng với Jennifer Lopez, Julianne Hough và hơn thế nữa

Kate Middleton dành một ngày bên bờ nước ở London, cùng với Jennifer Lopez, Julianne Hough và hơn thế nữa

Kate Middleton dành một ngày bên bờ nước ở London, cùng với Jennifer Lopez, Julianne Hough và hơn thế nữa. Từ Hollywood đến New York và mọi nơi ở giữa, hãy xem các ngôi sao yêu thích của bạn đang làm gì!

17 tuổi bị đâm chết trong khi 4 người khác bị thương trong một cuộc tấn công bằng dao trên sông Wisconsin

17 tuổi bị đâm chết trong khi 4 người khác bị thương trong một cuộc tấn công bằng dao trên sông Wisconsin

Các nhà điều tra đang xem xét liệu nhóm và nghi phạm có biết nhau trước vụ tấn công hay không

Thanh thiếu niên, Gia đình Florida Hội đồng quản trị trường học về Luật 'Không nói đồng tính': 'Buộc chúng tôi tự kiểm duyệt'

Thanh thiếu niên, Gia đình Florida Hội đồng quản trị trường học về Luật 'Không nói đồng tính': 'Buộc chúng tôi tự kiểm duyệt'

Vụ kiện, nêu tên một số học khu, lập luận rằng dự luật "Không nói đồng tính" được ban hành gần đây của Florida "có hiệu quả im lặng và xóa bỏ học sinh và gia đình LGBTQ +"

Đường băng hạ cánh

Đường băng hạ cánh

Cuối hè đầu thu là mùa hoài niệm. Những chiếc đèn đường chiếu ánh sáng của chúng qua những con đường đẫm mưa, và những chiếc lá dưới chân - màu đỏ cam tắt trong bóng chạng vạng - là lời nhắc nhở về những ngày đã qua.

Hãy tưởng tượng tạo ra một chiến lược nội dung thực sự CHUYỂN ĐỔI. Nó có thể.

Hãy tưởng tượng tạo ra một chiến lược nội dung thực sự CHUYỂN ĐỔI. Nó có thể.

Vào năm 2021, tôi khuyến khích bạn suy nghĩ lại mọi thứ bạn biết về khách hàng mà bạn phục vụ và những câu chuyện bạn kể cho họ. Lùi lại.

Sự mất mát của voi ma mút đã mở ra trái tim tôi để yêu

Sự mất mát của voi ma mút đã mở ra trái tim tôi để yêu

Vào ngày sinh nhật thứ 9 của Felix The Cat, tôi nhớ về một trong những mất mát lớn nhất trong cuộc đời trưởng thành của tôi - Sophie của tôi vào năm 2013. Tôi đã viết bài luận này và chia sẻ nó trên nền tảng này một thời gian ngắn vào năm 2013.

Khi bạn không thể trở thành người mà Internet muốn bạn trở thành

Khi bạn không thể trở thành người mà Internet muốn bạn trở thành

Tôi ghét từ "tàu đắm". Mọi người cảm thấy thoải mái trong la bàn đạo đức của riêng mình, và khi làm như vậy, họ thấy mình vượt qua sự phán xét.

Language