NPM so với Bower so với Browserify so với Gulp và Grunt so với Webpack

1949
VB_ 2016-01-29 03:28.

Tôi đang cố gắng tóm tắt kiến ​​thức của mình về các trình quản lý gói, trình gói và trình chạy tác vụ JavaScript phổ biến nhất. Hãy sửa lại cho tôi nếu tôi sai:

  • npm& bowerlà người quản lý gói. Họ chỉ tải về các phụ thuộc và không biết cách tự xây dựng các dự án. Những gì họ biết là gọi webpack/ gulp/ gruntsau khi tìm nạp tất cả các phụ thuộc.
  • bowergiống như npm, nhưng xây dựng một cây phụ thuộc được làm phẳng (không giống như npmnó làm một cách đệ quy). Có nghĩa là npmtìm nạp các phụ thuộc cho mỗi phụ thuộc (có thể tìm nạp giống nhau một vài lần), trong khi yêu cầu bowerbạn đưa các phụ thuộc vào theo cách thủ công. Đôi khi bowernpmđược sử dụng cùng nhau cho front-end và back-end tương ứng (vì mỗi megabyte có thể quan trọng trong front-end).
  • gruntgulplà những người chạy nhiệm vụ để tự động hóa mọi thứ có thể tự động hóa (tức là biên dịch CSS / Sass, tối ưu hóa hình ảnh, tạo một gói và thu nhỏ / phân phối nó).
  • gruntso với gulp(giống như mavenso với gradlehoặc cấu hình so với mã). Grunt dựa trên cấu hình các tác vụ độc lập riêng biệt, mỗi tác vụ sẽ mở / xử lý / đóng tệp. Gulp yêu cầu lượng mã ít hơn và dựa trên các luồng Node, cho phép nó tạo chuỗi ống (mở lại cùng một tệp) và làm cho nó nhanh hơn.
  • webpack( webpack-dev-server) - đối với tôi, đó là một trình chạy tác vụ với tính năng tải lại nóng các thay đổi cho phép bạn quên tất cả các trình theo dõi JS / CSS.
  • npm/ bower+ plugin có thể thay thế trình chạy tác vụ. Khả năng của chúng thường giao nhau nên có những hàm ý khác nhau nếu bạn cần sử dụng gulp/ gruntover npm+ plugin. Nhưng trình chạy tác vụ chắc chắn tốt hơn cho các tác vụ phức tạp (ví dụ: "trên mỗi bản dựng, hãy tạo gói, chuyển từ ES6 sang ES5, chạy nó ở tất cả các trình giả lập trình duyệt, tạo ảnh chụp màn hình và triển khai tới dropbox thông qua ftp").
  • browserifycho phép đóng gói các mô-đun nút cho các trình duyệt. browserifyvs node's requirethực sự là AMD vs CommonJS .

Câu hỏi:

  1. Là gì webpack& webpack-dev-server? Tài liệu chính thức cho biết đó là một trình gói mô-đun nhưng đối với tôi nó chỉ là một trình chạy nhiệm vụ. Có gì khác biệt?
  2. Bạn sẽ sử dụng ở browserifyđâu? Chúng ta không thể làm tương tự với nhập nút / ES6?
  3. Khi nào bạn sử dụng gulp/ gruntover npm+ plugin?
  4. Vui lòng cung cấp ví dụ khi bạn cần sử dụng kết hợp

8 answers

1050
Dan Macák 2016-01-29 04:34.

Webpack và Browserify

Webpack và Browserify thực hiện khá nhiều công việc giống nhau, đó là xử lý mã của bạn để được sử dụng trong môi trường đích (chủ yếu là trình duyệt, mặc dù bạn có thể nhắm mục tiêu các môi trường khác như Node). Kết quả của quá trình xử lý như vậy là một hoặc nhiều gói - tập lệnh được lắp ráp phù hợp với môi trường được nhắm mục tiêu.

Ví dụ: giả sử bạn đã viết mã ES6 được chia thành các mô-đun và muốn có thể chạy nó trong trình duyệt. Nếu các mô-đun đó là mô-đun Node, trình duyệt sẽ không hiểu chúng vì chúng chỉ tồn tại trong môi trường Node. Các mô-đun ES6 cũng sẽ không hoạt động trong các trình duyệt cũ hơn như IE11. Hơn nữa, bạn có thể đã sử dụng các tính năng ngôn ngữ thử nghiệm (các đề xuất tiếp theo của ES) mà các trình duyệt chưa triển khai nên việc chạy tập lệnh như vậy sẽ chỉ gây ra lỗi. Các công cụ như Webpack và Browserify giải quyết những vấn đề này bằng cách dịch mã đó sang một biểu mẫu mà trình duyệt có thể thực thi . Trên hết, họ có thể áp dụng rất nhiều cách tối ưu hóa trên các gói đó.

Tuy nhiên, Webpack và Browserify khác nhau ở nhiều điểm, Webpack cung cấp nhiều công cụ theo mặc định (ví dụ: tách mã), trong khi Browserify có thể làm điều này chỉ sau khi tải xuống các plugin nhưng sử dụng cả hai đều dẫn đến kết quả rất giống nhau . Nó phụ thuộc vào sở thích cá nhân (Webpack là xu hướng hơn). Btw, Webpack không phải là trình chạy tác vụ, nó chỉ là bộ xử lý các tệp của bạn (nó xử lý chúng bằng cái gọi là trình tải và trình cắm) và nó có thể được chạy (trong số các cách khác) bởi trình chạy tác vụ.


