gulp安装详解

折腾了好几天，终于把他安装好了，废话不说直接进主题

gulp安装

一、你需要准备什么

作用:修改本地文件后，浏览器能够立即同步，自动加载，自动刷新。

安装步骤:

我的node.js版本是v12.18.0 -x64

1、

 

 

2、执行 node -v 和 npm -v 分别查看node和npm的版本号

C:WindowsSystem32>node -v
v12.18.0

C:WindowsSystem32>npm -v
6.14.5

C:WindowsSystem32>

3、配置npm安装全局模块时的路径和缓存cache的路径

找到安装位置,配置自定义的全局模块安装目录

新建两个文件夹 node_global和node_cache

然后cmd下执行如下两个命令

C:WindowsSystem32>npm config set prefix "C:Program Files
odejs
ode_global"

C:WindowsSystem32>npm config set cache "C:Program Files
odejs
ode_cache"

然后配置环境变量

（1）新建系统变量 变量名:NODE_PATH,变量值添加:C:Program Files odejs ode_modules

(2)、将用户变量中的path里的C:UsersAdministratorAppDataRoaming pm变更为C:Program Files odejs ode_global

 (3)测试:在cmd命令下执行 npm install webpack -g 

 查看刚刚新建文件夹下的内容，可以看到自定义的两个文件夹已生效:

 

 以上是安装nodejs的全部内容

二、安装淘宝cnpm镜像

因为很多npm包都是国外的，所以安装起来很慢，这里我们可以利用淘宝的镜像服务器来进行安装后续的包，速度和成功率会高很多。

安装:

C:WindowsSystem32>npm install -g cnpm --registry=https://registry.npm.taobao.org
npm WARN deprecated request@2.88.2: request has been deprecated, see https://github.com/request/request/issues/3142
C:Program Files
odejs
ode_globalcnpm -> C:Program Files
odejs
ode_global
ode_modulescnpmincnpm
+ cnpm@6.1.1
added 685 packages from 957 contributors in 66.168s

从新打开cmd测试:cnpm -v  效果如下:

C:WindowsSystem32>cnpm -v
cnpm@6.1.1 (C:Program Files
odejs
ode_global
ode_modulescnpmlibparse_argv.js)
npm@6.14.5 (C:Program Files
odejs
ode_global
ode_modulescnpm
ode_modules
pmlibnpm.js)
node@12.18.0 (C:Program Files
odejsnode.exe)
npminstall@3.27.0 (C:Program Files
odejs
ode_global
ode_modulescnpm
ode_modules
pminstalllibindex.js)
prefix=C:Program Files
odejsnode_global
win32 x64 10.0.17763
registry=https://r.npm.taobao.org

三、全局安装gulp

cnpm install --global gulp

C:WindowsSystem32>cnpm install --global gulp
Downloading gulp to C:Program Files
odejs
ode_global
ode_modulesgulp_tmp
Copying C:Program Files
odejs
ode_global
ode_modulesgulp_tmp\_gulp@4.0.2@gulp to C:Program Files
odejs
ode_global
ode_modulesgulp
Installing gulp's dependencies to C:Program Files
odejs
ode_global
ode_modulesgulp/node_modules
fsevents@1.2.13 download from binary mirror: {"host":"https://cdn.npm.taobao.org/dist/fsevents"}
platform unsupported glob-watcher@5.0.3 › chokidar@2.1.8 › fsevents@^1.2.7 Package require os(darwin) not compatible with your platform(win32)
[fsevents@^1.2.7] optional install error: Package require os(darwin) not compatible with your platform(win32)
[1/4] vinyl-fs@^3.0.0 installed at node_modules\_vinyl-fs@3.0.3@vinyl-fs
[2/4] gulp-cli@^2.2.0 installed at node_modules\_gulp-cli@2.3.0@gulp-cli
[3/4] undertaker@^1.2.1 installed at node_modules\_undertaker@1.2.1@undertaker
[4/4] glob-watcher@^5.0.3 installed at node_modules\_glob-watcher@5.0.3@glob-watcher
deprecate glob-watcher@5.0.3 › chokidar@^2.0.0 Chokidar 2 will break on node v14+. Upgrade to chokidar 3 with 15x less dependencies.
All packages installed (287 packages installed from npm registry, used 9s(network 9s), speed 233.95kB/s, json 268(361.89kB), tarball 1.59MB)
[gulp@4.0.2] link C:Program Files
odejs
ode_globalgulp@ -> C:Program Files
odejs
ode_global
ode_modulesgulpingulp.js

下载cnpm成功，cnpm -v却不识别

四、项目的开发依赖安装

(1)如下是我 的文件结构 ，F:web01js_learnjQuery7GULP用来项目开发的空文件夹

 

(2)全局安装Gulp

