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

news2024/11/20 8:43:23

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;