Máy chủ Webpack Dev

Webpack Dev Server cung cấp một giải pháp tương tự cho B browserync - một máy chủ phát triển nơi bạn có thể triển khai ứng dụng của mình nhanh chóng khi đang làm việc và xác minh tiến trình phát triển của bạn ngay lập tức, với máy chủ dev tự động làm mới trình duyệt khi thay đổi mã hoặc thậm chí truyền mã đã thay đổi vào trình duyệt mà không cần tải lại với cái gọi là thay thế mô-đun nóng.


Task runners so với NPM scripts

Tôi đã sử dụng Gulp vì sự ngắn gọn của nó và viết nhiệm vụ dễ dàng, nhưng sau đó tôi phát hiện ra rằng tôi không cần Gulp hay Grunt gì cả. Mọi thứ tôi cần có thể đã được thực hiện bằng cách sử dụng các tập lệnh NPM để chạy các công cụ của bên thứ 3 thông qua API của họ. Lựa chọn giữa các tập lệnh Gulp, Grunt hoặc NPM tùy thuộc vào sở thích và kinh nghiệm của nhóm của bạn.

Mặc dù các tác vụ trong Gulp hoặc Grunt rất dễ đọc ngay cả đối với những người không quá quen thuộc với JS, nhưng nó vẫn là một công cụ khác để yêu cầu và học hỏi và cá nhân tôi thích thu hẹp sự phụ thuộc của mình và làm cho mọi thứ trở nên đơn giản. Mặt khác, việc thay thế các tác vụ này bằng sự kết hợp của các tập lệnh NPM và các tập lệnh (có thể là JS) chạy các công cụ của bên thứ 3 đó (ví dụ: cấu hình tập lệnh nút và chạy rimraf cho mục đích dọn dẹp) có thể khó khăn hơn. Nhưng trong phần lớn các trường hợp, ba kết quả đó bằng nhau.


Ví dụ

Đối với các ví dụ, tôi khuyên bạn nên xem qua dự án React starter này , nó cho bạn thấy sự kết hợp tuyệt vời giữa các tập lệnh NPM và JS bao gồm toàn bộ quá trình xây dựng và triển khai. Bạn có thể tìm thấy các tập lệnh NPM đó trong package.jsonthư mục gốc, trong thuộc tính có tên scripts. Ở đó bạn chủ yếu sẽ gặp các lệnh như babel-node tools/run start. Babel-node là một công cụ CLI (không dành cho sản xuất), lúc đầu nó sẽ biên dịch tệp tools/runES6 (tệp run.js nằm trong các công cụ ) - về cơ bản là một tiện ích chạy. Trình chạy này nhận một chức năng làm đối số và thực thi nó, trong trường hợp này là start- một tiện ích khác ( start.js) chịu trách nhiệm đóng gói các tệp nguồn (cả máy khách và máy chủ) và khởi động ứng dụng và máy chủ phát triển (máy chủ nhà phát triển có thể là Webpack Dev Máy chủ hoặc Trình duyệt).

Nói chính xác hơn, start.jstạo cả gói phía máy khách và máy chủ, khởi động một máy chủ nhanh và sau khi khởi chạy thành công sẽ khởi chạy đồng bộ hóa Trình duyệt, tại thời điểm viết bài này trông như thế này (vui lòng tham khảo dự án khởi động phản ứng để biết mã mới nhất).

const bs = Browsersync.create();  
bs.init({
      ...(DEBUG ? {} : { notify: false, ui: false }),

      proxy: {
        target: host,
        middleware: [wpMiddleware, ...hotMiddlewares],
      },

      // no need to watch '*.js' here, webpack will take care of it for us,
      // including full page reloads if HMR won't work
      files: ['build/content/**/*.*'],
}, resolve)

Phần quan trọng là proxy.target, nơi họ đặt địa chỉ máy chủ mà họ muốn proxy, có thể là http: // localhost: 3000 và B browserync bắt đầu một máy chủ lắng nghe trên http: // localhost: 3001 , nơi các nội dung đã tạo được phân phát với sự thay đổi tự động phát hiện và thay thế mô-đun nóng. Như bạn có thể thấy, có một thuộc tính cấu hình khác filesvới các tệp hoặc mẫu riêng lẻ Đồng bộ hóa trình duyệt theo dõi các thay đổi và tải lại trình duyệt nếu một số xảy ra, nhưng như nhận xét đã nói, Webpack tự xem các nguồn js với HMR, vì vậy họ hợp tác ở đó.

Bây giờ tôi không có bất kỳ ví dụ tương đương nào về cấu hình Grunt hoặc Gulp như vậy, nhưng với Gulp (và hơi tương tự với Grunt) bạn sẽ viết các tác vụ riêng lẻ trong gulpfile.js như

gulp.task('bundle', function() {
  // bundling source files with some gulp plugins like gulp-webpack maybe
});

gulp.task('start', function() {
  // starting server and stuff
});

nơi bạn sẽ làm những việc cơ bản giống như trong bộ khởi động, lần này với bộ chạy tác vụ, giải quyết một số vấn đề cho bạn, nhưng đưa ra các vấn đề riêng và một số khó khăn trong quá trình học cách sử dụng và như tôi đã nói, bạn càng có nhiều phụ thuộc, thì càng có thể xảy ra sai sót. Và đó là lý do tôi muốn loại bỏ những công cụ như vậy.

692
trungk18 2016-10-03 20:23.

Cập nhật tháng 10 năm 2018

