gulp入门

简介

来自官网的介绍:

  1. 自动化 - gulp 是一个工具集,它帮助你自动化处理那些在开发工作中遇到的繁琐的、耗时的任务。
  2. 多平台 - gulp 可以在主流的 IDE 中编译,使用它还可以处理 PHP,.NET,Node.js,Java等等。
  3. 强大生态 - 使用 npm 模块来处理你想做的事,里面有超过2000的用于流文件转换的插件。
  4. 简单 - 只提供最小 API,gulp 可以很容易的学习并简单使用。

本文介绍的 gulp4 的入门级使用方法

安装

1. 卸载
如果之前全局安装过 gulp 工具,可以使用如下命令卸载

npm rm --global gulp

2. 准备工作

检查 node npm npx 的版本,如果没有安装,则使用命令 npm install -g [node|npm|npx] 来安装

# shanpengfei @ spf in ~ [16:42:23]
$ node --version
v10.7.0

# shanpengfei @ spf in ~ [16:42:31]
$ npm --version
6.10.0

# shanpengfei @ spf in ~ [16:42:37]
$ npx --version
10.2.0

3. 安装

npm install --global gulp

4. 创建项目

# shanpengfei @ spf in ~/work/node.js/gulp [16:55:22]
$ npx mkdirp first-gulp
npx: 2 安装成功,用时 2.832 秒

# shanpengfei @ spf in ~/work/node.js/gulp [16:55:51]
$ cd first-gulp

# shanpengfei @ spf in ~/work/node.js/gulp/first-gulp [16:56:19]
$ npm init

5. 安装依赖

npm install --save-dev gulp

6. 查看版本

# shanpengfei @ spf in ~/work/node.js/gulp/first-gulp [16:58:22]
$ gulp -v
CLI version: 2.2.0
Local version: 4.0.2

7. 创建 gulpfile.js

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

exports.default = defaultTask

8. 运行

# shanpengfei @ spf in ~/work/node.js/gulp/first-gulp [16:58:27]
$ gulp
[17:02:27] Using gulpfile ~/work/node.js/gulp/first-gulp/gulpfile.js
[17:02:27] Starting 'default'...
[17:02:27] Finished 'default' after 2.94 ms

结果是默认的任务运行,但是什么事也不做。

上一篇:gulp 构建 es6项目


下一篇:使用Gulp和Browserify来搭建React应用程序