关于nodejs、npm、bower、grunt的理解

一开始要装nodejs、然后用npm、bower的时候根本就有点搞不懂。现在终于弄明白一些了。

前言

为什么要安装nodejs。npm包有什么作用？

我的理解是安装nodejs一开始主要是为了npm包顺便安装好。然后npm包可以装很多的东西。一开始我是懵的。我想的是npm弄完了它装在全局的东西我该怎么去引用它呢？后来经过一系列的查找和问前辈，现在终于明白了一点，所以来和大家分享。

grunt

是一套前端自动化工具，一个基于nodeJs的命令行工具，一般用于：
① 压缩文件
② 合并文件
③ 简单语法检查
对于其他用法，我还不太清楚，我们这里简单介绍下grunt的压缩、合并文件
初学，有误请包涵

准备阶段

1、nodejs环境

因为要安装grunt、bower、npm都是先需要nodejs的环境的。这个简单网上百度nodejs下载。下载完了直接安装。它会自带一个npm的包。然后通过这个我们就可以安装bower、还有一些库什么的。

安装grunt

npm install -g grunt-cli

直接cmd中敲就可以。因为是安装在全局的都可以调用。这条命令将会把grunt命令植入系统路径，这样就能在任意目录运行他，
原因是每次运行grunt时，它都会使用node的require查找本地是否安装grunt，如果找到CLI便加载这个本地grunt库然后应用我们项目中的GruntFile配置，并执行任务PS：这段先不要管，安装完了往下看。

如何打包

打包需要前提需要一个packsge.json文件和Gruntfile.js文件。

package.json

这个文件用来存储npm模块的依赖项（比如我们的打包若是依赖requireJS的插件，这里就需要配置）然后，我们会在里面配置一些不一样的信息，比如我们上面的file，这些数据都会放到package中

Gruntfile.js

这个文件尤其关键，他一般干两件事情：
① 读取package信息
② 插件加载、注册任务，运行任务（grunt对外的接口全部写在这里面）

Gruntfile一般由四个部分组成① 包装函数这个包装函数没什么东西，意思就是我们所有的代码必须放到这个函数里面
module.exports = function (grunt) {//你的代码}
这个不用知道为什么，直接将代码放入即可
② 项目/任务配置我们在Gruntfile一般第一个用到的就是initConfig方法配置依赖信息
pkg: grunt.file.readJSON('package.json')
这里的 grunt.file.readJSON就会将我们的配置文件读出，并且转换为json对象然后我们在后面的地方就可以采用pkg.XXX的方式访问其中的数据了值得注意的是这里使用的是underscore模板引擎，所以你在这里可以写很多东西uglify是一个插件的，我们在package依赖项进行了配置，这个时候我们为系统配置了一个任务uglify（压缩），他会干这几个事情：① 在src中找到zepto进行压缩（具体名字在package中找到）② 找到dest目录，没有就新建，然后将压缩文件搞进去③ 在上面加几个描述语言这个任务配置其实就是一个方法接口调用，按照规范来就好，暂时不予关注，内幕后期来这里只是定义了相关参数，但是并未加载实际函数，所以后面马上就有一句：grunt.loadNpmTasks('grunt-contrib-uglify');
用于加载相关插件最后注册一个自定义任务（其实也是默认任务），所以我们下面的命令行是等效的：
grunt == grunt uglify

合并文件
合并文件依赖于grunt-contrib-concat插件，所以我们的package依赖项要新增一项然后写好配置文件即可先压缩了再合并。关于package.json和Gruntfile.js怎么写可以百度一下。

疑惑

一开始我就很奇怪为什么公司做的项目是有bower的包和npm生成的node_module的东西。后来我明白了一点。公司的项目主要用npm来进行代码的打包压缩。而用bower来装一些插件库、比如angularjs、jquery、bootstrap等。其实npm一个东西就可以干完的事情。至今还有疑惑为什么要分开。有人能解答疑惑可以在下方评论。