Nếu bạn vẫn chưa chắc chắn về Front-end dev, bạn có thể xem nhanh một tài nguyên tuyệt vời tại đây.

https://github.com/kamranahmedse/developer-roadmap

Cập nhật tháng 6 năm 2018

Học JavaScript hiện đại là một điều khó khăn nếu bạn không học ngay từ đầu. Nếu bạn là người mới, hãy nhớ xem phần viết xuất sắc này để có cái nhìn tổng quan hơn.

https://medium.com/the-node-js-collection/modern-javascript-explained-for-dinosaurs-f695e9747b70

Cập nhật tháng 7 năm 2017

Gần đây, tôi đã tìm thấy một hướng dẫn toàn diện từ đội ngũ Grab về cách tiếp cận phát triển front-end trong năm 2017. Bạn có thể xem như bên dưới.

https://github.com/grab/front-end-guide


Tôi cũng đã tìm kiếm điều này khá lâu vì có rất nhiều công cụ trên mạng và mỗi công cụ đều mang lại lợi ích cho chúng tôi ở một khía cạnh khác nhau. Cộng đồng được chia thành các công cụ như Browserify, Webpack, jspm, Grunt and Gulp. Bạn cũng có thể nghe về Yeoman or Slush. Đó không phải là một vấn đề, nó chỉ là khó hiểu cho tất cả mọi người đang cố gắng hiểu một con đường rõ ràng phía trước.

Dù sao, tôi cũng muốn đóng góp một cái gì đó.

Mục lục

  • Mục lục
  • 1. Trình quản lý gói
    • NPM
    • Bower
    • Sự khác biệt giữa BowerNPM
    • Sợi
    • jspm
  • 2. Bộ tải mô-đun / Gói
    • Yêu cầuJS
    • Duyệt qua
    • Webpack
    • SystemJS
  • 3. Người chạy công việc
    • Tiếng càu nhàu
    • Nuốt chửng
  • 4. Công cụ giàn giáo
    • Slush và Yeoman

1. Trình quản lý gói

Trình quản lý gói đơn giản hóa việc cài đặt và cập nhật các phần phụ thuộc của dự án, đó là các thư viện như jQuery, Bootstrap:, v.v. - mọi thứ được sử dụng trên trang web của bạn và không phải do bạn viết.

Duyệt qua tất cả các trang web của thư viện, tải xuống và giải nén các kho lưu trữ, sao chép tệp vào các dự án - tất cả điều này được thay thế bằng một vài lệnh trong thiết bị đầu cuối.

NPM

Nó là viết tắt của: Node JS package managergiúp bạn quản lý tất cả các thư viện mà phần mềm của bạn dựa vào. Bạn sẽ xác định nhu cầu của mình trong một tệp được gọi package.jsonvà chạy npm installtrong dòng lệnh ... sau đó BANG, các gói của bạn được tải xuống và sẵn sàng sử dụng. Nó có thể được sử dụng cho cả front-end and back-endthư viện.

Bower

Đối với quản lý gói front-end, khái niệm này cũng giống như NPM. Tất cả các thư viện của bạn được lưu trữ trong một tệp có tên bower.jsonvà sau đó chạy bower installtrong dòng lệnh.

Bower được khuyến nghị người dùng của họ chuyển sang npm hoặc sợi . Hãy cẩn thận

Sự khác biệt giữa BowerNPM

Sự khác biệt lớn nhất giữa BowerNPMlà NPM có cây phụ thuộc lồng nhau trong khi Bower yêu cầu cây phụ thuộc phẳng như bên dưới.

Trích dẫn từ Sự khác biệt giữa Bower và npm là gì?

NPM

project root
[node_modules] // default directory for dependencies
 -> dependency A
 -> dependency B
    [node_modules]
    -> dependency A

 -> dependency C
    [node_modules]
    -> dependency B
      [node_modules]
       -> dependency A
    -> dependency D

Bower

project root
[bower_components] // default directory for dependencies
 -> dependency A
 -> dependency B // needs A
 -> dependency C // needs B and D
 -> dependency D

Có một số cập nhật trên npm 3 Duplication and Deduplication, vui lòng mở tài liệu để biết thêm chi tiết.

Sợi

Một quản lý gói mới cho JavaScript công bố bởi Facebookthời gian gần đây với một số ưu điểm hơn so với NPM. Và với Yarn, bạn vẫn có thể sử dụng cả hai NPMBowerregistry để tìm nạp gói. Nếu bạn đã cài đặt một gói trước đó, hãy yarntạo một bản sao được lưu trong bộ nhớ cache để hỗ trợ offline package installs.

jspm

JSPM là một trình quản lý gói cho SystemJStrình tải mô-đun đa năng, được xây dựng trên đầu ES6trình tải mô-đun động. Nó không phải là một trình quản lý gói hoàn toàn mới với bộ quy tắc riêng, mà nó hoạt động trên các nguồn gói hiện có. Ngoài ra, nó hoạt động với GitHubnpm. Vì hầu hết các Bowergói dựa trên đều dựa trên GitHub, chúng tôi cũng có thể cài đặt các gói đó bằng cách sử dụng jspm. Nó có một sổ đăng ký liệt kê hầu hết các gói front-end thường được sử dụng để cài đặt dễ dàng hơn.

Xem sự khác biệt giữa Bowerjspm: Trình quản lý gói: Bower vs jspm


2. Bộ tải mô-đun / Gói

