前端工程搭建NodeJs+npm+gulp+bower

一 安装nodejs

nodejs 官司网下载安装文件

 官网地址:http://www.nodejs.org/download/


前端工程搭建NodeJs+npm+gulp+bower
因为是在64位win7上开发,因此下载windows64位msi版本的nodejs.

下载完成后,进行安装,默认安装路径为C:\Program Files\nodejs\,直接下一步就可以了。

安装完成之后,在命令窗口执行,node -v (显示nodejs版本) 和npm -v (显示npm版本)可以使用这两个命令查看是否安装成功:


前端工程搭建NodeJs+npm+gulp+bower

2.npm 简介

nodejs 安装过程中会自动安装npm,npm  是nodejs的程序包管理工具,用于从网上下载程序包并安装还可以管理工程对程序包的依赖,类似于java平台上的maven。

程序包是指实现了某些功能,并可以运行于nodejs平台,一般是开源程序,如压缩js代码程序,检查js代码正确性的程序等等。

使用npm 管理项目,一般工程目录下会有一个名为package.json 的json格式文件,该文件定义了工程的名称、作者、仓库地址、开发时依赖的模块,该工程的使用版本等等,如下bootstrap中的package.json:(详细配置说明见:http://blog.csdn.net/woxueliuyun/article/details/39294375)

{
  "name": "bootstrap",//项目名称
  "description": "The most popular front-end framework for developing responsive, mobile first projects on the web.",//项目说明
  "version": "3.3.0",//项目版本
  "keywords": [///关键字,用于别人搜索找到
    "css",
    "less",
    "mobile-first",
    "responsive",
    "front-end",
    "framework",
    "web"
  ],
  "homepage": "http://getbootstrap.com",//项目主页地址
  "author": "Twitter, Inc.",//作者
  "scripts": { //定义脚本,key为脚本名 value为可执行的nodejs命令
    "test": "grunt test"
  },
  "style": "dist/css/bootstrap.css",
  "less": "less/bootstrap.less",
  "main": "./dist/js/npm",
  "repository": {//定义了仓库类型及地址
    "type": "git",
    "url": "https://github.com/twbs/bootstrap.git"
  },
  "bugs": {//提交bug地址
    "url": "https://github.com/twbs/bootstrap/issues"
  },
  "license": {//版权声明
    "type": "MIT",
    "url": "https://github.com/twbs/bootstrap/blob/master/LICENSE"
  },
  "devDependencies": {//开发依赖哪些nodejs模块
    "btoa": "~1.1.2",
    "glob": "~4.0.6",
    "grunt": "~0.4.5",
    "grunt-autoprefixer": "~1.0.1",
    "grunt-banner": "~0.2.3",
    "grunt-contrib-clean": "~0.6.0",
    "grunt-contrib-concat": "~0.5.0",
    "grunt-contrib-connect": "~0.8.0",
    "grunt-contrib-copy": "~0.7.0",
    "grunt-contrib-csslint": "~0.3.1",
    "grunt-contrib-cssmin": "~0.10.0",
    "grunt-contrib-jade": "~0.13.0",
    "grunt-contrib-jshint": "~0.10.0",
    "grunt-contrib-less": "~0.12.0",
    "grunt-contrib-qunit": "~0.5.2",
    "grunt-contrib-uglify": "~0.6.0",
    "grunt-contrib-watch": "~0.6.1",
    "grunt-csscomb": "~3.0.0",
    "grunt-exec": "~0.4.6",
    "grunt-html-validation": "~0.1.18",
    "grunt-jekyll": "~0.4.2",
    "grunt-jscs": "~0.8.1",
    "grunt-saucelabs": "~8.3.2",
    "grunt-sed": "~0.1.1",
    "load-grunt-tasks": "~1.0.0",
    "npm-shrinkwrap": "~4.0.0",
    "remarkable": "^1.2.2",
    "time-grunt": "~1.0.0"
  },
  "engines": {//nodej引擎版本
    "node": "~0.10.1"
  }
}

 如果需要对bootstrap开发,则在package.json所在目录中执行npm install 就可以下载所有的依赖包到当前目录的node_modules中,因此源码中不需要带有依赖包,只需要有一个package.json就搞定了。 

   npm install --save  模块名 :将模块下载到当前目录的node_modules中并将依赖写入 package.json中的dependencies中

   npm  install --save-dev  模块名 : 将模块下载到当前目录的node_modules中并将依赖写入 package.json中的devDependencies中

nodejs安装程序会在环境变量中添加两个变量:

系统环境变量中:path 增加C:\Program Files\nodejs\ 因为在该目下存在node.exe 和npm.cmd,加入path后可以全局调用该命令。

用户变量中设置:

path=C:\Users\Administrator\AppData\Roaming\npm

该目录下node_modules目录用来存放安装的全局的nodejs模块,并在npm目录中生成相应的命令行可执行的文件。而将该路径加入path 是为了全局调用nodejs模块。 

使用npm config list 可以查看npm 配置信息:

C:\Users\Administrator>npm config list
; cli configs
registry = "https://registry.npmjs.org/" 模块注册地址
user-agent = "npm/1.4.28 node/v0.10.33 win32 x64"

; builtin config undefined
prefix = "C:\\Users\\Administrator\\AppData\\Roaming\\npm" 模块的存放目录

; node bin location = C:\Program Files\nodejs\\node.exe
; cwd = C:\Users\Administrator
; HOME = C:\Users\Administrator
; 'npm config ls -l' to show all defaults.
registry = "https://registry.npmjs.org/"
表明npm insall 模块时,到模块注册地址寻找,找到后获取模块代码的仓库地址,就可以下载了。

 可以使用npm config set <key> <value> 修改默认设置,如

npm config set prefix = 'c:\node',改prefix 时要记得修改path ,以使安装后可以直接运行。

如查使用npm config配置了环境变量,则在C:\Users\Administrator中生成了一个.npmrc文件,记录了配置信息,修改该文件也相当于执行了npm config 命令。

3 安装git

  git是分布式版本控制系统,现在的开源项目一般都放到公网上的git仓库上,如github(https://github.com/),项目中的使用的依赖包(开源项目)需要使用git从公网仓库中下载到本地。 

 windows 平台git 下载地址:http://msysgit.github.io/,安装时下一步就可以 了。 默认安装地址C:\Program Files (x86)\Git,安装完成后,在环境变量path中增加:C:\Program Files (x86)\Git\bin,目的是在cmd窗口中可以引用git命令。 

进入cmd 窗 口:执行命令git --version,显示git版本号,则安装成功

C:\Users\Administrator>git --version
git version 1.9.4.msysgit.2
$ git config --global user.name "你的名字"
$ git config --global user.email "您的email地址"
  

相关推荐