gulp 的基本使用

一、gulp简介

gulp是基于流形式的打包工具

1.安装环境

全局安装

npm install --global gulp

全局安装之后，可以在全局中多一个gulp命令

2.在项目中使用

应为需要在项目中使用gulp对象的api，所以需要在项目中安装

npm install  -D gulp

在项目的根目录下创建gulpfile.js打包文件

3.常用方法

gulp.task('任务名称',任务处理函数)      创建一个基于流的任务
例子：gulp.task('cssHandler',()=>{
    // 找到 css源文件 添加前缀 压缩 放入指定目录
} )

gulp.src('路径信息')     获取源文件
例子：grulp.src('./src/css/*.css')

gulp.dest('路径信息')      把内容放入指定目录之下
例子：gulp.dest('./dist/css/')

gulp.watch('文件路径',任务名称)        监听文件变化，然后执行任务函数
例子：gulp.watch('./src/css/index.css',cssHandler)

gulp.series('任务一'，'任务二','...')        串行执行多个任务

gulp.parallel('任务一'，'任务二','...')    并行执行多个任务

pipe()    管道函数，传递当前流
例子：glup.src('./src/index.css').pipe('压缩任务').pipe(gulp.dest('./dist/'))

二、创建处理任务

代码写在gulpfile.js中

1.css的常规处理

依赖安装

npm i gulp-autoprefixe gulp-cssmin

const gulp = require("gulp");
const autoprefixer = require("gulp-autoprefixer");
const cssmin = require("gulp-cssmin");

// gulp3 语法
// gulp.task("cssHandler", () => {
//   return gulp
//     .src("./src/css/*.css")
//     .pipe(cssmin())
//     .pipe(gulp.dest("./dist/css/"));
// });

// gulp4 语法
const cssHandler = function () {
  return gulp
    .src("./src/css/*.css")
    .pipe(autoprefixer({
            browsers:["last 2 versions"]
        }))
    .pipe(cssmin())
    .pipe(gulp.dest("./dist/css/"));
};

module.exports = {
    cssHandler
}

在命令行中执行 gulp cssHandler 即可执行任务

2.处理scss

依赖下载

npm i gulp-sass node-sass

编码

const scss = require("gulp-sass")(require('node-sass'));

const scssHandler = function () {
  return gulp
    .src("./src/scss/*.scss")
    .pipe(scss())
    .pipe(autoprefixer())
    .pipe(cssmin())
    .pipe(gulp.dest("./dist/scss/"));
};

3.处理js

依赖安装

npm i -D gulp-uglify gulp-babel @babel/core @babel/preset-env

编码

const uglify = require("gulp-uglify");  // 压缩js代码
const babel = require("gulp-babel");
// 依赖 @babel/core @babel/preset-env

const jsHandler = function () {
  return gulp
    .src("./src/js/*.js")
    .pipe(
      babel({
        // 配置需要将那些es6语法转成es5，这里使用了预设(常规转换)
        presets: ["@babel/env"],
      })
    )
    .pipe(uglify())
    .pipe(gulp.dest("./dist/js/"));
};

4.处理html

依赖安装

npm i -D htmlmin

编码

const htmlmin = require('htmlmin');

const htmlHandler = function () {
  return gulp
    .src("./src/pages/*.html")
    .pipe(
      htmlmin({
        removeComments: true, // 清除 HTML 注释
        collapseWhitespace: true, // 省略空白
        collapseBooleanAttributes: true, // 省略所有标签内的布尔属性(原生属性 如checked)
        removeEmptyAttributes: true, // 清除所有标签内值为空的属性
        removeScriptTypeAttributes: true, // 清除