疾速装置

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

//疾速创立package.jsonnpm init -y// 全局装置(必须)npm install gulp-cli -g// 开发依赖装置npm install gulp -D

查看版本

gulp --versionCLI version: 2.3.0Local 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 -helpUsage: gulp [options] tasksOptions:  --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命令运行工作