gulp 的基本使用

2年前 (2022) 程序员胖胖胖虎阿

343 0 0

一、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, // 清除 <script> 标签内的 type 属性
        removeStyleLinkTypeAttributes: true, // 清除 <style> 和 <link> 标签内的 type 属性
        minifyJS: true, // 压缩 html 页面内的 js 代码 (不能转码 es6代码不能压缩)
        minifyCSS: true, // 压缩 html 页面内的 css 代码 (不能添加前缀)
      })
    )
    .pipe(gulp.dest("./dist/pages/"));
};

5.处理img

一般不做处理，直接移动(gulp-imagemin可以无损压缩)
编码

const imgHandler = function () {
  return gulp.src("./src/imgs/*.*").pipe(gulp.dest("./dist/imgs/"));
};

6.默认任务

当gulp执行时，默认执行default任务

module.exports.default =  gulp.parallel(
    cssHandler,
    scssHandler,
    jsHandler,
    htmlHandler,
    imgHandler
  );

7.删除任务

每次打包之前，删除原来的dist文件夹
依赖安装

npm i -D gulp-clean

编码

const clean = require("gulp-clean");

const cleanHandler = function () {
  return gulp.src("dist/", { read: false,allowEmpty:true }).pipe(clean());
};

module.exports.default = gulp.series(
    cleanHandler,
    defaultTask // 这里的defaultTask 就是上面的默认任务
)

8.开启服务任务

安装依赖

npm i gulp-webserver

编码

const webHandler = function () {
  return gulp.src("./dist").pipe(
    webserver({
      host: "localhost",
      port: "6907",
      livereload: true, // 文件修改时自动刷新页面
      open: "./pages/index.html", // 默认打开页面
      proxies: [
        {
          source: "/dt",
          target:
            "https://www.duitang.com/napi/blog/list/by_filter_id/",
        },
      ],
    })
  );
};

module.exports.default = gulp.series(
  cleanHandler,
  defaultTask, // 这里的defaultTask 就是上面的默认任务
  webHandler
);

9.监控任务

监听源文件的改变，执行指定的task，重新编译文件
编码

const watchHandler = function(){
  gulp.watch('./src/css/*.css',cssHandler);
  gulp.watch('./src/js/*.js',jsHandler);
  gulp.watch('./src/sass/*.sass',scssHandler);
  gulp.watch('./src/pages/*.html',htmlHandler);
}

module.exports.default = gulp.series(
  cleanHandler,
  defaultTask, // 这里的defaultTask 就是上面的默认任务
  webHandler,
  watchHandler
);

10.组件(html片段)

安装依赖

nmp i gulp-file-include

编码

const htmlHandler = function () {
  return gulp
    .src("./src/pages/*.html")
    .pipe(fileInclude({ // 根据配置导入对应的html片段
      prefix:'@@', // 自定义标识符
      basepath:'./src/components'  // 组件的基准路径
    }))
    .pipe(
      htmlmin({ // 配置
        })
    )
    .pipe(gulp.dest("./dist/pages/"));
};

在html引入组件片段

<body>
    <!-- 语法：自定义标识符include('文件路径') -->
    <!-- 文件路径： 以 basepath 为基准路径 -->
    <!-- 第二个参数是传递个组件片段的变量 类型为JSON对象 -->
    @@include('./header.html',{"test":"header section"})
    <h3> index test page</h3>  
    @@include('./header.html',{"test":"footer section"})
</body>

在组件html片段中使用变量