gulp的常用插件

xy2041622796

已于 2023-03-20 09:48:51 修改

阅读量179

点赞数

文章标签： javascript gulp 前端 Powered by 金山文档

于 2023-03-18 18:50:24 首次发布

本文链接：https://blog.csdn.net/xy2041622796/article/details/129640281

版权

gulp-htmlmin插件

作用：使用gulp-htmlmin压缩html，可以压缩页面javascript、css，去除页面空格、注释，删除多余属性等操作。

（1）首先下载插件 npm install gulp-htmlmin

（2）然后引入htmlmin插件

//引入htmlmin插件
const htmlmin=require('gulp-htmlmin')

（3）建立任务：压缩html文件

gulp.task('htmlmin',callback=>{
    //获取文件的路径
    gulp.src('./src/*.html') //括号里的是获取文件的路径
    //压缩html代码
    .pipe(htmlmin({
        collapseWhitespace:true
    }))
    //压缩后的html文件输出到dist目录下
    .pipe(gulp.dest('./dist'))
    callback();
})

（4）运行：gulp +方法名（这里的方法名即htmlmin）

gulp-file-include插件

作用：抽取公共部分的代码

（1）首先下载插件 npm install gulp-file-include

（2）然后引入插件

//引入include插件
const fileinclude = require("gulp-file-include");

（3）建立任务：抽取公共部分的代码

gulp.task('include',callback=>{
    gulp.src('./src/*.html') //括号里的是获取文件的路径
    //抽取公共部分的代码
    .pipe(fileinclude())
    //抽取后的html文件输出到dist目录下
    .pipe(gulp.dest('./dist'))
    callback();
})

（4）运行：gulp +方法名（这里的方法名即include）

gulp-less插件

作用：less语法转化

（1）首先下载插件 npm install gulp-less

（2）然后引入插件

//引入gulp-less插件
const less=require('gulp-less')

（3）建立任务：转换less语法

gulp.task('less',callback=>{
    //获取文件.css和.less结尾的文件
    gulp.src(['./src/css/*.css','./src/css/*.less']) //括号里的是获取文件的路径
    //转换less语法
    .pipe(less())
    //输出处理之后的文件
    .pipe(gulp.dest('./dist/css'))
    callback();
})

（4）（4）运行：gulp +方法名（这里的方法名即less）

gulp-csso插件

作用：压缩css文件

（1）首先下载插件 npm install gulp-csso

（2）然后引入插件

//引入gulp-csso插件
const cssmin=require('gulp-csso')

（3）建立任务：压缩css文件

gulp.task('cssmin',callback=>{
    //获取文件，以.css和.less结尾的
    gulp.src(['./src/css/*.css','./src/css/*.less']) //括号里的是获取文件的路径
    //压缩css文件
    .pipe(cssmin())
    //输出处理之后的文件
    .pipe(gulp.dest('./dist/css'))
    callback();
})

（4）运行：gulp +方法名（这里的方法名即cssmin）

gulp-babel插件

作用：javascript语法转化

（1）首先下载插件 npm install gulp-babel @babel/core @babel/preset-env

（2）然后引入插件

//引入gulp-babel插件
const babel=require('gulp-babel')

（3）建立任务：

gulp.task('jszh',callback=>{
    gulp.src('./src/js/*.js') //括号里的是获取文件的路径
    //转换ES6代码
    .pipe(babel({
        //判断当前代码的运行环境，将代码转换为当前运行环境的所支持的代码
        presets:['@babel/env']
    }))
    //输出处理之后的文件
    .pipe(gulp.dest('./dist/js'))
    callback();
})

（4）运行：gulp +方法名（这里的方法名即jszh）

gulp-uglify插件

作用：压缩javascript

（1）首先下载插件 npm install gulp-uglify

（2）然后引入插件

//引入gulp-uglify插件
const uglify=require('gulp-uglify')

（3）建立任务：压缩javascript

gulp.task('jsmin',callback=>{
    gulp.src('./src/js/*.js') //括号里的是获取文件的路径
    //压缩js文件
    .pipe(uglify())
    //输出处理之后的文件
    .pipe(gulp.dest('./dist/js'))
    callback();
})

（4）运行：gulp +方法名（这里的方法名即jsmin）