V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
woshiyigexiaohao
V2EX  ›  Node.js

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

  •  2
     
  •   woshiyigexiaohao · 2016-06-24 22:15:21 +08:00 · 6648 次点击
    这是一个创建于 2834 天前的主题,其中的信息可能已经有所发展或是发生改变。

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

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

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

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

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

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

    36 条回复    2016-06-27 01:01:25 +08:00
    julyclyde
        1
    julyclyde  
       2016-06-24 22:30:29 +08:00   ❤️ 1
    javascript :一门语言
    V8 :语言引擎
    nodejs :基于 V8 提供的运行环境
    npm :包管理器

    bower :过时了
    grunt :过时了
    glup :过时了
    woshiyigexiaohao
        2
    woshiyigexiaohao  
    OP
       2016-06-24 22:36:31 +08:00
    @julyclyde 可以解释下三者的关系和和 nodejs 关系吗,拜托拜托💗
    alexapollo
        3
    alexapollo  
       2016-06-24 22:41:57 +08:00
    JavaScript 的环境问题总是蛋疼无比
    YUX
        4
    YUX  
       2016-06-24 22:50:26 +08:00 via iPhone
    现在都用 webpack 我也没弄太懂怎么配置 都是拖一个 Starter kit 然后在上面改
    MyFaith
        5
    MyFaith  
       2016-06-24 22:50:28 +08:00
    @julyclyde 关键时候过时了。 xD
    SuperMild
        6
    SuperMild  
       2016-06-24 22:55:16 +08:00 via iPad   ❤️ 1
    一般来说,不是专门搞 nodejs 的,就不用管 nodejs 是什么了,可以简单理解为那是一个平台, npm 在上面运行,所以才需要安装 nodejs 。

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

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

    主要是因为太好用了啊。找个教程花半个小时学习一下吧。
    zkd8907
        7
    zkd8907  
       2016-06-24 22:57:30 +08:00   ❤️ 1
    @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
        8
    SuperMild  
       2016-06-24 22:57:44 +08:00 via iPad   ❤️ 1
    或者你跟着我这个简短的教程实际操作一下 v2ex.com/t/286414 会马上有直观感受。
    bdbai
        9
    bdbai  
       2016-06-24 23:02:23 +08:00 via Android
    我来猜一下。
    NodeJS 是在后端运行的语言。以下都需要 NodeJS 环境来运行:

    NPM 是它的包管理器。
    Bower 是前端依赖的管理器。我没用过。
    Grunt 是用来构建前端项目的,比如写完代码 CSS 和 JS 压缩,自动刷新,自动测试、发布,配置好就可以一键完成。我用过它的替代品 Gulp 。
    这么一套东西可以帮你更轻松地写前端项目。
    SoloCompany
        10
    SoloCompany  
       2016-06-24 23:54:08 +08:00
    nodejs - 你说的所有东西都依赖它,一个基于 V8 的 js 运行环境

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

    grunt / gulp : 都是前端工程化工具 / 构建工具,你可以理解为一堆预设的脚本和插件,可以辅助你构建前端项目,减少重复性的工作。但同样因为 webpack 的兴起而被越来越边缘化了
    vjnjc
        11
    vjnjc  
       2016-06-25 00:30:20 +08:00
    原来 gulp 和 bower 都过时了啊。。。我的思维还停留在那个年代
    paulagent
        12
    paulagent  
       2016-06-25 01:24:22 +08:00
    @vjnjc 现在 webpack 的天下了吧。 不过这玩意更新换代真快。 angular 还没学会, react 又火爆起来
    Sparetire
        13
    Sparetire  
       2016-06-25 02:51:07 +08:00 via Android
    JS :语言,可以理解为一种规范
    V8: 解释器吧,理解为 JS 这门语言的具体实现
    Node: 有解释器还得有一票基础的类库吧,比如什么内置对象啊模块啊,就好像浏览器有 V8 也有 BOM 对象这些, Node 就简单理解为一个 V8 加一票模块 /类库就叫运行环境
    NPM: 包管理器,帮你下载模块并解决依赖,比如你需要 A 库, A 依赖 BC , npm install A 就自动帮你下好 ABC
    Bower: 没用过,好像也是个包管理器,过时了
    Grunt: 构建工具,帮你压缩合并代码图片等等,过时了
    Gulp/Webpack: 构建工具(Webpack 也算吧), Gulp 还算市面主流吧不过和 Webpack 比是过时些。。反正我都在学
    DravenJohnson
        14
    DravenJohnson  
       2016-06-25 03:16:25 +08:00
    Bower 是个 Frontend 的包管理器,更多用于类似 AngularJS 之类的这种前端框架管理和下载。和 Npm 类似但是 npm 主要更多是服务器端的。说 Bower 过时了我个人没有感觉, Grunt 和 Gulp 是差不多的东西, Grunt 过时了是的确
    hronro
        15
    hronro  
       2016-06-25 07:17:09 +08:00 via Android
    原来 gulp 过时了😂
    learnshare
        16
    learnshare  
       2016-06-25 08:15:47 +08:00
    Webpack 和 Grunt/Gulp 不冲突,它也不是以一敌百的万能工具。
    laoyur
        17
    laoyur  
       2016-06-25 09:32:58 +08:00 via iPhone
    贵圈真乱
    vjnjc
        18
    vjnjc  
       2016-06-25 09:38:46 +08:00
    @paulagent 哈哈哈,我就是那个会点点 angularjs 的,现在在赶 reactnative 。立志成为全站工程师,但是 web 端的技术栈一直在落伍 :)
    haha1903
        19
    haha1903  
       2016-06-25 09:39:59 +08:00
    @julyclyde 这三个都过时了,替代品是?
    tabris17
        20
    tabris17  
       2016-06-25 10:15:29 +08:00 via iPhone
    所以我才不要做前端ˊ_>ˋ
    laosb
        21
    laosb  
       2016-06-25 10:38:35 +08:00   ❤️ 1
    @haha1903 Make 不过时。简单点不需要用 make 的直接 npm script 。 bower 的活现在直接 npm 承包。
    maomaomao001
        22
    maomaomao001  
       2016-06-25 11:44:01 +08:00 via Android
    @SuperMild 它的易用性体现在哪啊~~~我用的很痛苦
    maomaomao001
        23
    maomaomao001  
       2016-06-25 11:45:43 +08:00 via Android
    @hronro 是啊~~我还打算那天看看 glup 或者 grunt 自动化前端开发~~~还没用就过时了,真可惜
    weaming
        24
    weaming  
       2016-06-25 11:55:03 +08:00 via Android
    bower 和 gulp 都过时了?我还准备学学呢
    SourceMan
        25
    SourceMan  
       2016-06-25 12:08:30 +08:00 via iPhone
    nodejs: Windows 系统
    npm:360 软件管家
    grunt.gulp.bower: 运行在 Windows 上的其他软件
    SuperMild
        26
    SuperMild  
       2016-06-25 12:12:26 +08:00
    @maomaomao001 是这样的,用 npm 安装东西分为 globally 和 locally 两种方式,其中 locally 是精华,是最好用的地方。

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

    其它项目的 jquery 版本不受影响。
    Phariel
        27
    Phariel  
       2016-06-25 13:54:49 +08:00 via iPhone
    前端就是喜欢折腾各种轮子然后哪天突然醒悟卧槽维护这东西好累啊咱们转向下个轮子吧
    maomaomao001
        28
    maomaomao001  
       2016-06-25 16:18:55 +08:00 via Android
    @SuperMild 你们一般是怎么用 npm 的,只用控制台?
    然后我每次安装一个模块的时候,点的明明是 -g 全局安装~~但是项目中使用的时候 npm install 它又去网站找,下载~~~很慢的
    bdbai
        29
    bdbai  
       2016-06-25 17:40:06 +08:00 via Android   ❤️ 1
    @maomaomao001 可以把淘宝镜像源写进 .npmrc 来提速。
    charlie21
        30
    charlie21  
       2016-06-25 21:27:48 +08:00
    npm install -g gulp 等东西,是因为会用到那些命令行: -g 那意味着全局安装 所以得到了命令行的可执行文件
    which gulp 安装完之后可以查看可执行文件的位置
    常用的可执行文件有 bower, browserify; gulp 等 ( gulp 和 grunt 基本不会同时用,会二选一 )
    -
    其他的都是依赖而已,由 npm 包管理器来安装
    hronro
        31
    hronro  
       2016-06-25 21:58:15 +08:00
    @maomaomao001 那现在是 gulp 的替代品是?
    dongoo
        32
    dongoo  
       2016-06-25 22:35:35 +08:00 via Android
    @hronro 应该 Webpack 😂
    zsx
        33
    zsx  
       2016-06-25 23:19:39 +08:00
    @julyclyde gulp 哪里过时了……莫名其妙; gulp + browserify 和 webpack 的思想是不同的,适用于不同的场合。
    maomaomao001
        34
    maomaomao001  
       2016-06-26 00:42:49 +08:00 via Android
    @hronro 我在用 webpack
    wubotao
        35
    wubotao  
       2016-06-27 00:14:19 +08:00
    Gulp 也不算过时吧
    Webpack 也不能算是完全替代 Gulp
    vimffs
        36
    vimffs  
       2016-06-27 01:01:25 +08:00 via Android
    贵圈乱得可以,刚开始用就过时鸟
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   988 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 29ms · UTC 20:12 · PVG 04:12 · LAX 13:12 · JFK 16:12
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.