C:WindowsSystem32>cnpm install gulp -g
Downloading gulp to C:Program Files odejs ode_global ode_modulesgulp_tmp
Copying C:Program Files odejs ode_global ode_modulesgulp_tmp\_gulp@4.0.2@gulp to C:Program Files odejs ode_global ode_modulesgulp
Installing gulp's dependencies to C:Program Files odejs ode_global ode_modulesgulp/node_modules
fsevents@1.2.13 download from binary mirror: {"host":"https://cdn.npm.taobao.org/dist/fsevents"}
platform unsupported glob-watcher@5.0.3 › chokidar@2.1.8 › fsevents@^1.2.7 Package require os(darwin) not compatible with your platform(win32)
[fsevents@^1.2.7] optional install error: Package require os(darwin) not compatible with your platform(win32)
[1/4] vinyl-fs@^3.0.0 installed at node_modules\_vinyl-fs@3.0.3@vinyl-fs
[2/4] glob-watcher@^5.0.3 installed at node_modules\_glob-watcher@5.0.3@glob-watcher
[3/4] gulp-cli@^2.2.0 installed at node_modules\_gulp-cli@2.3.0@gulp-cli
[4/4] undertaker@^1.2.1 installed at node_modules\_undertaker@1.2.1@undertaker
deprecate glob-watcher@5.0.3 › chokidar@^2.0.0 Chokidar 2 will break on node v14+. Upgrade to chokidar 3 with 15x less dependencies.
All packages installed (287 packages installed from npm registry, used 7s(network 7s), speed 306.37kB/s, json 268(359.63kB), tarball 1.59MB)
[gulp@4.0.2] link C:Program Files odejs ode_globalgulp@ -> C:Program Files odejs ode_global ode_modulesgulpingulp.js

查看是否安装成功:gulp -v

如下:

C:WindowsSystem32>gulp -v
CLI version: 2.3.0
Local version: Unknown

(3)新建package.json文件

进入F:web01js_learnjQuery7GULP文件夹执行cnpm init 一路无脑回车即可

F:web01js_learnjQuery7GULP>cnpm  init
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.

See `npm help init` for definitive documentation on these fields
and exactly what they do.

Use `npm install <pkg>` afterwards to install a package and
save it as a dependency in the package.json file.

Press ^C at any time to quit.
package name: (07gulp)
version: (1.0.0)
description:
git repository:
keywords:
author:
license: (ISC)

当发现F:web01js_learnjQuery7GULPt文件夹下生成package.json的文件时，代表执行成功

(4)本地安装Gulp

然后执行cnpm install gulp --save-dev 

F:web01js_learnjQuery7GULP>cnpm install gulp --save-dev
| [0/1] Installing map-cache@^0.2.2platform unsupported gulp@4.0.2 › glob-watcher@5.0.3 › chokidar@2.1.8 › fsevents@^1.2.7 Package require os(darwin) not compatible with your platform(win32)
/ [0/1] Installing map-cache@^0.2.2[fsevents@^1.2.7] optional install error: Package require os(darwin) not compatible with your platform(win32)
√ Installed 1 packages
√ Linked 268 latest versions
√ Run 0 scripts
deprecate gulp@4.0.2 › glob-watcher@5.0.3 › chokidar@^2.0.0 Chokidar 2 will break on node v14+. Upgrade to chokidar 3 with 15x less dependencies.
√ All packages installed (288 packages installed from npm registry, used 11s(network 11s), speed 187.21kB/s, json 269(367.71kB), tarball 1.59MB)

F:web01js_learnjQuery7GULP>gulp -v
CLI version: 2.3.0
Local version: 4.0.2

查看是否安装成功：项目文件中生成 node_modules 文件

如下:

 全局安装gulp是为了执行gulp任务，本地安装gulp则是为了调用gulp插件的功能 

(5)本地安装Gulp插件

  根据自己的情况而定:

 例子:安装cnpm install gulp-concat  --save-dev

F:web01js_learnjQuery7GULP>cnpm install gulp-concat  --save-dev
√ Installed 1 packages
√ Linked 0 latest versions
√ Run 0 scripts
√ All packages installed (used 176ms(network 172ms), speed 35.59kB/s, json 1(6.12kB), tarball 0B)

F:web01js_learnjQuery7GULP>cnpm install gulp-concat  --save-dev
√ Installed 1 packages
√ Linked 4 latest versions
√ Run 0 scripts
√ All packages installed (3 packages installed from npm registry, used 548ms(network 541ms), speed 23.89kB/s, json 5(12.92kB), tarball 0B)

 查看是否安装成功：查看package.json文件

(6)新建一个名为gulpfile.js的javascript文件，写入内容如下:

1. const gulp = require('gulp');
   gulp.task('defualt',function(done){
       console.log('default task 成功啦');
       done();
       
   })

   

最后执行glup 回车