gulp打包vue3+jsx+less插件

榴莲不好吃

于 2023-10-20 15:54:40 发布

阅读量673

点赞数

分类专栏： vue 文章标签： gulp less node.js

本文链接：https://blog.csdn.net/sllailcp/article/details/133948168

版权

vue 专栏收录该内容

33 篇文章 14 订阅

订阅专栏

最终转换结果如下
在这里插入图片描述

在根目录下添加gulpfile.js文件，package.json添加命令npm run gulp

var gulp = require('gulp')
var babel = require('gulp-babel')
var less = require('gulp-less')
var del = require('del');
var spawn = require('child_process').spawn;

const outDir = "dist/"


function es6toes5() {
  return gulp.src('packages/**/*.js')
    .pipe(babel({
      presets: ["@babel/preset-env"],
      'plugins': [() => {
        return {
          visitor: {
            ImportDeclaration(path, source) {
              console.log(path);
              if (path.node.source.value.endsWith('.less')) {
                path.node.source.value = path.node.source.value.replace(/\.less$/, '.css')
              }
            },
          },
        }
      }]
    }))
    .pipe(gulp.dest(outDir ));
}

// function jsxtojs1() {
//   return gulp.src("packages/**/*.jsx").
//     pipe(babel({
//       plugins: [
//         ['@babel/plugin-transform-react-jsx', {
//           "throwIfNamespace": false,
//         }
//         ]
//       ]
//     })).
//     pipe(gulp.dest(outDir ));
// }
function jsxtojs() {
  return gulp.src("packages/**/*.jsx").
    pipe(babel({
      plugins: [
        [
          '@vue/babel-plugin-jsx',
          {
            enableObjectSlots: false,
          },
        ],
      ],
    })).
    pipe(gulp.dest(outDir ));
}

function lesstocss() {
  return gulp
    .src('packages/**/*.less')
    .pipe(
      less({
        relativeUrls: true,
      })
    )
    .pipe(gulp.dest(outDir ))
}

function npmTask(cb) {
  spawn('npm.cmd', ['run', 'lib'], {}) // 'npm.cmd' : 'npm' 运行 npm run lib 
    .on('error', cb)
    .on('close', code => code ? cb(new Error(code)) : cb());
}



exports.default = gulp.series(
  () => del([`./${outDir}/**`]),
  npmTask,
  jsxtojs,
  es6toes5,
  lesstocss);