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