nodejs npm bower grunt 他们之间到底是什么关系?

[woshiyigexiaohao]

我是一个普通的程序员,平时只是通过 FTP 以及编辑器工具 用一些 html jq scss 编写的 css 来制作网站.

后来我发现这些东西好像远远不够

我发现 git 上很多项目都是有类似的安装说明:

npm install -g grunt-cli npm install bower install npm start

下载的源文件我完全看不懂.

请问这些之间到底是啥联系?我该如何去学习他们?

[julyclyde]

javascript ：一门语言
V8 ：语言引擎
nodejs ：基于 V8 提供的运行环境
npm ：包管理器

bower ：过时了
grunt ：过时了
glup ：过时了

[woshiyigexiaohao]

@julyclyde 可以解释下三者的关系和和 nodejs 关系吗,拜托拜托💗

[alexapollo]

JavaScript 的环境问题总是蛋疼无比

[YUX]

现在都用 webpack 我也没弄太懂怎么配置 都是拖一个 Starter kit 然后在上面改

[MyFaith]

@julyclyde 关键时候过时了。 xD

[SuperMild]

一般来说，不是专门搞 nodejs 的，就不用管 nodejs 是什么了，可以简单理解为那是一个平台， npm 在上面运行，所以才需要安装 nodejs 。

npm 就是个包管理工具。非常优秀，非常好用，简单易用！

因此，才导致大家都用起来了，在前端领域想要安装个什么东西，他们都会让你 npm install 去。

主要是因为太好用了啊。找个教程花半个小时学习一下吧。

[zkd8907]

@woshiyigexiaohao
nodejs ：基于 V8 引擎，运行在服务器上的 JavaScript 框架，让你能用 JavaScript 开发；
bower 和 npm 都是 JavaScript 的包管理器， nodejs 本身自带的框架有限，但是通过 bower 或者 npm 可以直接使用别人已经实现并且发布到网上的模块。
grunt 和 gulp 是 js 构建工具，可以实现诸如自动压缩代码、图片、混淆 js 等自动化的工作，简化前端开发流程（其实并不局限于前端）。 grunt 和 gulp 是用 JavaScript 实现的，它们必须运行在 nodejs 环境。 grunt 和 gulp 都可以通过 npm 进行安装。例如`npm install gulp grunt --save-dev`。

[SuperMild]

或者你跟着我这个简短的教程实际操作一下 v2ex.com/t/286414 会马上有直观感受。

[bdbai]

我来猜一下。
NodeJS 是在后端运行的语言。以下都需要 NodeJS 环境来运行：

NPM 是它的包管理器。
Bower 是前端依赖的管理器。我没用过。
Grunt 是用来构建前端项目的，比如写完代码 CSS 和 JS 压缩，自动刷新，自动测试、发布，配置好就可以一键完成。我用过它的替代品 Gulp 。
这么一套东西可以帮你更轻松地写前端项目。

[SoloCompany]

nodejs - 你说的所有东西都依赖它，一个基于 V8 的 js 运行环境

npm / bower - js 包管理（包括依赖管理和发布管理），前者设计用于服务端开发，后者设计用于前端开发（可以说是学 npm 的），后来大家都喜欢大一统了，所以 browsify 以及现在正火的 webpack 的出现（利用 npm 来做前端的包管理），使得 bower 变得越来越被边缘化

grunt / gulp : 都是前端工程化工具 / 构建工具，你可以理解为一堆预设的脚本和插件，可以辅助你构建前端项目，减少重复性的工作。但同样因为 webpack 的兴起而被越来越边缘化了

[vjnjc]

原来 gulp 和 bower 都过时了啊。。。我的思维还停留在那个年代

[paulagent]

@vjnjc 现在 webpack 的天下了吧。 不过这玩意更新换代真快。 angular 还没学会， react 又火爆起来

[Sparetire]

