gulp的使用

const gulp = require('gulp');
const htmlmin = require('gulp-htmlmin');
const fileinclude = require('gulp-file-include')
const less = require('gulp-less')
const csso = require('gulp-csso')
const babel = require('gulp-babel')
const uglify = require('gulp-uglify')
gulp.task('first',async() =>{
    // 使用gulp.src()获取要处理文件
    gulp.src('./src/css/base.css')
    .pipe(gulp.dest('dist/css'))
});


// html任务
// HTML文件中代码的压缩操作
// 抽取HTML文件中的公共代码




gulp.task('htmlmin',async() =>{
    gulp.src('./src/*.html')
    //抽取公共带啊
    .pipe(fileinclude())
    //压缩HTML文件中的代码
    .pipe(htmlmin({collapseWhitespace:true}))
    .pipe(gulp.dest('dist'))
})


// css任务
// less语法转换
//css代码压缩
gulp.task('cssmin',() =>{
    //选择css目录下所有的less文件和css文件
gulp.src('./src/css/*less','./src/css/*.css')
//将less语法转换为css语法
.pipe(less())
//将css代码进行压缩
.pipe(csso())
//将处理的结果进行输出
.pipe(gulp.dest('dist'))
})



// js任务
// es6代码转换
//js代码压缩
gulp.task('jsmin',() => {
    gulp.src('./src/js/*.js')
    .pipe(babel({
//它可以判断当前代码运行环境 将代码转换成当前运行环境所支持的代码运行坏境
        presets:['@babel/env']
    }))
    //将js代码压缩
    .pipe(uglify())
    .pipe(gulp.dest('dist/js'))
})