Gulp插件使用 gulp-babel/uglify/less/csso/file-include/htmlmin 复制文件构建任务(执行多个任务)

最新推荐文章于 2024-06-04 17:50:02 发布

tianmeng1999

最新推荐文章于 2024-06-04 17:50:02 发布

阅读量459

点赞数

分类专栏： gulp

本文链接：https://blog.csdn.net/weixin_42448623/article/details/107220414

版权

gulp 专栏收录该内容

3 篇文章 1 订阅

订阅专栏

文章目录

文档

Gulp插件使用步骤

安装插件 npm i 插件名称
导入 const xx = require('插件名称')
调用 xx.方法()

使用示例

gulp-htmlmin htm压缩插件使用

gulp-htmlmin文档
安装

npm i gulp
npm i gulp-htmlmin

导入

const htmlmin = require('gulp-htmlmin')

示例
把src下面的所要html都压缩输出到dist文件夹

const gulp = require('gulp')
const htmlmin = require("gulp-htmlmin")
gulp.task('html',done=>{
    // 获取src目录下的所有html文件
    gulp.src('./src/*.html')
    // 调用htmlmin插件 压缩html文件  collapseWhitespace：折叠空
    .pipe(htmlmin({ collapseWhitespace:true }))
    .pipe(gulp.dest('dist'))
    
    done()
})

效果
在这里插入图片描述

gulp-file-include 抽取文件公共部分

gulp-file-include文档

npm i gulp-file-include
const fileinclude = require("gulp-file-include")

把html的相同部分截取出来例如header

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>gulp项目源代码</title>
    <link rel="stylesheel" href="./css/index.css"/>
</head>
<body>
    <!-- <header>
        公共头部
    </header> -->
    @@include('./common/header.html')

    <div class="ff">ccccccccccccccccccccccccc</div>

</body>
</html>

把header部分内容放置到一个html文件里面然后在对应位置放入标记@@include('./common/header.html')

<header> 公共头部 </header>

任务

const gulp = require('gulp')
const htmlmin = require("gulp-htmlmin")
const fileinclude = require("gulp-file-include")
gulp.task('html',done=>{
    // 获取src目录下的所有html文件
    gulp.src('./src/*.html')
    // 抽取公共代码 把header部分替换回来
    .pipe(fileinclude())
   	// 调用htmlmin插件 压缩html文件  collapseWhitespace：折叠空
    .pipe(htmlmin({ collapseWhitespace:true }))
    .pipe(gulp.dest('dist'))

    done()
})

效果
在这里插入图片描述

gulp-less gulp-csso less转css css压缩

gulp-less文档
 gulp-csso文档

npm i gulp-less
npm i gulp-css
const less = require("gulp-less")
const csso = require("gulp-csso")

建立任务

// css 任务
// less语法转换
// css代码压缩
const less = require("gulp-less")
const csso = require("gulp-csso")
gulp.task('cssmin',done=>{
    // 获取所有的less文件
    // gulp.src('./src/css/*.less')

    // 获取多个路径 同时选中src/css下的less 和 css 文件
    gulp.src(['./src/css/*.less','./src/css/*.css'])

    // less 转换 css
    .pipe(less())

    // css 压缩
    .pipe(csso())

    // 输出目录
    .pipe(gulp.dest('dist/css'))

    done()
})

执行任务

gulp cssmin

效果
在这里插入图片描述

gulp-babel es6转es5 gulp-uglify 代码压缩混淆

gulp-babel文档
 gulp-uglify文档

npm i gulp-babel @babel/core @babel/preset-env 
或
npm install --save-dev gulp-babel@7 babel-core babel-preset-env

npm i gulp-uglify

const babel= require("gulp-babel")
const uglify= require("gulp-uglify")

任务
es6转es5
代码压缩混淆

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

效果
在这里插入图片描述
es6 转es5

压缩

复制文件

// 复制文件夹
gulp.task('copy',done=>{
    // 获取src/images/文件夹下的所有文件
    gulp.src('./src/images/*')
    .pipe(gulp.dest('dist/images'));

    gulp.src('./src/lib/*')
    .pipe(gulp.dest('dist/lib'));

    
    done()
})

运行任务

gulp copy

构建任务执行多个任务

执行default 任务的时候会依次执行后面的任务

gulp.task('default',gulp.series('html','file','cssmin','jsmin','copy'))

执行

gulp
或
gulp default

tianmeng1999

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
Gulp插件使用 gulp-babel/uglify/less/csso/file-include/htmlmin 复制文件构建任务(执行多个任务)

Gulp插件使用步骤安装插件 npm i 插件名称导入 const xx = require('插件名称')调用 xx.方法()使用示例gulp-htmlmin htm压缩插件使用npm i gulp-htmlminconst htmlmin = require('gulp-htmlmin')
复制链接

扫一扫