gulp入门

Posted 2021-04-08 单鹏飞

简介

来自官网的介绍：

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
 
   
   
 

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