javascript - Grunt，NPM和Bower之间的区别（package.json vs bower.json）(Difference between Grunt, NPM and Bower ( package.json vs bower.json ))

Question

I'm new to using npm and bower, building my first app in emberjs :).(我是新手使用npm和bower，在emberjs中构建我的第一个应用程序:)。)

I do have a bit of experience with rails, so I'm familiar with the idea of files for listing dependencies (such as bundler Gemfile)(我对rails有一些经验，所以我对列出依赖项的文件的想法很熟悉（例如bundler Gemfile）)

Question: when I want to add a package (and check in the dependency into git), where does it belong - into package.json or into bower.json ?(问题：当我想添加一个包（并将依赖项检入git），它属于哪里 - 进入package.json或bower.json ？)

From what I gather,(从我收集的，)

running bower install will fetch the package and put it in /vendor directory,(运行bower install将获取包并将其放入/vendor目录，)
running npm install it will fetch it and put it into /node_modules directory.(运行npm install它将获取它并将其放入/node_modules目录。)

This SO answer says bower is for front-end and npm is for backend stuff.(这个SO答案说bower用于前端，npm用于后端。)

Ember-app-kit seems to adhere to this distinction from the first glance... But instructions in gruntfile for enabling some functionality give two explicit commands, so I'm totally confused here.(Ember-app-kit似乎从第一眼开始就坚持这种区别......但是gruntfile中用于启用某些功能的指令给出了两个显式命令，所以我在这里完全糊涂了。)

Intuitively I would guess that(直觉我会猜到)

1. npm install --save-dev package-name would be equivalent to adding the package-name to my package.json(npm install --save-dev package-name相当于将package-name添加到我的package.json中)

2. bower install --save package-name might be the same as adding the package to my bower.json and running bower install ?(bower install --save package-name可能与将包添加到我的bower.json并运行bower install相同 ？)

If that is the case, when should I ever install packages explicitly like that without adding them to the file that manages dependencies (apart from installing command line tools globally)?(如果是这种情况，我什么时候应该像这样明确地安装软件包而不将它们添加到管理依赖项的文件中（除了全局安装命令行工具）？)

  ask by apprenticeDev translate from so

Answer 1

Npm and Bower are both dependency management tools.(Npm和Bower都是依赖管理工具。)

But the main difference between both is npm is used for installing Node js modules but bower js is used for managing front end components like html, css, js etc .(但两者之间的主要区别是npm用于安装Node js模块，但是bower js用于管理前端组件，如html，css，js等 。)

A fact that makes this more confusing is that npm provides some packages which can be used in front-end development as well, like grunt and jshint .(让这更令人困惑的一个事实是，npm提供了一些可以用于前端开发的软件包，比如grunt和jshint 。)

These lines add more meaning(这些行增加了更多含义)

Bower, unlike npm, can have multiple files (eg .js, .css, .html, .png, .ttf) which are considered the main file(s).(与npm不同，Bower可以有多个文件（例如.js，.css，.html，.png，.ttf），这些文件被认为是主文件。)

Bower semantically considers these main files, when packaged together, a component.(Bower在语义上将这些主文件打包在一起时，它们是一个组件。)

Edit : Grunt is quite different from Npm and Bower.(编辑 ： Grunt与Npm和Bower完全不同。)

Grunt is a javascript task runner tool.(Grunt是一个javascript任务运行器工具。) You can do a lot of things using grunt which you had to do manually otherwise.(你可以使用grunt做很多事情，否则你必须手动完成。) Highlighting some of the uses of Grunt:(强调Grunt的一些用法：)

1. Zipping some files (eg zipup plugin)(压缩一些文件（例如zipup插件）)
2. Linting on js files (jshint)(Lins on js files（jshint）)
3. Compiling less files (grunt-contrib-less)(编译较少的文件（grunt-contrib-less）)

There are grunt plugins for sass compilation, uglifying your javascript, copy files/folders, minifying javascript etc.(有sass编译的grunt插件，uglifying你的javascript，复制文件/文件夹，缩小javascript等。)

Please Note that grunt plugin is also an npm package.(请注意，grunt插件也是一个npm包。)

Question-1(问题1)

When I want to add a package (and check in the dependency into git), where does it belong - into package.json or into bower.json(当我想添加一个包（并将依赖项检入git），它在哪里 - 属于package.json或bower.json)

It really depends where does this package belong to.(这真的取决于这个包属于哪里。)

If it is a node module(like grunt,request) then it will go in package.json otherwise into bower json.(如果它是一个节点模块（如grunt，request）那么它将在package.json中进入bower json。)

Question-2(问题2)

When should I ever install packages explicitly like that without adding them to the file that manages dependencies(什么时候我应该像这样明确地安装包而不将它们添加到管理依赖项的文件中)

It does not matter whether you are installing packages explicitly or mentioning the dependency in .json file.(无论是显式安装包还是提及.json文件中的依赖项都无关紧要。)

Suppose you are in the middle of working on a node project and you need another project, say request , then you have two options:(假设您正在处理节点项目，并且需要另一个项目，比如request ，那么您有两个选择：)

• Edit the package.json file and add a dependency on 'request'(编辑package.json文件并在'request'上添加依赖项)
• npm install(npm安装)

OR(要么)

• Use commandline: npm install --save request(使用命令行： npm install --save request)

--save options adds the dependency to package.json file as well.(--save选项也将依赖项添加到package.json文件中。)

If you don't specify --save option, it will only download the package but the json file will be unaffected.(如果未指定--save选项，则只会下载程序包，但json文件不受影响。)

You can do this either way, there will not be a substantial difference.(你可以这样做，不会有实质性的区别。)