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

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"))
}

• 暴露指令

module.exports.html = htmlFn;

• 按需执行指令

gulp html