Sự khác biệt giữa Grunt, NPM và Bower (pack.json so với bower.json)

Tôi mới sử dụng npm và bower, xây dựng ứng dụng đầu tiên của mình trong emberjs :).
Tôi có một chút kinh nghiệm với đường ray, vì vậy tôi quen với ý tưởng về các tệp để liệt kê các phụ thuộc (chẳng hạn như gói Gemfile)

Câu hỏi: khi tôi muốn thêm một gói (và kiểm tra sự phụ thuộc vào git), nó thuộc về nơi nào - vào package.jsonhoặc vào bower.json?

Từ những gì tôi thu thập được,
việc chạy bower installsẽ tìm nạp gói và đặt nó vào /vendorthư mục,
chạy npm installnó sẽ tìm nạp nó và đưa nó vào /node_modulesthư mục.

Câu trả lời SO này cho biết Bower dành cho front-end và npm dành cho phần phụ trợ.
Ember-app-kit dường như tuân thủ sự khác biệt này ngay từ cái nhìn đầu tiên ... Nhưng các hướng dẫn trong gruntfile để cho phép một số chức năng đưa ra hai lệnh rõ ràng, vì vậy tôi hoàn toàn bối rối ở đây.

Theo trực giác tôi sẽ đoán rằng

1. npm install --save-dev tên gói sẽ tương đương với việc thêm tên gói vào gói.json của tôi

2. Bower install - tên gói có thể giống như thêm gói vào bower.json của tôi và chạy cài đặt bower ?

Nếu đó là trường hợp, khi nào tôi nên cài đặt các gói rõ ràng như thế mà không cần thêm chúng vào tệp quản lý các phụ thuộc (ngoài việc cài đặt các công cụ dòng lệnh trên toàn cầu)?

Cập nhật cho giữa năm 2016 :

Mọi thứ đang thay đổi nhanh đến mức nếu cuối năm 2017, câu trả lời này có thể không được cập nhật nữa!

Người mới bắt đầu có thể nhanh chóng bị lạc trong việc lựa chọn công cụ xây dựng và quy trình làm việc, nhưng những gì được cập nhật nhất trong năm 2016 không sử dụng Bower, Grunt hay Gulp! Với sự trợ giúp của Webpack, bạn có thể làm mọi thứ trực tiếp trong NPM!

• Kết quả "npm as build tool" của Google : https://medium.com/@dabit3/int sinhtion-to-USE-npm-as-a-build-tool-b41076f488b0#.c33e74tsa

• Gói web: https://webpack.github.io/docs/installation.html

Đừng để tôi nhầm người sử dụng các quy trình công việc khác và tôi vẫn sử dụng GULP trong dự án kế thừa của mình (nhưng dần dần rời khỏi nó), nhưng đây là cách nó được thực hiện trong các công ty và nhà phát triển tốt nhất làm việc trong quy trình công việc này kiếm được rất nhiều tiền!

Nhìn vào mẫu này, đây là một thiết lập rất cập nhật bao gồm một hỗn hợp các công nghệ tốt nhất và mới nhất: https://github.com/coryhouse/react-slingshot

• Gói web
• NPM như một công cụ xây dựng (không có Gulp, Grunt hoặc Bower)
• Phản ứng với Redux
• Tiếng Anh
• danh sách dài Đi và khám phá!

Những câu hỏi của bạn:

Khi tôi muốn thêm một gói (và kiểm tra sự phụ thuộc vào git), thì nó thuộc về nơi nào - vào pack.json hoặc vào bower.json

• Bây giờ mọi thứ thuộc về pack.json

• Các phụ thuộc cần thiết để xây dựng nằm trong "devDependencies" tức là npm install require-dir --save-dev(--save-dev cập nhật gói.json của bạn bằng cách thêm một mục vào devDependencies)

• Các phụ thuộc cần thiết cho ứng dụng của bạn trong thời gian chạy nằm trong "phụ thuộc" tức là npm install lodash --save(--save cập nhật gói.json của bạn bằng cách thêm một mục vào phụ thuộc)

Nếu đó là trường hợp, khi nào tôi nên cài đặt các gói rõ ràng như thế mà không cần thêm chúng vào tệp quản lý các phụ thuộc (ngoài việc cài đặt các công cụ dòng lệnh trên toàn cầu)?

Luôn luôn . Chỉ vì sự thoải mái. Khi bạn thêm cờ ( --save-devhoặc --save), tệp quản lý deps (pack.json) sẽ được cập nhật tự động. Đừng lãng phí thời gian bằng cách chỉnh sửa các phụ thuộc trong nó bằng tay. Phím tắt cho npm install --save-dev package-namelànpm i -D package-name và phím tắt cho npm install --save package-namelànpm i -S package-name

Npm và Bower đều là các công cụ quản lý phụ thuộc. Nhưng sự khác biệt chính giữa cả hai là npm được sử dụng để cài đặt các mô đun Node js nhưng bower js được sử dụng để quản lý các thành phần giao diện người dùng như html, css, js, v.v. .

Một thực tế khiến điều này trở nên khó hiểu hơn là npm cung cấp một số gói có thể được sử dụng để phát triển front-end, như gruntvàjshint .

Những dòng này thêm ý nghĩa

Bower, không giống như npm, có thể có nhiều tệp (ví dụ: .js, .css, .html, .png, .ttf) được coi là (các) tệp chính. Bower về mặt ngữ nghĩa xem xét các tệp chính này, khi được đóng gói cùng nhau, một thành phần.

Chỉnh sửa : Grunt khá khác so với Npm và Bower. Grunt là một công cụ chạy tác vụ javascript. Bạn có thể làm rất nhiều thứ bằng cách sử dụng grunt mà bạn phải làm bằng tay nếu không. Làm nổi bật một số công dụng của Grunt:

1. Nén một số tệp (ví dụ: plugin zipup)
2. Linting trên các tập tin js (jshint)
3. Biên dịch ít tệp hơn (grunt-contrib-less)

Có các plugin grunt để biên dịch sass, làm xấu javascript của bạn, sao chép tệp / thư mục, thu nhỏ javascript, v.v.

Xin lưu ý rằng plugin grunt cũng là một gói npm.

Câu hỏi 1

Khi tôi muốn thêm một gói (và kiểm tra sự phụ thuộc vào git), thì nó thuộc về nơi nào - vào pack.json hoặc vào bower.json

Nó thực sự phụ thuộc vào nơi gói này thuộc về. Nếu nó là một mô-đun nút (như grunt, request) thì nó sẽ đi trong gói.json nếu không thành bower json.

Câu hỏi 2

Khi nào tôi nên cài đặt các gói một cách rõ ràng như thế mà không cần thêm chúng vào tệp quản lý các phụ thuộc

Không quan trọng bạn đang cài đặt các gói một cách rõ ràng hay đề cập đến sự phụ thuộc trong tệp .json. Giả sử bạn đang làm việc trong một dự án nút và bạn cần một dự án khác request, thì bạn có hai tùy chọn:

• Chỉnh sửa tệp pack.json và thêm phụ thuộc vào 'request'
• cài đặt npm

HOẶC LÀ

• Sử dụng dòng lệnh: npm install --save request

--savetùy chọn cũng thêm phụ thuộc vào tệp pack.json. Nếu bạn không chỉ định--save tùy chọn, nó sẽ chỉ tải xuống gói nhưng tệp json sẽ không bị ảnh hưởng.

Bạn có thể làm điều này theo cách này, sẽ không có sự khác biệt đáng kể.