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

原创于 2020-03-24 23:00:47 发布 · 289 阅读

1 ·

CC 4.0 BY-SA版权

本文详细介绍如何使用Gulp进行自动化任务配置，包括安装必要插件、处理CSS兼容及压缩、JS编译压缩、HTML压缩，以及设置本地服务器。通过具体步骤和代码示例，帮助读者快速掌握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"))
}