Hầu hết các dự án ở bất kỳ quy mô nào sẽ có mã của chúng được phân tách giữa một số tệp. <script>Tuy nhiên, bạn có thể chỉ bao gồm mỗi tệp với một thẻ riêng lẻ , <script>thiết lập một kết nối HTTP mới và đối với các tệp nhỏ - mục tiêu là tính mô-đun - thì thời gian thiết lập kết nối có thể lâu hơn đáng kể so với việc truyền dữ liệu. Trong khi các tập lệnh đang tải xuống, không có nội dung nào có thể được thay đổi trên trang.

  • Vấn đề về thời gian tải xuống phần lớn có thể được giải quyết bằng cách ghép một nhóm các mô-đun đơn giản vào một tệp duy nhất và thu nhỏ nó.

Ví dụ

<head>
    <title>Wagon</title>
    <script src=“build/wagon-bundle.js”></script>
</head>
  • Tuy nhiên, hiệu suất đi kèm với chi phí linh hoạt. Nếu các mô-đun của bạn có sự phụ thuộc lẫn nhau, thì sự thiếu linh hoạt này có thể là một nguyên nhân dẫn đến sự phô trương.

Ví dụ

<head>
    <title>Skateboard</title>
    <script src=“connectors/axle.js”></script>
    <script src=“frames/board.js”></script>
    <!-- skateboard-wheel and ball-bearing both depend on abstract-rolling-thing -->
    <script src=“rolling-things/abstract-rolling-thing.js”></script>
    <script src=“rolling-things/wheels/skateboard-wheel.js”></script>
    <!-- but if skateboard-wheel also depends on ball-bearing -->
    <!-- then having this script tag here could cause a problem -->
    <script src=“rolling-things/ball-bearing.js”></script>
    <!-- connect wheels to axle and axle to frame -->
    <script src=“vehicles/skateboard/our-sk8bd-init.js”></script>
</head>

Máy tính có thể làm điều đó tốt hơn bạn có thể và đó là lý do tại sao bạn nên sử dụng một công cụ để tự động gói mọi thứ vào một tệp duy nhất.

Sau đó chúng tôi nghe về RequireJS, Browserify, WebpackSystemJS

Yêu cầuJS

Nó là một JavaScriptbộ tải tệp và mô-đun. Nó được tối ưu hóa để sử dụng trong trình duyệt, nhưng nó có thể được sử dụng trong các môi trường JavaScript khác, như Node.

Ví dụ: myModule.js

// package/lib is a dependency we require
define(["package/lib"], function (lib) {
  // behavior for our module
  function foo() {
    lib.log("hello world!");
  }

  // export (expose) foo to other modules as foobar
  return {
    foobar: foo,
  };
});

Trong main.js, chúng ta có thể nhập myModule.jsnhư một phụ thuộc và sử dụng nó.

require(["package/myModule"], function(myModule) {
    myModule.foobar();
});

Và sau đó trong của chúng tôi HTML, chúng ta có thể tham khảo để sử dụng với RequireJS.

<script src=“app/require.js” data-main=“main.js” ></script>

Đọc thêm về CommonJSAMDđể hiểu dễ dàng. Mối quan hệ giữa CommonJS, AMD và RequiJS?

Duyệt qua

Đặt ra để cho phép sử dụng các CommonJSmô-đun được định dạng trong trình duyệt. Do đó, Browserifytrình tải mô-đun không nhiều như trình gói mô-đun: Browserifyhoàn toàn là một công cụ thời gian xây dựng, tạo ra một gói mã sau đó có thể được tải ở phía máy khách.

Bắt đầu với một máy xây dựng đã cài đặt nút & npm và tải gói:

npm install -g –save-dev browserify

Viết mô-đun của bạn ở CommonJSđịnh dạng

//entry-point.js
var foo = require("../foo.js");
console.log(foo(4));

Và khi hài lòng, hãy ra lệnh để nhóm:

browserify entry-point.js -o bundle-name.js

Browserify đệ quy tìm tất cả các phụ thuộc của entry-point và tập hợp chúng thành một tệp duy nhất:

<script src="”bundle-name.js”"></script>

Webpack

Nó gói tất cả các nội dung tĩnh của bạn, bao gồm JavaScript, hình ảnh, CSS, v.v., vào một tệp duy nhất. Nó cũng cho phép bạn xử lý tệp thông qua các loại trình tải khác nhau. Bạn có thể viết cú pháp JavaScriptvới CommonJShoặc AMDmô-đun của bạn . Nó tấn công vấn đề xây dựng theo một cách cơ bản tích hợp hơn và kiên định hơn. Trong Browserifybạn sử dụng Gulp/Gruntvà một danh sách dài các biến đổi và bổ sung để hoàn thành công việc. Webpackcung cấp đủ điện năng mà bạn thường không cần Grunthoặc không cần Gulp.

Cách sử dụng cơ bản không chỉ đơn giản. Cài đặt Webpack như Browserify:

npm install -g –save-dev webpack

Và chuyển lệnh một điểm vào và một tệp đầu ra:

webpack ./entry-point.js bundle-name.js

SystemJS

Nó là một trình tải mô-đun có thể nhập mô-đun tại thời điểm chạy ở bất kỳ định dạng phổ biến nào được sử dụng ngày nay ( CommonJS, UMD, AMD, ES6). Nó được xây dựng trên đầu ES6polyfill của trình nạp mô-đun và đủ thông minh để phát hiện định dạng đang được sử dụng và xử lý nó một cách thích hợp. SystemJScũng có thể chuyển mã ES6 (với Babelhoặc Traceur) hoặc các ngôn ngữ khác như TypeScriptCoffeeScriptsử dụng các plugin.

