博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
gulp详细入门教程
阅读量:4655 次
发布时间:2019-06-09

本文共 1801 字,大约阅读时间需要 6 分钟。

文章摘抄自网络,用于记录学习

安装nodejs,通过nodejs的npm全局安装和项目安装gulp,其次在项目里安装所需要的gulp插件,然后新建gulp的配置文件gulpfile.js并写好配置信息(定义gulp任务),最后通过命令提示符运行gulp任务即可。

安装nodejs -> 全局安装gulp -> 项目安装gulp以及gulp插件 -> 配置gulpfile.js -> 运行任务

1、安装nodejs

1.1、说明:gulp是基于nodejs,理所当然需要安装nodejs;

1.2、安装:打开,点击硕大的绿色Download按钮,它会根据系统信息选择对应版本(.msi文件)。然后像安装QQ一样安装它就可以了(安装路径随意)。

2、使用命令行(如果你熟悉命令行,可以直接跳到)

2.1、说明:什么是命令行?命令行在OSX是终端(Terminal),在windows是命令提示符(Command Prompt);

2.2、注:之后操作都是在windows系统下;

2.3、简单介绍gulp在使用过程中常用命令,打开命令提示符执行下列命令(打开方式:window + r 输入cmd回车):

node -v查看安装的nodejs版本,出现版本号,说明刚刚已正确安装nodejs。PS:未能出现版本号,请尝试注销电脑重试;

npm -v查看npm的版本号,npm是在安装nodejs时一同安装的nodejs包管理器,那它有什么用呢?;

cd定位到目录,用法:cd + 路径 ;

dir列出文件列表;

cls清空命令提示符窗口内容。

操作方式:

window + r 输入cmd回车

node -v    //查看nodejs 版本号  未能出现版本号 请尝试注销电脑重试;

  显示结果:v0.12.0

npm -v  //查看npm版本号

  显示结果:2.5.1

cd d:\wamp\www  \\定位目录

d:  \\因为当半位于不同盘符,所以还需要输入d:才能正确定位 也可先定位到D盘,然后再定位目录

dir  //查看当前定位目录下的文件

cls  //清空面板内容

npm stall -g gulp  //全局安装gulp

gulp -v   //出现版本号即为正确安装

npm init   //创建package.json文件

 

3、npm介绍

 

3.1、说明:npm(node package manager)nodejs的包管理器,用于node插件管理(包括安装、卸载、管理依赖等);

 

3.2、使用npm安装插件:命令提示符执行npm install <name> [-g] [--save-dev]

 

3.2.1、<name>:node插件名称。例:npm install gulp-less --save-dev

 

3.2.2、-g:全局安装。将会安装在C:\Users\Administrator\AppData\Roaming\npm,并且写入系统环境变量;  非全局安装:将会安装在当前定位目录;  全局安装可以通过命令行在任何地方调用它,本地安装将安装在定位目录的node_modules文件夹下,通过require()调用;

 

3.2.3、--save:将保存配置信息至package.json(package.json是);

 

3.2.4、-dev:保存至package.json的devDependencies节点,不指定-dev将保存至dependencies节点;

 

3.2.5、为什么要保存至package.json?因为node插件包相对来说非常庞大,所以不加入版本管理,将配置信息写入package.json并将其加入版本管理,其他开发者对应下载即可(命令提示符执行npm install,则会根据package.json下载所有需要的包)。

 

3.4、使用npm卸载插件:npm uninstall <name> [-g] [--save-dev]  PS:不要直接删除本地插件包

 

3.5、使用npm更新插件:npm update <name> [-g] [--save-dev]

 

3.6、查看npm帮助:npm help

 

3.7、当前目录已安装插件:npm list

 

转载于:https://www.cnblogs.com/maixi/p/5066486.html

你可能感兴趣的文章
第十篇----------javascript函数的三种定义方式及区别
查看>>
181. Employees Earning More Than Their Managers【leetcode】,sql,inner join ,where
查看>>
html 元素
查看>>
jQuery-qrcode.js 生成带Logo 的二维码
查看>>
2,[VS入门教程] 使用Visual Studio写c语言 入门与技巧精品文~~~~优化篇
查看>>
Objective-C 基础(五)
查看>>
【bzoj1705】[Usaco2007 Nov]Telephone Wire 架设电话线 dp
查看>>
使用 .NET 平台,如何玩转 Universal Windows 应用?
查看>>
ffmpeg的基本命令
查看>>
flex4+fms3.5+cs4开发实时音视频直播及点播详解
查看>>
打开VS2015提示“重新启动处于挂起状态。请在启动Visual Studio”之前重新启动
查看>>
form 中Enctype=multipart/form-data 的作用
查看>>
洛谷P1257 平面上的最接近点对
查看>>
BZOJ1657 [Usaco2006 Mar]Mooo 奶牛的歌声
查看>>
CSS/JavaScript hacks,browserhacks使用
查看>>
SQLServer内部数据库版本获取及匹配
查看>>
【转】<meta>标签用法
查看>>
ajax请求post和get的区别以及get post的选择
查看>>
前端优化之图片优化自动化
查看>>
指向指针的指针
查看>>