琴妹8
侠客
侠客
  • 最后登录2019-10-25
  • 发帖数39
阅读:10455回复:2

[nodejs]vscode中执行gulp task的简便方法

楼主#
更多 发布于:2018-07-10 19:13
本文重点是gulp在vscode中执行task任务的方法
第1步:安装node。下载地址:https://nodejs.org/zh-cn/
检查是否安装成功:Windows键+R快捷键打开cmd,输入node -v查询安装的node版本,查询到版本号,才是安装成功。

图片:cmd.png



第2步:
下载插件:Gulp Snippets===>主要作用就是识别gulp
下载插件Gulp Tasks==>主要是管理任务,方便执行任务
如下

图片:2.png



第3步:gulp的配置
1、在package.json文件中配置gulp,查询结果如下
在powershell或者cmd(快捷键进入cmd方法后期单独写一篇介绍)中输入(老生常谈问题:注意路径是否正确)
npm install gulp --save-dev

图片:3.png



2、gulpfiles.js文件的建立,不能换其他名字
3、引用gulp
const gulp=require(gulp")

图片:4.png



4、写测试gulp任务(可写可不写,我习惯性安装好后调试一下看看是否报错)

图片:5.png



5、写需要gulp执行的任务


第4步:
配置好gulp以及写好任务后,执行任务方法如下:
1、可以用gulp tasks这个工具栏,会自动识别你所有的gulp任务名,选择执行即可
2、在powershell可以直接输入gulp+任务名字,注意:这里需要高度注意,必须是根目录下输入命令,否则路径是不对的,会报错说这个文件里找不到gulp,前提你是全局安装以及依赖安装过还报这种错误的话。
如果不在当前根目录下,意思是可能是在gulpfiles的“爷爷”路径(这个问题可能是建gulpfiles文件的时候路径就错了),通过输入 cd xxx(gulpfiles的“爸爸”文件名)回车,进入gulpfiles的根目录下,然后再输入 gulp+任务名 执行任务

图片:7.png




暂时总结的执行gulp任务的二种方法如下:

图片:8.png


鼠标移入会有这个小图标,
意思分别是:execute task  执行任务
terminate task  终止任务
restart task 重新启动任务
refresh task  刷新任务

图片:9.png

[琴妹8于2018-07-11 10:57编辑了帖子]

最新喜欢:

doubleyongdouble...
代码得海洋有些深,我这还不会游泳,就带着游泳圈,还要带个打气筒,时不时打点气,不让自己沉下去。 希望通过我们得交流和学习,能够慢慢有艘船,在大海中航行,不用为了活下去而忽略海上得风景,其实慢慢成长我们会发现,大海,真是个神秘得地方。 学习使我们优秀,我们一起加油吧!
琴妹8
侠客
侠客
  • 最后登录2019-10-25
  • 发帖数39
沙发#
发布于:2018-07-11 10:58
doubleyong:写的真是详细哦,楼主辛苦了回到原帖
代码得海洋有些深,我这还不会游泳,就带着游泳圈,还要带个打气筒,时不时打点气,不让自己沉下去。 希望通过我们得交流和学习,能够慢慢有艘船,在大海中航行,不用为了活下去而忽略海上得风景,其实慢慢成长我们会发现,大海,真是个神秘得地方。 学习使我们优秀,我们一起加油吧!
doubleyong
管理员
管理员
  • 最后登录2026-05-25
  • 发帖数1198
  • 最爱沙发
  • 喜欢达人
  • 原创写手
  • 社区居民
  • 忠实会员
板凳#
发布于:2018-07-10 22:56
写的真是详细哦,楼主辛苦了
知识需要管理,知识需要分享
游客


返回顶部

公众号

公众号