Muốn biết cái gì là node modulevà tại sao nó không thích ứng tốt với trong trình duyệt.

Bài viết hữu ích hơn:


Tại sao jspmSystemJS?

Một trong những mục tiêu chính của ES6mô đun là để làm cho nó thực sự đơn giản để cài đặt và sử dụng bất kỳ thư viện Javascript từ bất cứ nơi nào trên Internet ( Github, npm, vv). Chỉ cần hai điều:

  • Một lệnh duy nhất để cài đặt thư viện
  • Một dòng mã duy nhất để nhập thư viện và sử dụng nó

Vì vậy, với jspm, bạn có thể làm điều đó.

  1. Cài đặt thư viện bằng lệnh: jspm install jquery
  2. Nhập thư viện bằng một dòng mã, không cần tham chiếu bên ngoài bên trong tệp HTML của bạn.

display.js

var $ = require('jquery');

$('body').append("I've imported jQuery!");
  1. Sau đó, bạn cấu hình những thứ này bên trong System.config({ ... })trước khi nhập mô-đun của bạn. Thông thường khi chạy jspm init, sẽ có một tệp được đặt tên config.jscho mục đích này.

  2. Để làm cho các tập lệnh này chạy, chúng ta cần tải system.jsconfig.jstrên trang HTML. Sau đó, chúng tôi sẽ tải display.jstệp bằng SystemJStrình tải mô-đun.

index.html

<script src="jspm_packages/system.js"></script>
<script src="config.js"></script>
<script>
  System.import("scripts/display.js");
</script>

Lưu ý: Bạn cũng có thể sử dụng npmvới WebpackAngular 2 đã áp dụng nó. Vì jspmđược phát triển để tích hợp SystemJSvà nó hoạt động trên npmnguồn hiện có , vì vậy câu trả lời của bạn là tùy thuộc vào bạn.


3. Người chạy công việc

Trình chạy tác vụ và các công cụ xây dựng chủ yếu là các công cụ dòng lệnh. Tại sao chúng ta cần sử dụng chúng: Trong một từ: tự động hóa . Bạn càng phải làm ít công việc hơn khi thực hiện các tác vụ lặp đi lặp lại như thu nhỏ , biên dịch, kiểm tra đơn vị, in linting mà trước đây chúng ta tốn rất nhiều thời gian để thực hiện với dòng lệnh hoặc thậm chí là thủ công.

Tiếng càu nhàu

Bạn có thể tạo tự động hóa cho môi trường phát triển của mình để xử lý trước mã hoặc tạo tập lệnh xây dựng bằng tệp cấu hình và có vẻ như rất khó để xử lý một tác vụ phức tạp. Phổ biến trong vài năm gần đây.

Mỗi tác vụ trong Gruntlà một loạt các cấu hình plugin khác nhau, chỉ đơn giản là được thực thi lần lượt theo cách độc lập chặt chẽ và tuần tự.

grunt.initConfig({
    clean: {
    src: ['build/app.js', 'build/vendor.js']
    },

    copy: {
    files: [{
        src: 'build/app.js',
        dest: 'build/dist/app.js'
    }]
    }

    concat: {
    'build/app.js': ['build/vendors.js', 'build/app.js']
    }

    // ... other task configurations ...

});

grunt.registerTask('build', ['clean', 'bower', 'browserify', 'concat', 'copy']);

Nuốt chửng

Tự động hóa giống như Gruntnhưng thay vì cấu hình, bạn có thể viết JavaScriptvới các luồng giống như đó là một ứng dụng nút. Thích những ngày này.

Đây là một Gulpkhai báo nhiệm vụ mẫu.

//import the necessary gulp plugins
var gulp = require("gulp");
var sass = require("gulp-sass");
var minifyCss = require("gulp-minify-css");
var rename = require("gulp-rename");

//declare the task
gulp.task("sass", function (done) {
  gulp
    .src("./scss/ionic.app.scss")
    .pipe(sass())
    .pipe(gulp.dest("./www/css/"))
    .pipe(
      minifyCss({
        keepSpecialComments: 0,
      })
    )
    .pipe(rename({ extname: ".min.css" }))
    .pipe(gulp.dest("./www/css/"))
    .on("end", done);
});

Xem thêm: https://preslav.me/2015/01/06/gulp-vs-grunt-why-one-why-the-other/


4. Công cụ giàn giáo

Slush và Yeoman

Bạn có thể tạo các dự án khởi đầu với chúng. Ví dụ: bạn đang lên kế hoạch tạo một nguyên mẫu với HTML và SCSS, sau đó thay vì tạo thủ công một số thư mục như scss, css, img, phông chữ. Bạn chỉ có thể cài đặt yeomanvà chạy một tập lệnh đơn giản. Sau đó, mọi thứ ở đây cho bạn.

Tìm thêm ở đây .

npm install -g yo
npm install --global generator-h5bp
yo h5bp

Xem thêm: https://www.quora.com/What-are-the-differences-between-NPM-Bower-Grunt-Gulp-Webpack-Browserify-Slush-Yeoman-and-Express


Câu trả lời của tôi không khớp với nội dung của câu hỏi nhưng khi tôi tìm kiếm kiến ​​thức này trên Google, tôi luôn thấy câu hỏi ở trên cùng nên tôi quyết định trả lời tóm tắt. Tôi hy vọng các bạn thấy nó hữu ích.

