gulp各种插件简介

目录

• • 使用gulp.task 建立任务
  • • 1.任务的名称
    • 2.任务的回调函数
  • html任务
  • • 1. html文件中的代码压缩操作
    • 2.抽取html文件的公共代码
  • css任务
  • • 1.less语法转换
    • 2.抽取html文件中的公共代码
  • js任务
  • • 1.es6代码转化
    • 2.代码压缩
  • 其余文件夹及其余文件
  • 一次性执行以上全部功能
  • 自我激励

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 建立任务

1.任务的名称

2.任务的回调函数

gulp.task('first', async () => {
    await console.log("人生中的第一个gulp任务执行完毕");
    // 1.使用gulp.src获取要处理的文件
    gulp.src('./src/css/style.css', {
            allowEmpty: true
        })
        // 通过pipe方法处理base.css文件
        // pipe方法里面写的是 如何处理代码  
        .pipe(gulp.dest('dist/css')); // 让base.css在dist/css文件夹中输出
});

html任务

1. html文件中的代码压缩操作

2.抽取html文件的公共代码

gulp.task('htmlmin', async () => {
    gulp.src('./src/*.html', {
            allowEmpty: true
        })
        .pipe(fileinclude())
        .pipe(htmlmin({
            collapseWhitespace: true
        }))
        .pipe(gulp.dest('./dist'));

});

css任务

1.less语法转换

2.抽取html文件中的公共代码

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

js任务

1.es6代码转化

2.代码压缩

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

其余文件夹及其余文件

// 复制文件夹
gulp.task('copy', async () => {
    gulp.src('./src/img.*')
        .pipe(gulp.dest('dist/img'));
    gulp.src('./src/*.md')
        .pipe(gulp.dest('dist'));
});

一次性执行以上全部功能

// 构建任务
gulp.task('default', gulp.series("htmlmin", "jsmin", "cssmin", "copy"));
// 错误代码
// gulp.task('default', ["htmlmin", "jsmin", "cssmin", "copy"]);

自我激励

别傻了，你抛弃所有，学习技术就一定会学好的，加油，你努力拼搏的样子最帅了！！