前端gulp的安装和使用，你或许用得到

原创已于 2023-06-02 22:50:00 修改

· 1.4w 阅读

1 ·

版权

文章标签：

#前端 #gulp #javascript

于 2023-06-02 22:20:06 首次发布

JavaScript 专栏收录该内容

47 篇文章

订阅专栏

文章详细介绍了如何安装和使用gulp，包括全局安装gulp-cli，创建项目，安装gulp为开发依赖，编写gulpfile.js配置文件，实现文件复制和压缩的功能。示例中展示了如何使用gulp-uglify进行JS文件压缩。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

gulp安装

1.npm install --global gulp-cli全局安装（只需要执行成功一次，之后就不需要再全局安装了）

在这里插入图片描述

2.npx mkdirp my-project创建项目并进入

3.cd my-project进入目录

在这里插入图片描述

4.npm init在项目目录下创建 package.json 文件

5.npm install --save-dev gulp 安装 gulp，作为开发时依赖项

在这里插入图片描述

6.gulp --version查看安装的gulp版本

在这里插入图片描述

7.根目录创建gulpfile.js文件配置文件

在这里插入图片描述

8.gulp --tasks 项目根目录执行gulp命令，测试gulp是否正常

在这里插入图片描述

gulp示例功能：（文件复制）

步骤

1.在根目录创建src目录，目录中新建几个.js文件，文件的内容随意
2.将示例代码拷贝到gulpfile.js文件中
3.执行gulp copy后成功的将js文件拷贝到了output新目录中

代码

gulpfile.js

const { src, dest } = require('gulp');

function copy() {
  return src('src/*.js')//获取src中所有的js文件
    .pipe(dest('output/'));//输出到output目录中
}
exports.copy = copy;//exports.copy中的copy是自己定义的任务名

效果截图

在这里插入图片描述

gulp示例功能：（文件压缩）

步骤

本示例中用到了gulp-uglify插件，需要先安装一下
cnpm install --save-dev gulp-uglify

1.在根目录创建src目录，目录中新建几个.js文件，文件的内容随意
2.将示例代码拷贝到gulpfile.js文件中
3.执行gulp copy后，成功将js文件压缩并生成到output新目录中

代码

index.js（文件内容自定义）

function getName1(){
    var name = 'name1'
    return name
}

gulpfile.js

const { src, dest } = require('gulp');
const uglify = require('gulp-uglify');

function copy() {
  return src('src/*.js')
    .pipe(uglify())//混淆压缩文件
    .pipe(dest('output/'));
}

exports.copy = copy;