新手快速学会gulp插件的使用

Yonina ·

更新时间:2024-11-13

· 867 次阅读

1. 安装插件

删除文件夹：gulp-clean

压缩css：gulp-cssmin

css前缀：gulp-autoprefixer

压缩js：gulp-uglify

ES6转ES5：gulp-babel

套件1：@babel/core

套件2：@babel/preset-env

压缩html：gulp-htmlmin

服务器插件：gulp-webserver

2. 在gulpFile.js文件中引入所需插件

const gulp = require("gulp");
const cssmin = require("gulp-cssmin");
const autoprefixer = require("gulp-autoprefixer");
const uglify = require("gulp-uglify");
const babel = require("gulp-babel");
const htmlmin = require("gulp-htmlmin");
const webserver = require("gulp-webserver");

3. 处理css文件：给部分css属性与指定浏览器版本的兼容加前缀，压缩 定义指令

function cssFn(){
    return gulp.src("./project/css/**/*")
            .pipe(autoprefixer("last 2 version","safari 5","ie 8","ie 9","opera 12.1","ios 6","android 4"))
            .pipe(cssmin())
            .pipe(gulp.dest("./server/css"))
}
// autoprefixer方法可以接收以下参数，用来处理对应浏览器的兼容问题：
// last 2 versions: 主流浏览器的最新两个版本
// last 1 Chrome versions: 谷歌浏览器的最新版本
// last 2 Explorer versions: IE的最新两个版本
// last 3 Safari versions: 苹果浏览器最新三个版本
// Firefox >= 20: 火狐浏览器的版本大于或等于20
// iOS 7: IOS7版本
// Firefox ESR: 最新ESR版本的火狐
// > 5%: 全球统计有超过5%的使用率

暴露指令

module.exports.css = cssFn;

按需执行指令

gulp css

4. 处理js文件：将ES6代码编译成ES5，压缩 定义指令

function jsFn(){
    return gulp.src("./project/js/**/*")
        .pipe(babel({
            presets:["@babel/env"]
        }))
        .pipe(uglify())
        .pipe(gulp.dest("./server/js"))
}

暴露指令

module.exports.js = jsFn;

按需执行指令

gulp js

5. 处理html文件：压缩 定义指令

function htmlFn(){
    return gulp.src("./project/pages/**/*")
        .pipe(htmlmin({
            removeEmptyAttributes:true,
            collapseWhitespace:true
        }))
        .pipe(gulp.dest("./server/pages"))
}

暴露指令