簡單記下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']))