nodejs+npm+gulp使用详细教程

nodejs+npm+gulp使用详细教程

• nodejs简介
• npm简介
• gulp简介
• gulp入门
• npm模块管理

---

nodejs简介

nodejs 是一个javascript运行环境。

npm简介

NPM（node package manager），通常称为node包管理器。安装node的时候已经集成了npm，它的主要功能就是管理node包，包括：安装、卸载、更新、查看、搜索、发布等。

使用简单的符号标识不同的标题，将某些文字标记为粗体或者斜体，创建一个链接等，详细语法参考帮助？。

gulp简介

gulp是一个前端自动化构建工具，必须依赖一个js运行环境，所以必须先安装node.
作用:让开发者可以使用它在项目开发过程中自动执行常见任务。 启动本地服务器，监听less，html，合并css，js文件，压缩文件等。

gulp安装

• 安装nodejs(自动集成了npm)
  傻瓜式安装，直接下一步，盘符直接选择C盘下一步即可，否则还需要配置环境变量，毕竟node也不大，装到c盘即可。安装成功后，输入
  node -v
  查看node 版本，接着输入
  npm -v
  查看npm版本。
  
  出现此界面说明node,npm安装成功（这是git页面，大家也可以自行装下git更好用）。
  ps：因为npm服务器在国外，反应比较慢，
  国内淘宝有个映像npm的中国的npm，这样国内访问国内的就比较快了，控制台输入：
  npm install -g cnpm --registry=https://registry.npm.taobao.org
  安装命令和npm安装插件一样，只不过前面多了一个c。
  cnpm install gulp-less.

• 安装gulp
  在需要启动gulp任务的目录下，window+R,输入cmd打开控制台，输入
  npm install --save-dev gulp
  开始安装gulp，安装成功以后会在当前目录下生成node_modules文件夹，这里面的文件不要修改，文件夹里面包含已下载好了gulp文件。
  控制台输入
  gulp -v
  
  出现版本号界面说明gulp安装成功。

gulp入门

执行npm install gulp-less（编译less）gulp-imagemin（图片压缩）gulp-autoprefixer(css3自动补全)…等等安装插件。

• 在目录下新建package.json（必不可少）文件，package.json是基于nodejs项目必不可少的配置文件，它是存放在项目根目录的普通json文件，编辑后把注释删掉。

{
  "name": "test",   //项目名称（必须）
  "version": "1.0.0",   //项目版本（必须）
  "description": "This is gulp  !",   //项目描述（必须）
  "homepage": "",   //项目主页
  "repository": {    //项目资源库
    "type": "git",
    "url": "https://git.csdn.net/xx"
  },
  "author": {    //项目作者信息
    "name": "yunlu",
    "email": "905752387@qq.com"
  },
  "license": "ISC",    //项目许可协议
  "devDependencies": {    //项目依赖的插件
    "gulp": "^3.8.11",
    "gulp-less": "^3.0.0"
  }
}

• 如果要用gulp执行任务，必须新建一个”Gulpfile.js“（必不可少）文件，来执行一些任务。

  • 定义模块。
    gulp = require("gulp"),
gulpLoadPlugins = require('gulp-load-plugins');

  • 定义任务。
    gulp(“任务名称”，function(){ do something…})

  • 执行任务，分为两种：
    默认执行的任务（default关键词为gulp默认执行，后面跟默认执行任务的列表）：
    gulp.task(“default”, [‘任务名称1’,’任务名称2’]);
    例如：
    gulp.task("default", ['localhost','watchjs']);
    git下输入：gulp 会自动执行默认任务列表
    执行单个任务：
    git下输入：gulp 任务名称
    例如 gulp less 会自动编译less.

总结：node_modules文件夹,Gulpfile.js，package.json是gulp必须的文件。

npm模块管理

安装或者删除插件，用以下相关命令，在项目目录下git后,

• 
  
• 安装模块：
  
  • 局部安装：
    npm install --save-dev gulp(当前目录下安装，一般这样选)，
  • 全局安装：
    npm install -g gulp
• 删除模块：npm uninstall 模块名 例如 npm uninstall gulp-less
• 检查过时并更新模块：npm outdated 检查包是否已经过时，此命令会列出所有已经过时的包，可以及时进行包的更新
• 更新模块：npm update 模块名 例如 npm update gulp-less
  

最后附上：
gulp官网：http://www.gulpjs.com.cn/
gulp插件官网：http://gulpjs.com/plugins/

关键词：javascript 项目开发 运行环境 manager package