JS ：语言，可以理解为一种规范
V8: 解释器吧，理解为 JS 这门语言的具体实现
Node: 有解释器还得有一票基础的类库吧，比如什么内置对象啊模块啊，就好像浏览器有 V8 也有 BOM 对象这些， Node 就简单理解为一个 V8 加一票模块 /类库就叫运行环境
NPM: 包管理器，帮你下载模块并解决依赖，比如你需要 A 库， A 依赖 BC ， npm install A 就自动帮你下好 ABC
Bower: 没用过，好像也是个包管理器，过时了
Grunt: 构建工具，帮你压缩合并代码图片等等，过时了
Gulp/Webpack: 构建工具(Webpack 也算吧)， Gulp 还算市面主流吧不过和 Webpack 比是过时些。。反正我都在学

[DravenJohnson]

Bower 是个 Frontend 的包管理器，更多用于类似 AngularJS 之类的这种前端框架管理和下载。和 Npm 类似但是 npm 主要更多是服务器端的。说 Bower 过时了我个人没有感觉， Grunt 和 Gulp 是差不多的东西， Grunt 过时了是的确

[hronro]

原来 gulp 过时了😂

[learnshare]

Webpack 和 Grunt/Gulp 不冲突，它也不是以一敌百的万能工具。

[laoyur]

贵圈真乱

[vjnjc]

@paulagent 哈哈哈，我就是那个会点点 angularjs 的，现在在赶 reactnative 。立志成为全站工程师，但是 web 端的技术栈一直在落伍 ：）

[haha1903]

@julyclyde 这三个都过时了，替代品是？

[tabris17]

所以我才不要做前端ˊ_>ˋ

[laosb]

@haha1903 Make 不过时。简单点不需要用 make 的直接 npm script 。 bower 的活现在直接 npm 承包。

[maomaomao001]

@SuperMild 它的易用性体现在哪啊～～～我用的很痛苦

[maomaomao001]

@hronro 是啊～～我还打算那天看看 glup 或者 grunt 自动化前端开发～～～还没用就过时了，真可惜

[weaming]

bower 和 gulp 都过时了？我还准备学学呢

[SourceMan]

nodejs: Windows 系统
npm:360 软件管家
grunt.gulp.bower: 运行在 Windows 上的其他软件

[SuperMild]

@maomaomao001 是这样的，用 npm 安装东西分为 globally 和 locally 两种方式，其中 locally 是精华，是最好用的地方。

举一个简单的例子，比如你在一个名为 Project 的文件夹里用 locally 的方式安装东西，那么，全部依赖文件都在这里面，配合 webpack 之类的，在 js 文件里可以直接写 require('jquery') ，它会自动在这个文件夹里找到指定版本的 jquery 。

其它项目的 jquery 版本不受影响。

[Phariel]

前端就是喜欢折腾各种轮子然后哪天突然醒悟卧槽维护这东西好累啊咱们转向下个轮子吧

[maomaomao001]

@SuperMild 你们一般是怎么用 npm 的，只用控制台？
然后我每次安装一个模块的时候，点的明明是 -g 全局安装～～但是项目中使用的时候 npm install 它又去网站找，下载～～～很慢的

[bdbai]

@maomaomao001 可以把淘宝镜像源写进 .npmrc 来提速。

[charlie21]

npm install -g gulp 等东西，是因为会用到那些命令行： -g 那意味着全局安装 所以得到了命令行的可执行文件
which gulp 安装完之后可以查看可执行文件的位置
常用的可执行文件有 bower, browserify; gulp 等 ( gulp 和 grunt 基本不会同时用，会二选一 )
-
其他的都是依赖而已，由 npm 包管理器来安装

[hronro]

@maomaomao001 那现在是 gulp 的替代品是?

[dongoo]

@hronro 应该 Webpack 😂

[zsx]

@julyclyde gulp 哪里过时了……莫名其妙； gulp + browserify 和 webpack 的思想是不同的，适用于不同的场合。

[maomaomao001]

@hronro 我在用 webpack

[wubotao]

Gulp 也不算过时吧
Webpack 也不能算是完全替代 Gulp

[vimffs]

贵圈乱得可以，刚开始用就过时鸟