gulp-file

主要方法：

1.gulp.src(): 获取要处理的文件
2.gulp.task()：建立gulp任务
3.gulp.dest()：输出文件
4.gulp.watch(): 监控文件的变化

具体步骤

1.引用gulp模块

const gulp = require("gulp");

2.引用插件

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');

3.使用gulp.task建立任务
第一个参数：任务的名称
第二个参数：任务的回调函数

gulp.task("first",()=>{
    console.log("这是我的第一个gulp任务");
    //使用gulp.src获取要处理的文件
    gulp.src("./src/css/index.css").pipe(gulp.dest("./dist/css"));
    //将要处理的gulp文件放到pipe里面，会自动生成dist/css文件夹       
});

html任务

1.HTML文件中代码的压缩操作
2.抽取HTML文件中的公共代码

gulp.task("htmlmin",() => {
    gulp.src("src/*.html")
    //抽取HTML中的公共代码
        .pipe(fileinclude())
    //压缩HTML中的代码
        .pipe(htmlmin({ collapseWhitespace: true }))
    //压缩完输出该文件
        .pipe(gulp.dest("dist"));    
});

css任务

1.less语法转换
2.css代码压缩

gulp.task("cssmin",() => {
    // gulp.src("src/css/*.less")
    // 选择css目录下面的所有less文件和css文件
       gulp.src(["src/css/*.less","src/css/*.css"])//src里面可以使用数组，同时选择目录下的css和less文件
        //将less文件转化为css文件
        .pipe(less())
        //压缩css代码
        .pipe(csso())
        //将处理的结果输出到指定位置
        .pipe(gulp.dest("dist/css"));
});

js任务

1.js语法转换
2.js代码压缩

gulp.task("jsmin",() => {
    gulp.src("src/js/*.js")
        .pipe(babel({
            //它可以判断当前代码的运行环境，将代码转换为当前运行环境支持的代码
            presets: ['@babel/env']
        }))
        .pipe(uglify())
        .pipe(gulp.dest("dist/js"));

});

复制文件夹

gulp.task("copy",(done) => {
    gulp.src("src/img/*")
        .pipe(gulp.dest("dist/img"));
    gulp.src("src/images/*")
        .pipe(gulp.dest("dist/images"));
    done();    

});

构建任务

gulp.task('default',gulp.series('htmlmin','cssmin','jsmin','copy',(done) => {
  done();
}));