Gulp环境搭建

快速安装

来自官网提供的脚本，在当前目录下安装gulp开发环境

//快速创建package.json
npm init -y

// 全局安装（必须）
npm install gulp-cli -g

// 开发依赖安装
npm install gulp -D

查看版本

gulp --version
CLI version: 2.3.0
Local version: 4.0.2

也可以通过package.json查看

{
  "name": "hello5",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo "Error: no test specified" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "gulp": "^4.0.2"
  }
}

查看帮助

gulp -help

Usage: gulp [options] tasks

Options:
  --help, -h              Show this help.                              [boolean]
  --version, -v           Print the global and local gulp versions.    [boolean]
  --require               Will require a module before running the gulpfile.
                          This is useful for transpilers but also has other
                          applications.                                 [string]
  --gulpfile, -f          Manually set path of gulpfile. Useful if you have
                          multiple gulpfiles. This will set the CWD to the
                          gulpfile directory as well.                   [string]
  --cwd                   Manually set the CWD. The search for the gulpfile, as
                          well as the relativity of all requires will be from
                          here.                                         [string]
  --verify                Will verify plugins referenced in project's
                          package.json against the plugins blacklist.
  --tasks, -T             Print the task dependency tree for the loaded
                          gulpfile.                                    [boolean]
  --tasks-simple          Print a plaintext list of tasks for the loaded
                          gulpfile.                                    [boolean]
  --tasks-json            Print the task dependency tree, in JSON format, for
                          the loaded gulpfile.
  --tasks-depth, --depth  Specify the depth of the task dependency tree.[number]
  --compact-tasks         Reduce the output of task dependency tree by printing
                          only top tasks and their child tasks.        [boolean]
  --sort-tasks            Will sort top tasks of task dependency tree. [boolean]
  --color                 Will force gulp and gulp plugins to display colors,
                          even when no color support is detected.      [boolean]
  --no-color              Will force gulp and gulp plugins to not display
                          colors, even when color support is detected. [boolean]
  --silent, -S            Suppress all gulp logging.                   [boolean]
  --continue              Continue execution of tasks upon failure.    [boolean]
  --series                Run tasks given on the CLI in series (the default is
                          parallel).                                   [boolean]
  --log-level, -L         Set the loglevel. -L for least verbose and -LLLL for
                          most verbose. -LLL is default.                 [count]

编写第一个gulp程序

当前目录下没有创建gulpfile.js，不能执行gulpfile.js

> gulp
[16:30:57] No gulpfile found

在当前目录下，创建gulpfile.js，但目录结构如下

|-package.json
|-gulpfile.js

在gulpfile.js文件中编写Hello World 程序

function sayHello() {
    console.log('Hello Gulp~');
}

exports.default = sayHello;

执行命令，测试是否生效

> gulp
[16:47:53] Using gulpfile D:DEVPROJECTSfrontendgulphello5gulpfile.js
[16:47:53] Starting 'default'...
Hello Gulp~
[16:47:53] The following tasks did not complete: default
[16:47:53] Did you forget to signal async completion?

程序说明：

1. 定义一个函数sayHello，该函数内输出Hello Gulp
2. 使用exports.default来指定函数sayHello作为gulp的默认任务执行，在gulp命名后不指定任务名称时，运行默认任务

不定义默认任务时，直接运行gulp，就会提示：Task never defined: default

代码清单：

将exports.default改成exports.hello

function sayHello() {
    console.log('Hello Gulp~');
}

exports.hello = sayHello;

直接运行gulp，提示如下

D:DEVPROJECTSfrontendgulphello5>gulp
[16:29:04] Using gulpfile D:DEVPROJECTSfrontendgulphello5gulpfile.js
[16:29:05] Task never defined: default

需要在gulp后加上任务名称，加上任务的名称（hello）

D:DEVPROJECTSfrontendgulphello5>gulp hello
[16:39:18] Using gulpfile D:DEVPROJECTSfrontendgulphello5gulpfile.js
[16:39:18] Starting 'hello'...
Hello Gulp~

总结

主要介绍了gulp开发环境的安装步骤，通过编写第一个gulp程序来了解gulp是如何运行

• 安装gulp全局环境和开发环境
• 编写gulpfile.js脚本程序
• 使用gulp命令运行任务