关于javascript: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 命令运行工作