gulp学习

新建一个gulp.js

// series // 串行 一个一个轮流执行
// parallel // 并行 全部一起执行
// src()表示创建一个读取文件系统的流
// dest是创建一个写入到文件系统的流
// .pipe() 用于连接转换流（Transform streams）或可写流（Writable streams）

// child_process 使用它进行文件压缩、脚本运行等操作
const { series, parallel, src, dest } = require("gulp");
const { spawn } = require('child_process');
const gulpLess = require('gulp-less')

// const task1 = () => {
//   console.log("task1");
//   return new Promise((resolve) => {
//     setTimeout(() => {
//       resolve();
//     }, 5000);
//   });
// };
// const task2 = () => {
//   console.log("task2");
//   return Promise.resolve();
// };

// exports.default = parallel(task1, task2)

const lessTask = () => { // less打包css
  return src('src/style/*').pipe(gulpLess()).pipe(dest('dist/style'))
}
// exports.default = gulp

const browserSync = require("browser-sync") // 监听文件变化
const { watch } = require('browser-sync')

const reloadTask = () => {
  browserSync.reload()
}

const browserTask = () => { // 箭头文件改变创建端口号
  browserSync.init({
    server: {
      baseDir: "./",
    },
  })
  watch('./index.html', series(reloadTask))
  watch('./src/style/*', series(lessTask, reloadTask))
};

const cmd = (command, path) => {
  //cmd表示命令，args代表参数，如 rm -rf  rm就是命令，-rf就为参数
  const [cmd, ...args] = command.split(" ");
  console.log(args);
  
  return new Promise((resolve, reject) => {
    const app = spawn(cmd, args, {
      cwd: path, //执行命令的路径
      stdio: "inherit", //输出共享给父进程
      shell: true, //mac不需要开启，windows下git base需要开启支持
    });
    //执行完毕关闭并resolve
    app.on("close", resolve);
  });
}

const cd = () => {
  cmd('npm run dev', './')
}

exports.default = series(cd, browserTask)

运行 gulp