Nếu bạn thích bài viết này, bạn có thể đọc thêm trên blog của tôi tại trungk18.com . Cảm ơn đã ghé thăm :)

64
Alireza 2017-05-21 17:43.

OK, tất cả đều có một số điểm giống nhau, họ làm những việc giống nhau cho bạn theo những cách khác nhau và giống nhau, tôi chia chúng thành 3 nhóm chính như dưới đây:


1) Gói mô-đun

webpack và Browserify là những cái phổ biến, hoạt động giống như những người chạy tác vụ nhưng linh hoạt hơn, vì nó sẽ gói mọi thứ lại với nhau dưới dạng cài đặt của bạn, vì vậy bạn có thể trỏ đến kết quả dưới dạng gói.js, ví dụ trong một tệp duy nhất bao gồm CSS và Javascript, cho chi tiết hơn của từng loại, xem chi tiết bên dưới:

webpack

webpack là một gói mô-đun cho các ứng dụng JavaScript hiện đại. Khi webpack xử lý ứng dụng của bạn, nó sẽ xây dựng một cách đệ quy một biểu đồ phụ thuộc bao gồm mọi mô-đun mà ứng dụng của bạn cần, sau đó gói tất cả các mô-đun đó thành một số lượng nhỏ các gói - thường chỉ một - để được tải bởi trình duyệt.

Nó có thể cấu hình cực kỳ tốt, nhưng để bắt đầu, bạn chỉ cần hiểu Bốn khái niệm cốt lõi: mục nhập, đầu ra, bộ tải và plugin.

Tài liệu này nhằm cung cấp một cái nhìn tổng quan cấp cao về các khái niệm này, đồng thời cung cấp các liên kết đến các trường hợp sử dụng cụ thể của khái niệm chi tiết.

thêm ở đây

duyệt qua

Browserify là một công cụ phát triển cho phép chúng ta viết các mô-đun kiểu node.js để biên dịch để sử dụng trong trình duyệt. Cũng giống như nút, chúng tôi viết các mô-đun của mình trong các tệp riêng biệt, xuất các phương thức và thuộc tính bên ngoài bằng cách sử dụng module.exports và xuất các biến. Chúng tôi thậm chí có thể yêu cầu các mô-đun khác bằng cách sử dụng hàm request, và nếu chúng tôi bỏ qua đường dẫn tương đối, nó sẽ phân giải đến mô-đun trong thư mục node_modules.

thêm ở đây


2) Người chạy nhiệm vụ

gulp và grunt là những trình chạy tác vụ, về cơ bản chúng sẽ làm gì, tạo các tác vụ và chạy chúng bất cứ khi nào bạn muốn, ví dụ: bạn cài đặt một plugin để giảm thiểu CSS của mình và sau đó chạy nó mỗi lần để thực hiện việc thu nhỏ, thêm chi tiết về mỗi:

nuốt chửng

gulp.js là một bộ công cụ JavaScript mã nguồn mở của Fractal Innovations và cộng đồng nguồn mở tại GitHub, được sử dụng như một hệ thống xây dựng trực tuyến trong phát triển web front-end. Nó là một trình chạy tác vụ được xây dựng trên Node.js và Node Package Manager (npm), được sử dụng để tự động hóa các tác vụ tốn thời gian và lặp đi lặp lại liên quan đến phát triển web như thu nhỏ, nối, chặn bộ nhớ cache, kiểm tra đơn vị, linting, tối ưu hóa, v.v. sử dụng gulp phương pháp tiếp cận cấu hình mã để xác định nhiệm vụ của nó và dựa vào các plugin nhỏ, có mục đích duy nhất của nó để thực hiện chúng. hệ sinh thái gulp có hơn 1000 plugin như vậy có sẵn để bạn lựa chọn.

thêm ở đây

tiếng càu nhàu

Grunt là một trình chạy tác vụ JavaScript, một công cụ được sử dụng để tự động thực hiện các tác vụ được sử dụng thường xuyên như thu nhỏ, biên dịch, kiểm tra đơn vị, in linting, v.v. Nó sử dụng giao diện dòng lệnh để chạy các tác vụ tùy chỉnh được xác định trong một tệp (được gọi là Gruntfile) . Grunt được tạo ra bởi Ben Alman và được viết bằng Node.js. Nó được phân phối qua npm. Hiện tại, có hơn 5.000 plugin có sẵn trong hệ sinh thái Grunt.

thêm ở đây


3) Người quản lý gói

trình quản lý gói, những gì họ làm là quản lý các plugin bạn cần trong ứng dụng của mình và cài đặt chúng cho bạn thông qua github, v.v. bằng cách sử dụng package.json, rất tiện dụng để cập nhật cho bạn các mô-đun, cài đặt chúng và chia sẻ ứng dụng của bạn, thêm chi tiết cho từng:

npm

npm là một trình quản lý gói cho ngôn ngữ lập trình JavaScript. Nó là trình quản lý gói mặc định cho môi trường thời gian chạy JavaScript Node.js. Nó bao gồm một máy khách dòng lệnh, còn được gọi là npm và cơ sở dữ liệu trực tuyến của các gói công khai, được gọi là sổ đăng ký npm. Sổ đăng ký được truy cập thông qua máy khách và các gói có sẵn có thể được duyệt và tìm kiếm thông qua trang web npm.

thêm ở đây

bower

