Gulp Quick Start

[yaoningvital]

Gulp Quick Start

Check for node, npm, and npx

node --version

npm --version

npx --version

Install the gulp command line utility

npm install --global gulp-cli

Create a project directory and navigate into it

npx mkdirp my-project

cd my-project 

Create a package.json file in your project directory

npm init

This will guide you through giving your project a name, version, description, etc.

Install the gulp package in your devDependencies

npm install -save-dev gulp

Verify your gulp versions

gulp --version

Create a gulpfile

Using your text editor, create a file named gulpfile.js in your project root with these contents:

function defaultTask (cb) {
  // place code for your default task here
  cb();
}

exports.default = defaultTask;

Test it

Run the gulp command in your project directory:

gulp

To run multiple tasks, you can use gulp

Result

The default task will run and do nothing.

当执行 gulp 命令时，默认执行的是项目根目录下的 gulpfile.js 这个文件，而且它会调用 gulpfile.js 这个模块的 exports 属性上的 default 属性，这里 default 上挂载的是一个叫做defaultTask 的方法，所以会执行这个 defaultTask 方法。

如果修改 gulpfile.js 这个文件的内容如下：

function defaultTask (cb) {
  // place code for your default task here
  console.log(111)
  cb();
}

exports.default = defaultTask;

再执行 gulp 命令，可以看到输出如下：