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自动补全)…等等安装插件。

在目录下执行

npm init

初始化项目，生成package.json，package.json是基于nodejs项目必不可少的配置文件，它是存放在项目根目录的普通json文件。

如果要用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

(当前目录下安装，–save-dev是为了把文件版本信息自动写入package.json文件)，

全局安装：

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/