Bower có thể quản lý các thành phần chứa HTML, CSS, JavaScript, phông chữ hoặc thậm chí các tệp hình ảnh. Bower không nối hoặc rút gọn mã hay làm bất cứ điều gì khác - nó chỉ cài đặt đúng phiên bản của gói bạn cần và các gói phụ thuộc của chúng. Để bắt đầu, Bower hoạt động bằng cách tìm nạp và cài đặt các gói từ khắp nơi, đảm nhận việc săn lùng, tìm kiếm, tải xuống và lưu những thứ bạn đang tìm kiếm. Bower theo dõi các gói này trong tệp kê khai, bower.json.

thêm ở đây

và trình quản lý gói mới nhất không thể bỏ qua, nó trẻ và nhanh trong môi trường làm việc thực so với npm mà tôi chủ yếu sử dụng trước đây, để cài đặt lại các mô-đun, nó sẽ kiểm tra kỹ thư mục node_modules để kiểm tra sự tồn tại của mô-đun, Cũng có vẻ như cài đặt các mô-đun mất ít thời gian hơn:

sợi

Yarn là trình quản lý gói cho mã của bạn. Nó cho phép bạn sử dụng và chia sẻ mã với các nhà phát triển khác từ khắp nơi trên thế giới. Yarn thực hiện việc này một cách nhanh chóng, an toàn và đáng tin cậy nên bạn không bao giờ phải lo lắng.

Yarn cho phép bạn sử dụng các giải pháp của các nhà phát triển khác cho các vấn đề khác nhau, giúp bạn phát triển phần mềm của mình dễ dàng hơn. Nếu bạn gặp sự cố, bạn có thể báo cáo sự cố hoặc đóng góp lại và khi sự cố được khắc phục, bạn có thể sử dụng Yarn để cập nhật tất cả.

Mã được chia sẻ thông qua một thứ gọi là gói (đôi khi được gọi là mô-đun). Một gói chứa tất cả mã đang được chia sẻ cũng như một tệp package.json mô tả gói.

thêm ở đây


51
dcohenb 2016-05-01 23:04.

Bạn có thể tìm thấy một số so sánh kỹ thuật trên npmcompare

So sánh Browserify vs. grunt vs. gulp vs. webpack

Như bạn có thể thấy webpack được duy trì rất tốt với một phiên bản mới sẽ ra mắt trung bình 4 ngày một lần. Nhưng Gulp dường như có cộng đồng lớn nhất trong số họ (với hơn 20 nghìn ngôi sao trên Github) Grunt có vẻ hơi bị bỏ quên (so với những người khác)

Vì vậy, nếu cần phải chọn một trong những lựa chọn khác, tôi sẽ đi với Gulp

43
DeadWoroz 2016-04-15 05:53.

Một lưu ý nhỏ về npm: npm3 cố gắng cài đặt các phụ thuộc theo cách cố định

https://docs.npmjs.com/how-npm-works/npm3#npm-v3-dependency-resolution

15
prosti 2016-11-22 15:23.

Webpack & webpack-dev-server là gì? Tài liệu chính thức cho biết đó là một trình gói mô-đun nhưng đối với tôi nó chỉ là một trình chạy nhiệm vụ. Có gì khác biệt?

webpack-dev-server là một máy chủ web tải lại trực tiếp mà các nhà phát triển Webpack sử dụng để nhận phản hồi ngay lập tức về những gì họ làm. Nó chỉ nên được sử dụng trong quá trình phát triển.

Dự án này được lấy cảm hứng từ công cụ kiểm tra đơn vị nof5 .

Webpack như tên của nó sẽ tạo ra một tuổi gói DUY NHẤT cho web . Gói sẽ được thu nhỏ và được kết hợp thành một tệp duy nhất (chúng tôi vẫn sống trong độ tuổi HTTP 1.1). Webpack làm sự kỳ diệu của việc kết hợp các nguồn lực (JavaScript, CSS, hình ảnh) và tiêm chúng như thế này: .<script src="assets/bundle.js"></script>

Nó cũng có thể được gọi là gói mô-đun vì nó phải hiểu các phụ thuộc mô-đun, và cách lấy các phụ thuộc và gói chúng lại với nhau.

Bạn sẽ sử dụng Browserify ở đâu? Chúng ta không thể làm tương tự với nhập nút / ES6?

Bạn có thể sử dụng Browserify trên các tác vụ chính xác mà bạn sẽ sử dụng Webpack . - Webpack nhỏ gọn hơn.

Lưu ý rằng các tính năng của trình nạp mô-đun ES6 trong Webpack2 đang sử dụng System.import , mà không phải một trình duyệt nào hỗ trợ nguyên bản.

Khi nào bạn sử dụng gulp / grunt trên npm + plugin?

Bạn có thể quên Gulp, Grunt, Brokoli, Brunch và Bower . Thay vào đó, hãy sử dụng trực tiếp các tập lệnh dòng lệnh npm và bạn có thể loại bỏ các gói bổ sung như thế này tại đây cho Gulp :

var gulp        = require('gulp'),
  minifyCSS     = require('gulp-minify-css'),
  sass          = require('gulp-sass'),
  browserify    = require('gulp-browserify'),
  uglify        = require('gulp-uglify'),
  rename        = require('gulp-rename'),
  jshint        = require('gulp-jshint'),
  jshintStyle   = require('jshint-stylish'),
  replace       = require('gulp-replace'),
  notify        = require('gulp-notify'),

Bạn có thể sử dụng trình tạo tệp cấu hình GulpGrunt khi tạo tệp cấu hình cho dự án của mình. Bằng cách này, bạn không cần cài đặt Yeoman hoặc các công cụ tương tự.

