【前端开发】在windows 10上安装gulp（详细讲解）

文章目录

一、Node.js
- 1.安装node.js
- - (1)下载nodejs（官方免费）
  - - Ⅰ.说明
    - Ⅱ.详细安装步骤
  - (2)将node.js添加到环境变量(安装nodejs时已添加，只为后文添加环境变量使用)
  - - Ⅰ.环境变量路径
    - Ⅱ.添加环境变量
  - (3)运行DOS窗口
  - - Ⅰ.概念
    - Ⅱ.打开命令行
    - Ⅲ.常用dos命令（cmd和powershell通用）
    - Ⅳ.输入命令
- 2.新建文件夹
- 3.使用npm（仅为介绍cnpm的使用做铺垫）
- 4.安装cnpm（代替npm，因npm在国内使用不稳定）
- - （1）说明
  - （2）安装cnpm
  - - Ⅰ.说明
    - Ⅱ.以管理员身份运行DOS窗口
    - Ⅲ.输入命令
二、Gulp
- 1.全局安装gulp
- - (1)说明
  - (2)打开命令行并输入命令
- 2.本地安装gulp及其插件
- - (1)本地新建项目文件夹gulptest
  - (2)本地新建配置文件package.json
  - - Ⅰ.说明
    - Ⅱ.打开命令行并输入命令
  - (3)本地安装gulp
  - - Ⅰ.打开命令行并输入命令（必须先进入到gulptest文件夹）
    - Ⅱ.查看gulptest文件夹
  - (4)本地安装常用gulp插件
  - - Ⅰ.打开命令行并输入命令（必须先进入到gulptest文件夹）
    - Ⅱ.查看gulptest文件夹下package.json文件内容变化
  - (5)本地运行gulp
  - - Ⅰ.新建gulpfile.js文件
    - Ⅱ.新建文件夹src和dist
    - Ⅲ.本地运行gulp任务
    - Ⅳ.gulptest文件夹展示
三、说明
- 1.package.json文件和gulpfile.js文件
- 2.将gulptest文件夹移动到其他位置运行gulp需做工作
- 3.其他位置新建项目

一、Node.js

1.安装node.js

(1)下载nodejs（官方免费）

Ⅰ.说明

网址：官网https://nodejs.org/en/；中文网https://nodejs.org/zh-cn/

安装目录：D:\kinggsoft\node（建议大家专门分盘出来用于安装软件用）

Ⅱ.详细安装步骤

