gulp的安装与使用

浅浅的花香味﹌ 2021-09-15 01:12 445阅读 0赞

当时我是第一次使用，中途有点小挫折，现在来说说我的安装和使用过程：

说之前，我先附上两个参考链接：

1.https://segmentfault.com/a/1190000005170434

2.http://blog.csdn.net/itlsx/article/details/49981459

首先参考第一个链接：

第一步：安装node.js

*  去 [https://nodejs.org/en/][https_nodejs.org_en]下载安装文件安装即可。
 *  安装完成后，在终端输入`node -v`回车打印出nodejs的版本号，说明nodejs安装成功。
 *  在终端输入`npm -v`  
    回车打印出npm的版本号，说明npm也安装成功(node安装包中已集成了npm,因此在安装nodejs的同时也安装了npm)。

第二步：安装全局gulp：

*  在终端输入`npm install gulp -g`
 *  安装完成后，同样输入`gulp -v`输出相应的版本号，则说明安装成功。至此gulp安装完成

第三步：配置本地项目：

这里我想说的是，如果是已经有项目的人（比如本人）了，意思是你本地有项目的代码，就可以跳过这个步骤；如果没有项目的童鞋，你可以参考链接自己配置一个本地项目。详情请参考第一个链接。

第三步：安装本地gulp：

这一步我费了一点时间，因为两个链接里面都没有谈到到底是将这个本地gulp安装在哪里......

虽然可能是我的理解能力不够，没能理解他们的博客意思，但是不管了，我现在把这个安装路径给大家说清楚些。

这个安装本地gulp，意思是要将gulp安装至你项目的路径的根目录下。

操作是这样的，点击windows，然后在输入栏里输入cmd，一般情况下，弹出来的控制命令窗口（cmd）第一行显示的都是C盘的桌面路径，这个时候你先需要操作进项目的路径。

比如你的项目在D盘，那么先输入D:，然后再cd(文件夹的名字)一步一步进入至你项目的根目录下，随后再输入npm install gulp --save\-dev

安装完成之后，会出现这两个文件，很重要呢。如下图：

![70][]

第四步：安装本地gulp插件，可参考第一个链接：

第一个链接中有三个常用插件，大家可以在输入行输入npm install --save-dev gulp-uglify gulp-concat gulp-minify-css

当然了，安装路径依旧是项目的根目录

第五步：安装之后，直接在根目录下输入gulp：

一般来说，没有项目的人会出现以下界面：

![70 1][]

出现这样的界面就说明gulp可以正常使用了，而gulp的作用大家可以自行百度搜索

但是有项目的人，可能就不会出现这样的界面了，会出现这样的界面：

![70 2][]

出现了错误，大家也可以看到错误的第一行的意思找不到“gulp-rev-collector”这个模块

解决的方法就是安装啦，还是在根目录，在命令行输入npm install gulp-rev-collector --save-dev进行安装即可，等待安装完成。

出现这样的原因是因为项目中的gulpfile.js的文件中有这样几行代码，这几行代码引入是刚才安装的插件，大家可以参考第一个链接的第六点，如下图所示：

![70 3][]

如下项目中的gulpfile.js文件引入了其他的插件，而你的本地没有安装，那么你先需要安装才行，跟上述安装“gulp-rev-collector”这个模块一样，这里不再赘述。

安装所有所需的插件（剩余的插件可以参考链接2）之后，再次输入gulp，会出现刚才所说的界面，即

![70 4][]

出现这样的界面之后，就说明你gulp不仅安装成功，而且还成功使用了一次，你会发现你的本地文件会有部分改动，改动的部分正是gulp的效果。

[https_nodejs.org_en]: https://nodejs.org/en/
[70]: /images/20210522/147658fb2ffe4198ba1cbaa4f549f4e4.png
[70 1]: /images/20210522/12598b15fc5349728e7b5e26ae822e59.png
[70 2]: /images/20210522/166c5818b0bc4a50a3ce116e9cbc771f.png
[70 3]: /images/20210522/89eebfe756cb4348a2d91cb7e39d76b3.png
[70 4]: /images/20210522/6374e614a3984fa5b3f719f78e4dbb7d.png

发表评论取消回复

表情：

评论列表（有 0 条评论，445人围观）

还没有评论，来说两句吧...

相关阅读

相关 gulp的安装

一、安装 1. 全局安装 npm install gulp --global 或者 npm install gulp -g 2

﹏ヽ暗。殇╰゛Y/ 2023年02月09日 14:19/ 0 赞/ 3 阅读

相关 gulp的使用教程

gulp是一个前端自动化构建工具，通过代码优于配置的策略，Gulp 让简单的任务简单，复杂的任务可管理。全局安装 npm install --glo

浅浅的花香味﹌/ 2022年09月27日 13:29/ 0 赞/ 227 阅读

相关 gulp工具的使用

gulp 多个开发者共同开发一个项目，每位开发者负责不同的模块，这就会造成一个完整的项目实际上是由许多的“代码版段”组成的；使用le

拼搏现实的明天。/ 2022年06月13日 02:42/ 0 赞/ 281 阅读

相关前端工具gulp的使用与介绍

一、gulp的基本能力主要是文件合并gulp-concat、文件压缩gulp-uglify、给文件生成版本号gulp-rev、文件重命名gulp-rename

亦凉/ 2022年05月29日 00:15/ 0 赞/ 206 阅读

相关 gulp 使用

1、安装node.js 2、全局安装 gulp npm install --global gulp 3、进入文件局部安装 gulp npm

傷城~/ 2022年05月24日 07:24/ 0 赞/ 202 阅读

相关如何安装gulp

1、安装 gulp C:\Users\Administrator.USER-0GUONPPBHK>cnpm install --global gulp Dow

傷城~/ 2022年05月22日 05:07/ 0 赞/ 231 阅读

相关什么是Gulp？如何使用Gulp

什么是Gulp？如何使用Gulp Gulp 是基于node.js的一个前端自动化构建工具，开发这可以使用它构建自动化工作流程（前端集成开发环境）。使用gulp你可

淡淡的烟草味﹌/ 2022年05月14日 01:30/ 0 赞/ 375 阅读

相关 gulp的基本使用

1 cnpm i gulp -D 2 cnpm i node-sass gulp-sass -D 3 cnpm i gulp-clean-css gulp-rename

约定不等于承诺〃/ 2022年02月26日 17:16/ 0 赞/ 244 阅读

相关 gulp的安装与使用、sass的正确使用总结

gulp的安装步骤 window下哪个命令能够进入命令行窗口：cmd 1、先安装nodejs 2、全局安装gulp 打开cmd命令行窗口安装命令： npm i

「爱情、让人受尽委屈。」/ 2021年12月18日 23:34/ 0 赞/ 528 阅读

相关 gulp的安装与使用

当时我是第一次使用，中途有点小挫折，现在来说说我的安装和使用过程：说之前，我先附上两个参考链接： 1.https://segmentfault.com/a/1190

浅浅的花香味﹌/ 2021年09月15日 01:12/ 0 赞/ 446 阅读