13
Dmitry Sheiko 2017-08-14 23:43.

Webpacklà một trình gói. Giống như Browserfynó tìm trong cơ sở mã cho các yêu cầu mô-đun ( requirehoặc import) và giải quyết chúng một cách đệ quy. Hơn nữa, bạn có thể định cấu hình Webpackđể giải quyết không chỉ các mô-đun giống JavaScript, mà còn CSS, hình ảnh, HTML, mọi thứ theo nghĩa đen. Điều đặc biệt khiến tôi thích thú Webpack, bạn có thể kết hợp cả hai mô-đun được biên dịch và tải động trong cùng một ứng dụng. Do đó, người ta có được hiệu suất thực sự tăng lên, đặc biệt là qua HTTP / 1.x. Cách chính xác bạn thực hiện, tôi đã mô tả với các ví dụ ở đây http://dsheiko.com/weblog/state-of-javascript-modules-2017/ Như một giải pháp thay thế cho Bundler mà người ta có thể nghĩ đến Rollup.js( https://rollupjs.org/ ) , tối ưu hóa mã trong quá trình biên dịch, nhưng loại bỏ tất cả các phần không sử dụng được tìm thấy.

Đối với AMD, thay vì RequireJSmột có thể đi với bản địa ES2016 module system, nhưng được tải bằng System.js( https://github.com/systemjs/systemjs )

Bên cạnh đó, tôi muốn chỉ ra rằng npmnó thường được sử dụng như một công cụ tự động hóa như grunthoặc gulp. Kiểm tra https://docs.npmjs.com/misc/scripts . Cá nhân tôi bây giờ chỉ sử dụng các tập lệnh npm để tránh các công cụ tự động hóa khác, mặc dù trước đây tôi đã rất thích grunt. Với các công cụ khác, bạn phải dựa vào vô số plugin cho các gói, thường không được viết tốt và không được bảo trì tích cực. npmbiết các gói của nó, vì vậy bạn gọi bất kỳ gói nào được cài đặt cục bộ bằng tên như:

{
  "scripts": {
    "start": "npm http-server"
  },
  "devDependencies": {
    "http-server": "^0.10.0"
  }
}

Trên thực tế, bạn không cần bất kỳ plugin nào nếu gói hỗ trợ CLI.

13
Ellone 2016-10-15 05:58.

Yarn là một trình quản lý gói gần đây có lẽ đáng được đề cập đến.
Vì vậy, đây là: https://yarnpkg.com/

Theo như tôi biết, nó có thể lấy cả phụ thuộc npm và bower và có các tính năng được đánh giá cao khác.

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.

DRM của Ubisoft Denies Assassin's Creed Origins đang tấn công CPU của bạn

DRM của Ubisoft Denies Assassin's Creed Origins đang tấn công CPU của bạn

Kể từ khi phát hành Assassin's Creed Origins trên PC, một số người dùng đã phàn nàn rằng việc sử dụng CPU của trò chơi là rất lớn, đôi khi tăng đến 90-100%. Điều đó không bình thường, và dẫn đến cáo buộc rằng DRM mới của trò chơi là thủ phạm.

Hãy hỏi Tiến sĩ NerdLove: Tôi lo lắng bạn gái của tôi sẽ tự sát nếu chúng tôi chia tay

Hãy hỏi Tiến sĩ NerdLove: Tôi lo lắng bạn gái của tôi sẽ tự sát nếu chúng tôi chia tay

Xin chào, tất cả các bạn Những con thú tình dục trên Internet. Chào mừng bạn đến với Ask Dr.

Những hình dán này cho bạn biết nếu con bạn bị sốt để bạn không phải đánh thức chúng

Những hình dán này cho bạn biết nếu con bạn bị sốt để bạn không phải đánh thức chúng

Ảnh: Fever-Bugz Đã có vài lần tôi và chồng nhìn chằm chằm vào đứa con gái bốn tuổi của mình khi nó đang ngủ, đưa tay sờ lên trán nó một cách bối rối. “Cô ấy có cảm thấy nóng không? Tôi nghĩ cô ấy cảm thấy nóng.

Đây có phải là sự khởi đầu cho sự kết thúc của việc giam giữ Brittney Griner?

Đây có phải là sự khởi đầu cho sự kết thúc của việc giam giữ Brittney Griner?

Brittney Griner (r.) Ngay từ đầu, thân phận của Brittney Griner đã là tình huống con tin Mỹ độc nhất trong lịch sử 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 +"

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.

Tầm nhìn đám mây phi tập trung của DFINITY Blockchain

Lưu ý của người biên tập: Bạn đang xem tài liệu lỗi thời từ blog DFINITY đang được bảo quản cho mục đích lưu trữ.

Tầm nhìn đám mây phi tập trung của DFINITY Blockchain

Bài đăng này khám phá tầm nhìn về đám mây phi tập trung của nhóm DFINITY và cách nó liên quan đến các nhà cung cấp blockchain truyền thống và đám mây hiện có như Amazon Web Services. Các minh chứng về công nghệ DFINITY được áp dụng bởi một mạng lưới quy mô lớn sẽ được thực hiện vào mùa thu năm 2017, sau đó sẽ được gây quỹ Chính cho quỹ hỗ trợ phi lợi nhuận, với mạng “đám mây mở” dự kiến ​​sẽ ra mắt vào đầu mùa hè năm 2018 .

Language