第1步：进入官网，下载Windows(x64）的稳定版node.js

第2步：下载完成后，双击右键进行安装

第3步：进入安装向导（指引你如何安装）

第4步：接受node.js协议

第5步：选择安装路径

第6步：安装内容展示

第7步：可选原生模块工具

第8步：配置完毕，开始安装

第9步：安装完成

(2)将node.js添加到环境变量(安装nodejs时已添加，只为后文添加环境变量使用)

Ⅰ.环境变量路径

C:\Users\Administrator\AppData\Roaming\npm

Ⅱ.添加环境变量

第1步：win+R

第2步：打开系统属性对话框

第3步：打开环境变量对话框

第4步：环境变量对话框

第5步：新建用户变量（path变量）

第6步：编辑环境变量

(3)运行DOS窗口

Ⅰ.概念

DOS窗口：命令行/命令行窗口/命令提示符/CMD窗口/Shell/终端/Terminal（以上说法都一样）

Ⅱ.打开命令行

win+R->输入cmd或powershell(此处及下文均以powershell为例)

Ⅲ.常用dos命令（cmd和powershell通用）

x: 切换盘符（x表示盘符）

dir 查看当前目录下的所有文件（夹）

cd 进入到指定目录（cd与后面的符号有一个空格，后文的命令也应考虑到这点）

cd . 表当前目录

cd … 表返回到上一级目录

cd …\… 表返回到上一级目录的上一级目录

cd \ 表返回到当前文件夹的根目录

cls 清除屏幕

Esc键清除命令

Table键自动补全命令，可连续按

Ⅳ.输入命令

node –v （查看版本号）

PS C:\Users\Administrator> node -v

v14.17.4

npm（查看是否安装成功）

PS C:\Users\Administrator> npm

Usage: npm

where is one of:
access, adduser, audit, bin, bugs, c, cache, ci, cit,
clean-install, clean-install-test, completion, config,
create, ddp, dedupe, deprecate, dist-tag, docs, doctor,
edit, explore, fund, get, help, help-search, hook, i, init,
install, install-ci-test, install-test, it, link, list, ln,
login, logout, ls, org, outdated, owner, pack, ping, prefix,
profile, prune, publish, rb, rebuild, repo, restart, root,
run, run-script, s, se, search, set, shrinkwrap, star,
stars, start, stop, t, team, test, token, tst, un,
uninstall, unpublish, unstar, up, update, v, version, view,
whoami

npm -h quick help on
npm -l display full usage info
npm help search for help on
npm help npm involved overview

Specify configs in the ini-formatted file:
C:\Users\Administrator.npmrc
or on the command line via: npm --key value
Config info can be viewed via: npm help config

npm@6.14.14 D:\kinggsoft\node\node_modules\npm 安装成功

2.新建文件夹

配置npm的全局模块的存放路径和cache路径，即新建2个文件夹，新建文件夹后的路径见下方：

（1）D:\kinggsoft\node\node_cache
（2）D:\kinggsoft\node\node_global
将此路径（文件夹路径）添加到环境变量（同前），因cnpm（见下文）会被安装到D:\kinggsoft\node\node_global下

3.使用npm（仅为介绍cnpm的使用做铺垫）

在DOS窗口中输入以下命令

（1）使用npm安装插件：npm install <name> -g --save-dev

Ⅰ.<name>——node插件名称

Ⅱ.-g——全局安装

全局安装：可通过命令行在任何地方调用它

非全局安装：安装在当前定位目录的node_modules文件夹下，通过require()调用（后文将会讲述）

Ⅲ.–save——将配置信息保存至package.json文件中（package.json是nodejs项目配置文件，后文有更详细讲述）

Ⅳ.-dev——保存至package.json的devDependencies节点，不指定-dev将保存至dependencies节点

（2）查看当前目录已安装插件：npm list

4.安装cnpm（代替npm，因npm在国内使用不稳定）

（1）说明

--cnpm是一个完整 npmjs.org 镜像，可用此代替官方版本(只读)

--cnpm跟npm用法完全一致，只需在执行命令时将npm改为cnpm即可

（2）安装cnpm

Ⅰ.说明

--安装cnpm时必须以管理员身份运行DOS窗口（不同于前面提到的普通DOS窗口），后文及前文提到的所有DOS窗口都无此要求

Ⅱ.以管理员身份运行DOS窗口

--win->输入powershll或cmd->点击[以管理员身份运行]

PS C:\WINDOWS\system32>

C:\WINDOWS\system32>

Ⅲ.输入命令

npm install -g cnpm --registry=https://registry.npm.taobao.org（安装cnpm）

PS C:\WINDOWS\system32> npm install -g cnpm --registry=https://registry.npm.taobao.org

npm WARN deprecated har-validator@5.1.5: this library is no longer supported
D:\kinggsoft\node\node_global\cnpm -> D:\kinggsoft\node\node_global\node_modules\cnpm\bin\cnpm

cnpm@7.0.0 安装成功
added 709 packages from 969 contributors in 52.971s

cnpm -v（检测是否正常）

PS C:\WINDOWS\system32>cnpm -v

cnpm@7.0.0 (D:\kinggsoft\node\node_global\node_modules\cnpm\lib\parse_argv.js)
npm@6.14.14 (D:\kinggsoft\node\node_global\node_modules\cnpm\node_modules\npm\lib\npm.js)
node@14.17.4 (D:\kinggsoft\node\node.exe)
npminstall@5.0.2 (D:\kinggsoft\node\node_global\node_modules\cnpm\node_modules\npminstall\lib\index.js)
prefix=D:\kinggsoft\node\node_global cnpm被安装到node_global文件夹下
win32 x64 10.0.19042
registry=https://registry.nlark.com

二、Gulp

1.全局安装gulp

(1)说明

--全局安装gulp是为了执行gulp任务

--本地安装gulp是为了调用gulp插件(后文要用到)

(2)打开命令行并输入命令

cnpm install gulp -g（全局安装gulp）

PS C:\Users\Administrator> cnpm install gulp -g

Downloading gulp to D:\kinggsoft\node\node_global\node_modules\gulp_tmp
Error: EPERM: operation not permitted, mkdir ‘D:\kinggsoft\node\node_global\node_modules\gulp_tmp’
npminstall version: 5.0.2
npminstall args: D:\kinggsoft\node\node.exe D:\kinggsoft\node\node_global\node_modules\cnpm\node_modules\npminstall\bin\install.js --fix-bug-versions --china --userconfig=C:\Users\Administrator.cnpmrc --disturl=https://npm.taobao.org/mirrors/node --registry=https://registry.nlark.com gulp -g

gulp -v（查看是否正确安装）

PS C:\Users\Administrator> gulp -v

CLI version: 2.3.0 安装正确
Local version: Unknown

2.本地安装gulp及其插件

(1)本地新建项目文件夹gulptest

--文件夹名称任意，但最好用英文名称，因为用英文命名文件或文件夹的好习惯能帮你省去很多麻烦（程序运行时出错）！

--可在你电脑的任意位置新建文件夹来存放本地gulp

F:\Xmind Notes\gulptest

(2)本地新建配置文件package.json

Ⅰ.说明

--package.json是基于nodejs项目必不可少的配置文件，它是存放在项目根目录的普通json文件（因而不能添加任何注释）

--package.json应放置于项目目录中，即gulptest文件夹下

Ⅱ.打开命令行并输入命令

cnpm init（自动创建package.json文件）

PS C:\Users\Administrator> 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: (administrator) 按Enter键，下同，直到命令执行结束
version: (1.0.0)
description:
entry point: (index.js)
test command:
git repository:
keywords:
author:
license: (ISC)
About to write to C:\Users\Administrator\package.json:

{
“name”: “administrator”,
“version”: “1.0.0”,
“description”: “”,
“main”: “index.js”,
“scripts”: {
“test”: “echo “Error: no test specified” && exit 1”
},
“author”: “”,
“license”: “ISC”
}

Is this OK? (yes)

package.json文件中的内容

{
“name”: “administrator”,
“version”: “1.0.0”,
“description”: “”,
“main”: “index.js”,
“scripts”: {
“test”: “echo “Error: no test specified” && exit 1”
},
“author”: “”,
“license”: “ISC”
}

cnpm help package.json（查看package.json帮助文档）

PS C:\Users\Administrator> cnpm help package.json

键入命令后在浏览器中弹出下方路径的窗口

file:///D:/kinggsoft/node/node_global/node_modules/cnpm/node_modules/npm/docs/public/configuring-npm/package-json/index.html

(3)本地安装gulp

Ⅰ.打开命令行并输入命令（必须先进入到gulptest文件夹）

cnpm install gulp --save-dev

PS F:\Xmind Notes\gulptest> cnpm install gulp --save-dev

\ [0/1] Installing readable-stream@^2.3.6platform unsupported gulp@4.0.2 › glob-watcher@5.0.5 › chokidar@2.1.8 › fsevents@^1.2.7 Package require os(darwin) not compatible with your platform(win32)
| [0/1] Installing once@^{1.3.1[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.5 › chokidar@^2.0.0 Chokidar 2 will break on node v14+. Upgrade to chokidar 3 with 15x less dependencies.
deprecate gulp@4.0.2 › glob-watcher@5.0.5 › chokidar@2.1.8 › fsevents@^1.2.7 fsevents 1 will break on node v14+ and could be using insecure binaries. Upgrade to fsevents 2.
deprecate gulp@4.0.2 › glob-watcher@5.0.5 › anymatch@2.0.0 › micromatch@3.1.10 › snapdragon@0.8.2 › source-map-resolve@0.5.3 › resolve-url@^0.2.1 https://github.com/lydell/resolve-url#deprecated
deprecate gulp@4.0.2 › glob-watcher@5.0.5 › anymatch@2.0.0 › micromatch@3.1.10 › snapdragon@0.8.2 › source-map-resolve@0.5.3 › urix@^0.1.0 Please see https://github.com/lydell/urix#deprecated
Recently updated (since 2021-08-08): 1 packages (detail see file F:\Xmind Notes\gulptest\node_modules.recently_updates.txt)
√ All packages installed (266 packages installed from npm registry, used 14s(network 14s), speed 126.52KB/s, json 268(381.1KB), tarball 1.32MB)

Ⅱ.查看gulptest文件夹

--gulptest文件夹下新增node_modules文件夹

--package.json文件中的内容发生改变，新增两项内容：dependencies和devDependencies

package.json文件中的内容

{
“name”: “gulptest”,
“version”: “1.0.0”,
“description”: “”,
“main”: “gulpfile-copy.js”,
“dependencies”: {},
“devDependencies”: {
“gulp”: “^4.0.2”,
},
“scripts”: {
“test”: “echo “Error: no test specified” && exit 1”
},
“author”: “”,
“license”: “ISC”
}

(4)本地安装常用gulp插件

Ⅰ.打开命令行并输入命令（必须先进入到gulptest文件夹）

cnpm install gulp-less --save-dev

cnpm install gulp-uglify --save-dev

cnpm install gulp-cssmin --save-dev

cnpm install gulp-rename --save-dev

cnpm install gulp-autoprefixer --save-dev

PS F:\Xmind Notes\gulptest> cnpm install gulp-less --save-dev

PS F:\Xmind Notes\gulptest> cnpm install gulp-uglify --save-dev

PS F:\Xmind Notes\gulptest> cnpm install gulp-cssmin --save-dev

PS F:\Xmind Notes\gulptest> cnpm install gulp-rename --save-dev

PS F:\Xmind Notes\gulptest> cnpm install gulp-autoprefixer --save-dev

Ⅱ.查看gulptest文件夹下package.json文件内容变化

按照字母顺序，自动插入到相应位置进行添加

{
“name”: “gulptest”,
“version”: “1.0.0”,
“description”: “”,
“main”: “gulpfile-copy.js”,
“dependencies”: {},
“devDependencies”: {
“gulp”: “^4.0.2”,
“gulp-autoprefixer”: “^8.0.0”, 自动添加css3前缀
“gulp-cssmin”: “^0.2.0”, 压缩css代码
“gulp-less”: “^5.0.0”, less编译
“gulp-rename”: “^2.0.0”, 文件改名
“gulp-uglify”: “^3.0.2” 压缩js代码
},
“scripts”: {
“test”: “echo “Error: no test specified” && exit 1”
},
“author”: “”,
“license”: “ISC”
}

(5)本地运行gulp

Ⅰ.新建gulpfile.js文件

--gulpfile.js是gulp项目的配置文件，它是位于项目根目录的普通js文件

--gulpfile.js应放置于项目目录中，即gulptest文件夹下

gulpfile.js文件内容

var gulp = require(‘gulp’); 使用require调用插件
less = require(‘gulp-less’);
uglify = require(‘gulp-uglify’);
cssmin = require(‘gulp-cssmin’);
rename = require(‘gulp-rename’);
autoprefixer = require(‘gulp-autoprefixer’);

//打印“hello world!”语句

gulp.task(‘info’,function(){
console.log(“hello world!”);
});

//将src/css文件夹中的.less文件打包压缩到dist/css文件夹中，并改名成.min.css形式

gulp.task(‘less’, function () {
gulp.src(‘src/css/*.less’) 需在gulptest文件夹下新建src文件夹，并在src文件夹下新建css文件夹
.pipe(less())
.pipe(autoprefixer())
.pipe(rename({suffix: ‘.min’}))
.pipe(gulp.dest(‘dist/css’)); 需在gulptest文件夹下新建dist文件夹，并在dist文件夹下新建css文件夹
});

//默认执行，将src/css文件夹中的.css文件打包压缩到dist/css文件夹中，并改名成.min.css形式

gulp.task(‘default’, function () {
gulp.src(‘src/css/*.css’)
.pipe(cssmin())
.pipe(rename({suffix: ‘.min’}))
.pipe(gulp.dest(‘dist/css’));
});

//src目录称为开发目录，dist目录称为输出目录即上线目录

Ⅱ.新建文件夹src和dist

--文件夹和目录为同一概念

--src目录和dist目录应放置于项目目录中，即gulptest文件夹下

--src目录称为开发目录，dist目录称为输出目录即上线目录

--src目录和dist目录下都还可以新建css目录和js目录等目录来完成相应文件的存放

Ⅲ.本地运行gulp任务

gulp info

gulp less

gulp

gulp default

PS F:\Xmind Notes\gulptest> gulp info

[18:35:28] Using gulpfile F:\Xmind Notes\gulptest\gulpfile.js
[18:35:28] Starting ‘info’…
hello world!
[18:35:28] The following tasks did not complete: info
[18:35:28] Did you forget to signal async completion?

PS F:\Xmind Notes\gulptest> gulp less

[18:48:06] Using gulpfile F:\Xmind Notes\gulptest\gulpfile.js
[18:48:06] Starting ‘less’…
[18:48:06] The following tasks did not complete: less
[18:48:06] Did you forget to signal async completion?

PS F:\Xmind Notes\gulptest> gulp 效果同gulp default

[19:00:02] Using gulpfile F:\Xmind Notes\gulptest\gulpfile.js
[19:00:02] Starting ‘default’…
[19:00:02] The following tasks did not complete: default
[19:00:02] Did you forget to signal async completion?

PS F:\Xmind Notes\gulptest> gulp default 效果同gulp

[19:03:57] Using gulpfile F:\Xmind Notes\gulptest\gulpfile.js
[19:03:57] Starting ‘default’…
[19:03:57] The following tasks did not complete: default
[19:03:58] Did you forget to signal async completion?

Ⅳ.gulptest文件夹展示

本地运行gulp前gulptest文件夹

本地运行gulp后gulptest文件夹

三、说明

1.package.json文件和gulpfile.js文件

（1）package.json文件

--package.json是基于***nodejs项目***必不可少的配置文件，它是存放在***项目根目录***的普通***json文件***（因而不能添加任何注释）

--package.json应放置于项目目录中，即gulptest文件夹下

（2）gulpfile.js文件

--gulpfile.js是***gulp项目***的配置文件，它是位于***项目根目录***的普通***js文件***

--gulpfile.js应放置于项目目录中，即gulptest文件夹下

2.将gulptest文件夹移动到其他位置运行gulp需做工作

方法1

第1步：删除gulptest文件夹中的node_modules文件夹，保留其他文件及文件夹

第2步：重新完成“2.本地安装gulp及其插件”，已有的文件及文件夹不必重建，即只需完成以下6个命令即可

cnpm install gulp --save-dev

cnpm install gulp-less --save-de

cnpm install gulp-uglify --save-dev

cnpm install gulp-cssmin --save-dev

cnpm install gulp-rename --save-dev

cnpm install gulp-autoprefixer --save-dev

注意：一定要进入gulptest文件夹目录中再执行命令！

方法2

重新重新完成“2.本地安装gulp及其插件”中的5步即可

3.其他位置新建项目

只需重新完成“2.本地安装gulp及其插件”中的5步即可

能力有限，若有错误，请大家批评指正！