gulp 4.0.2打包配置

最新推荐文章于 2023-08-29 16:42:14 发布

SZ_FED

最新推荐文章于 2023-08-29 16:42:14 发布

阅读量1.3k

点赞数

分类专栏： web前端开发技术文章标签： gulp 前端 javascript

本文链接：https://blog.csdn.net/llq886/article/details/122301892

版权

本文介绍了如何使用gulp 4.0.2进行项目打包，包括压缩js和style文件到dist目录，迁移image和font文件，并提供了详细的配置过程和指令说明。通过配置gulpfile.babel.js和.babelrc文件，实现了文件监听和转义ES6语法的功能。

摘要由CSDN通过智能技术生成

这段时间使用gulp打包老项目，总结配置过程，分享给大家：

环境：

前后端不分离项目：jquery + php + twig模板语法
多入口项目。

gulp版本：
gulp -v 后输出：
CLI version: 2.3.0
gulp: ^4.0.2

需求内容：压缩 js 、style文件到dist目录，迁移image及font等依赖文件到相对dist的目录下。

待打包文件夹有style9及style105_1，目录如下，style9及style105_1及gulpfile.babel.js在同级目录下：
在这里插入图片描述

gulpfile.bebal.js配置如下：

/*
打包指令说明:
进入 gulpfile.bebal.js 配置文件的目录
gulp ： 根据配置的模板列表，输出打包后的静态资源，即打包js、style、images及font文件到dist目录供模板使用
gulp watch :  监听文件的变化，打包dist文件，类似热更新常用指令： npm run dev；
*/



import gulp from "gulp";
// import less from "gulp-less";
// import concat from "gulp-concat";
// import rename from "gulp-rename";
import babel from "gulp-babel";
import uglify from "gulp-uglify";
import cleanCSS from "gulp-clean-css";
import del from "del";

// 打包不同入口的文件
const needStyleUglifyTemplateList = [
  "style9",
  "style105_1"
];
const needJSUglifyTemplateList = [
  "style9",
  "style105_1",
];


export const clean = () => del(["./*/dist"]);

export function styles(templateName) {
   
  return function () {
   
    return (
      gulp
        .src(templateName + "/style/*.css")
        .pipe(cleanCSS())
        // pass in options to the stream
        //   .pipe(
        //     rename({ // 重命名
        //       basename: "main",
        //       suffix: ".min",