如何使用gulp压缩JS和CSS文件呢？？？简单几步保证让你学会！！！

使用gulp压缩JS和CSS文件

第一步：

cnpm i gulp-cssmin -D

第二步：
书写gulpfile.js文件：
代码如下：

const gulp = require('gulp');
const cssmin = require('gulp-cssmin'); // 用来压缩CSS
const uglify = require('gulp-uglify'); // 用来压缩JS
const concat = require('gulp-concat');
const rename = require('gulp-rename');
const babel = require('gulp-babel');
const sourcemaps = require('gulp-sourcemaps');

// 用来压缩js文件，注意前面的参数的名字是自己随便取的
gulp.task('js', () => {
  return gulp
    .src(['./src/js/**/*.js'])
    //.pipe(concat('bundle.min.js'))
    .pipe(sourcemaps.init())
    .pipe(babel({
      presets: ['@babel/env']
    }))
    .pipe(uglify())
    .pipe(sourcemaps.write())

    .pipe(rename({
      suffix: '.min'
    }))
    .pipe(gulp.dest('./build/js'));
});

// 用来压缩css文件
gulp.task('style', () => {
  return gulp
    .src(['./src/css/**/*.css'])
    .pipe(concat('style.min.css')) // 注意这里压缩css是有顺序的，必须先concat在一起，然后使用cssmin()进行压缩。
    .pipe(cssmin())
    .pipe(gulp.dest('./build/css/'));
});

gulp.task('default', ['js', 'style']);
// 上面是书写多个任务，然后在这里决定默认执行哪些任务
// 这里上面写了两个任务，所以两个任务都会执行。

第三步：
在命令行中输入 gulp 即可！！！

效果如下：
经过gulp压缩之后，

变成了下面的样子 ！！！

废话不多说！！！赶紧动手自己操作一下吧 ！！！

如果这篇文章能够帮助到您，希望您不要吝惜点赞👍👍和收藏💖💖，您的支持是我继续努力的动力 💪💪！！！