折騰了好幾天，終於把他安裝好了，廢話不說直接進主題
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 回車
