gulp安装流程、使用方法及CMD常用命令导览

╰半橙微兮° 2022-03-18 03:24 433阅读 0赞

\*\*

## 一、名词介绍： ##

\*\*  
Npm——node包管理工具

一开始我不理解，包管理工具是什么鬼。后来用到的gulp也好，gulp的插件包也好，都是要在npm这个里边弄出来的。

可以理解为，一个硬盘，里边放的各种整理好的、适用于各种功能的且不重复的文件夹（插件），然后我们需要啥，就去里边摘下来。

当然也可以用它来删除插件;

**rimraf删除gulp的模块插件**  
1、安装：npm install -g rimraf（全局安装），如果安装了cnpm，也可使用cnpm install -g rimraf 命令

2、使用：先定位目标文件夹的父级目录，然后命令行输入rimraf \*\*\*（\*\*\*为需要删除的文件夹名称）;

## 二、安装流程： ##

1．Node环境安装

2．Npm-

3．->Cnpm

4．安装gulp【特别说明：gulp需要安装两次，一全局，一局部】

a) 全局安装gulp

5．跳转本地项目目录

6．安装package.json配置文件

7．安装本地gulp

a) 本地安装gulp+package.json配置文件（初始化项目配置）+gulpfile.js文件

8．安装gulp插件

9．配置gulpfile.js（9,8可以反过来，可以js文件中需要什么插件再装什么插件）

10．Gulp实践流程：配置gulpfile.js文件命令，下载、调用gulp插件。  
　　  
**1．node环境安装：**  
Node官网下载node安装文件：[https://nodejs.org/en/][https_nodejs.org_en]  
安装方法：一直点下一步。。。。。  
**2．npm：**  
据说一般情况下，安装好nodejs后，npm就装好了。  
这时要看一下版本号就知道了:命令行输入——  
node -v  
npm -v  
node -v查看安装的nodejs版本，出现版本号，说明刚刚已正确安装nodejs。PS：未能出现版本号，请尝试注销电脑重试；  
npm -v查看npm的版本号，npm是在安装nodejs时一同安装的nodejs包管理器，  
最后出现版本号就是装上了。  
**3．cnpm**  
为什么要安装cnpm？据说npm的服务器在国外，如果我们在国内从npm上下载文件会反应慢，而且可能会异常报错。。装上这个东东就快了。。。

安装命令：

——全局安装：npm install -g cnpm --registry=https://registry.npm.taobao.org

定位到本地目录(你要放项目的目录）之后再安装局部镜像

——局部安装：npm install cnpm --registry=https://registry.npm.taobao.org

\*\*装好cnpm后，接下来你的命令中，都要写cnpm而不是npm了。

\*\*其实，镜像只要装到局部（本地目录）就好了，毕竟全局我们只装一个gulp，

但是在本地目录中却要装好多个用到的gulp插件，如果没有镜像，要等半天也是不开心的。  
**4．安装全局gulp**  
全局安装（全局安装gulp目的是执行gulp任务）

安装命令：cnpm install gulp -g

安装完毕后，看一下版本号有没有(命令行输入：gulp -v)，就知道有没有安装成功了

注意：没有装cnpm的，这里用npm，以后不再赘述  
　**5．定位目录，**  
定位目录：就是找到你要开始创建项目的位置，在这个位置再建一个gulp项目文件夹，以后就可以在这里开始工作了。

定位命令： cd+ 空格 + 目录路径  
**6．创建package.json文件——初始化项目配置**  
安装命令：cnpm init（或者npm init）

Package文件里的配置中：

项目名称name，

项目版本version，

项目描述description

以上这三个是必须填写的，其他的就一直回车就ok了。

有时候，name命名会报错，自己全英文命名就好了，尽量别用标点符号。

还有的warn情况是因为，你没写git仓库的地址，who care。。。

最后回车完了出现这句，后边就打Y就好。

扩展：npm install --production只下载dependencies节点的包  
**7．安装局部gulp**  
安装命令： 　　cnpm install gulp --save-dev（或者npm install gulp --save-dev）【哇！哇！注意空格哇！gulp和后边的横线是有空格的】

特别记得这个：–save-dev：这个就是装到局部的标志啊，以后在局部装插件也是少不了他的

在当前项目文件夹下安装gulp，只要你定位到那个目录下，就可以在那个目录下安装本地gulp了。

安装完了以后，在你安装的那个目录下边会发现一个node-modules文件夹，以后用到的gulp插件都会在这个里边了。

然后package.json文件里也有了“devDependencies”依赖项  
**8．配置gulpfile.js（9,8可以反过来，可以js文件中需要什么插件再装什么插件）**  
在本地项目根目录下新一个gulpfile.js文件，他是gulp项目的配置文件，不同于backage.json文件。

（疑问：gulpfile.js的位置，可以随着不同的项目新建不同的文件，然后分别放到不同项目的根目录下？答案：yes）

文件内配置信息如下代码：

var gulp = require(‘gulp’);  
**详解：**

var gulp = require(‘gulp’);//引入gulp组件，这一句是每一个gulpfile.js里边所必须有的，标配！！标配！！标配！！

var sass = require(‘gulp-sass’);//导入工具包require（node-modules）里的对应模块，以后你需要什么插件就对应执行这一句，不过要把变量名和括号里的插件名字改掉。

gulp.task(‘taskName’,function()\{ \});//定义一个task任务，名字为taskName：（这里是你自定义任务名称）、设置一个回调函数。

回调函数里边定义要处理的任务

任务呢就像火车一样，一环扣一环用点连接，最后一个才有分号结束。其实感觉和jq的一样，就是”链式调用”，在这里呢人家叫”流式操作”

其他gulp api的代码意思见后边<gulp api详解>

另外，需要哪个gulp插件的时可以去网上搜这个gulp插件，然后gulpfile.js里边的配置网上就有了。。  
**9．安装gulp插件**  
安装命令：cnpm install 替换插件名称 --save-dev（或者npm install 替换插件名称 --save-dev）

这里呢，你需要什么gulp插件就去命令行里装，以gulp-sass为例。

cnmp install gulp-sass --save-dev 或者npm install gulp-sass --save-dev

Gulp的插件很多，需要什么就去官网查：[http://gulpjs.com/plugins/][http_gulpjs.com_plugins]

这个大神的中文总结也不错：[http://www.ydcss.com/archives/category/构建工具][http_www.ydcss.com_archives_category]

常用的也就那么几个，见<常用gulp插件集锦>。  
**10．Gulp实践—使用gulpfile.js并调用gulp插件**  
调用gulp插件  
gulp 或者（ gulp taskName）

直接调用gulp或者输入gulp+任务名称

比如在上边的gulpfile.js里边，我想调用sass任务，就直接在命令行输入gulp sass

如果我想调用所有的，就输入 gulp，命令行会自动执行default任务，并按顺序执行’lint’, ‘sass’, 'scripts’任务

[https_nodejs.org_en]: https://nodejs.org/en/
[http_gulpjs.com_plugins]: http://gulpjs.com/plugins/
[http_www.ydcss.com_archives_category]: http://www.ydcss.com/archives/category/%E6%9E%84%E5%BB%BA%E5%B7%A5%E5%85%B7