gulp常用插件使用方法

gulp常用插件

• gulp-htmlmin:html文件压缩
• gulp-file-include:公共文件包含

示例代码如下:

//引用gulp模块
const gulp = require('gulp')
const htmlmin = require('gulp-htmlmin')//html文件压缩
const fileInclude = require('gulp-file-include')//公共文件包含

//html任务
//1.html文件中代码公共部分抽取
//2.html代码压缩
gulp.task("htmlmin", () => { 
    gulp.src('./src/*.html')//获取所有html文件
    //抽取公共代码
    .pipe(fileInclude())
    //压缩html文件
    .pipe(htmlmin({collapseWhitespace:true}))//压缩空格
    .pipe(gulp.dest('dist'))//压缩并输出
})
  

• gulp-csso:压缩css
• gulp-less:less语法转换

示例代码如下:

 //引用gulp模块
const gulp = require('gulp')
const less=require('gulp-less')
const csso=require('gulp-csso')
//css任务
//1.less语法转换
//2.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/css'))
})

• gulp-babel:javaScript语法转换
• gulp-uglify:压缩javaScript**

示例代码如下:

//引用gulp模块
const gulp = require('gulp')
const babel=require('gulp-babel')
const uglify=require('gulp-uglify')

//js任务
//1.es6代码转换
//2.代码压缩
gulp.task('jsmin', () => { 
    gulp.src('./src/js/*.js')
        .pipe(babel({
            //判断当前代码运行环境
            presets:['@babel/env']
        }))
        .pipe(uglify())
    .pipe(gulp.dest('dist/js'))
})

复制文件夹

示例代码如下:

//引用gulp模块
const gulp = require('gulp')
//复制文件夹
gulp.task('copy', () => { 
    gulp.src('./src/images/*')
        .pipe(gulp.dest('dist/images'))
    gulp.src('./src/lib/*')
        .pipe(gulp.dest('dist/lib'))
})

一次执行多个任务

示例代码如下:

//gulp4.0+使用
//任务名称如果为default，再执行的时候可以直接使用gulp执行任务
//参数1:任务名，参数2:要执行的任务名称
gulp.task('default', gulp.series(['htmlmin', 'cssmin', 'jsmin', 'copy']));