gulp安装详解
折腾了好几天，终于把他安装好了，废话不说直接进主题
gulp安装
一、你需要准备什么
作用:修改本地文件后，浏览器能够立即同步，自动加载，自动刷新。
安装步骤:
我的node.js版本是v12.18.0 -x64
1、
2、执行 node -v 和 npm -v 分别查看node和npm的版本号
1 C:\Windows\System32>node -v 2 v12.18.0 3 4 C:\Windows\System32>npm -v 5 6.14.5 6 7 C:\Windows\System32>
3、配置npm安装全局模块时的路径和缓存cache的路径
找到安装位置,配置自定义的全局模块安装目录
新建两个文件夹 node_global和node_cache
然后cmd下执行如下两个命令
C:\Windows\System32>npm config set prefix "C:\Program Files\nodejs\node_global" C:\Windows\System32>npm config set cache "C:\Program Files\nodejs\node_cache"
然后配置环境变量
（1）新建系统变量 变量名:NODE_PATH,变量值添加:C:\Program Files\nodejs\node_modules
(2)、将用户变量中的path里的C:\Users\Administrator\AppData\Roaming\npm变更为C:\Program Files\nodejs\node_global
(3)测试:在cmd命令下执行 npm install webpack -g
查看刚刚新建文件夹下的内容，可以看到自定义的两个文件夹已生效:
以上是安装nodejs的全部内容
二、安装淘宝cnpm镜像
因为很多npm包都是国外的，所以安装起来很慢，这里我们可以利用淘宝的镜像服务器来进行安装后续的包，速度和成功率会高很多。
安装:
C:\Windows\System32>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\nodejs\node_global\cnpm -> C:\Program Files\nodejs\node_global\node_modules\cnpm\bin\cnpm + cnpm@6.1.1 added 685 packages from 957 contributors in 66.168s
从新打开cmd测试:cnpm -v 效果如下:
C:\Windows\System32>cnpm -v cnpm@6.1.1 (C:\Program Files\nodejs\node_global\node_modules\cnpm\lib\parse_argv.js) npm@6.14.5 (C:\Program Files\nodejs\node_global\node_modules\cnpm\node_modules\npm\lib\npm.js) node@12.18.0 (C:\Program Files\nodejs\node.exe) npminstall@3.27.0 (C:\Program Files\nodejs\node_global\node_modules\cnpm\node_modules\npminstall\lib\index.js) prefix=C:\Program Files\nodejs\node_global win32 x64 10.0.17763 registry=https://r.npm.taobao.org
三、全局安装gulp
cnpm install --global gulp
C:\Windows\System32>cnpm install --global gulp Downloading gulp to C:\Program Files\nodejs\node_global\node_modules\gulp_tmp Copying C:\Program Files\nodejs\node_global\node_modules\gulp_tmp\_gulp@4.0.2@gulp to C:\Program Files\nodejs\node_global\node_modules\gulp Installing gulp's dependencies to C:\Program Files\nodejs\node_global\node_modules\gulp/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\nodejs\node_global\gulp@ -> C:\Program Files\nodejs\node_global\node_modules\gulp\bin\gulp.js
下载cnpm成功，cnpm -v却不识别
四、项目的开发依赖安装
(1)如下是我 的文件结构 ，F:\web\001js_learn\jQuery\07GULP用来项目开发的空文件夹
(2)全局安装Gulp
C:\Windows\System32>cnpm install gulp -g
Downloading gulp to C:\Program Files\nodejs\node_global\node_modules\gulp_tmp
Copying C:\Program Files\nodejs\node_global\node_modules\gulp_tmp\_gulp@4.0.2@gulp to C:\Program Files\nodejs\node_global\node_modules\gulp
Installing gulp's dependencies to C:\Program Files\nodejs\node_global\node_modules\gulp/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\nodejs\node_global\gulp@ -> C:\Program Files\nodejs\node_global\node_modules\gulp\bin\gulp.js
查看是否安装成功:gulp -v
如下:
C:\Windows\System32>gulp -v
CLI version: 2.3.0
Local version: Unknown
(3)新建package.json文件
进入F:\web\001js_learn\jQuery\07GULP文件夹执行cnpm init 一路无脑回车即可
F:\web\001js_learn\jQuery\07GULP>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:\web\001js_learn\jQuery\07GULPt文件夹下生成package.json的文件时，代表执行成功
(4)本地安装Gulp
然后执行cnpm install gulp --save-dev
F:\web\001js_learn\jQuery\07GULP>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:\web\001js_learn\jQuery\07GULP>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:\web\001js_learn\jQuery\07GULP>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:\web\001js_learn\jQuery\07GULP>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文件，写入内容如下:
-
const gulp = require('gulp');
gulp.task('defualt',function(done){ console.log('default task 成功啦'); done(); })
最后执行glup 回车
