nodejs+npm+gulp使用详细教程
来源:互联网 发布:台湾的未来 知乎 编辑:程序博客网 时间:2024/05/21 09:58
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/
- nodejs+npm+gulp使用详细教程
- nodejs+npm+gulp使用入门教程
- npm,bower,gulp使用
- nodejs npm 命令教程
- nodejs NPM教程(yiibai)
- nodejs npm gulp bower 几点
- 前端搭建Nodejs+npm+gulp开发环境
- gulp详细学习教程
- gulp详细教程
- nodejs,npm,grunt安装教程
- Nodejs,Npm,React安装教程
- 前端构建工具gulp超详细配置, 使用教程(图文)
- nodejs+angularjs+npm+gulp+bower+jade+less构建前端框架
- 傻傻分不清gulp和webpack以及nodejs 和 npm的
- gulp菜鸟级零基础详细教程,嘴对嘴教会你怎么使用gulp
- gulp详细教程---学习总结
- 使用npm+gulp+browserify网页前端开发
- nodejs和npm的使用
- 第四次实验
- .NET Office控件套包 Spire.Office for .NET 更新
- Python内置函数清单
- SSH整合中出现sessionFactory无法创建
- mysql语句
- nodejs+npm+gulp使用详细教程
- 欢迎使用CSDN-markdown编辑器
- Android-蓝牙
- 关于程序架构落地设计
- 删数问题 (sdut oj)
- 非滤波单目视觉SLAM系统研究
- 48.性能调优之分配更多资源
- Ping++ 支付php封装
- css3 滚动条样式