简单记下gulp的使用

1 开始使用gulp

npm install  gulp-cli -g
npm init //工程目录下初始化工程
npm install  gulp -D //工程目录下

2 各个插件

gulp-uglify 压缩代码

gulp-concat 合并代码到一个文件

gulp-rename  给文件重命名，可以添加前缀 后缀名

const gulp = require('gulp');
const rename = require('gulp-rename');
const concat = require('gulp-concat);
const uglify = require('gulp-uglify');

gulp.task('js',() => {
    return gulp.src('./src/**/*.js') // 拼接路径的时候，*/ 表示一层目录  **/ 表示所有层级
           .pipe(concat('bundle.min.js'))
            .pipe(rename({
                prefix: "前缀-",
                suffix:'.后缀',
                extname:'.扩展名'
             }))
             .pipe(uglify())
              .pipe(gulp.dest('./build/js/'))
})

gulp.task('default',gulp.series(['js'])) //v4 版本的gulp需要使用series

gulp-babel 编译es6成es5（注意安装方式）

gulp-sourcemaps 源码转换（代码调试时可以看到非压缩的，方便定位问题）

const gulp = require('gulp');
const uglify = require('gulp-uglify');
const sourcemaps = require('gulp-sourcemaps');
const babel = require('gulp-babel');

gulp.task('js',() =>{
    return gulp.src('./src/**/*.js')
           .pipe(sourcemaps.init())
            .pipe(babel({
                presets:['@babel/env']
             }))
             .pipe(uglify())
              .pipe(sourcemaps.write())
               .pipe(gulp.dest('./build/js/'))
    
})

gulp.task('defualt',gulp.series(['js]))

gulp-imagemin 压缩图片 

gulp-cssmin 压缩css

const gulp = require('gulp');
const cssmin = require('gulp-cssmin');
const imagemin = require('gulp-imagemin);

gulp.task('css',() => {
    return gulp.src('./src/**/*.css)
            .pipe(cssmin())
            .pipe(gulp.dest('./build/css/'))
    
})

gulp.task('image',() => {
    return gulp.src(['./src/**/*.png','./src/**/*.jpg','./src/**/*.gif','./src/**/*.svg'])
            .pipe(imagemin())
            .pipe(gulp.dest('./build/image/'))

})

gulp.task('default',gulp.series(['css','image']))