疾速装置
来自官网提供的脚本,在当前目录下装置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?程序阐明:
- 定义一个函数sayHello,该函数内输入
Hello Gulp - 应用
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命令运行工作