module.exports = {
  env: {
    // 标记代码运行环境
    browser: true,
    es2020: true,
  },
  extends: [
    // 继承共享配置
    "standard",
  ],
  parser: "@typescript-eslint/parser", // 语法解析器
  parserOptions: {
    // 设置语法解析器，检查语法，而不是代表某个成员是否可以，成员通过环境定义
    ecmaVersion: 11,
  },
  rules: {
    // 校验规则的开启、关闭 off：关闭 warning：结果 error：警告
    "no-alert": "error",
  },
  globals: {
    // 额外声明代码中可以使用的全局成员
    jQuery: "readonly", // 代码中可以使用jQuery而且不会报错
  },
};

// eslint-disable-line no-template-curly-in-string
const str = "${name} is a coder";

console.log(str);

// plugins 自动加载插件模块
const script = () => {
  return (
    src("src/assets/script/*.js", { base: "src" })
      .pipe(plugins.eslint()) // 默认只会检查代码的问题，并不会根据检查结果做出反馈
      // 控制台打印错误信息
      .pipe(plugins.eslint.format())
      // eslint检查错误后终止任务
      .pipe(plugins.eslint.failAfterError())
      .pipe(plugins.babel({ presets: ["@babel/preset-env"] }))
      .pipe(dest("temp"))
      .pipe(bs.reload({ stream: true }))
  );
};

const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
  mode: "production",
  entry: "./src/main.js",
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: [
          "babel-loader",
          // 'eslint-loader'
        ],
      },
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: "eslint-loader",
        enfore: "pre",
      },
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"],
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: "src/index.html",
    }),
  ],
};

modul.exports = {
  rules: {
    "react/jsx-uses-react": 2, // 开启报错，2 代替 error
    "react/jsx-uses-vars": 2,
  },
  extends: [
    // 'plugin:react/recommended' // 方法二
  ],
  plugins: [
    "react", // 模块名会去除eslint-plugin
  ],
};

module.exports = {
  // 共享配置
  extends: ["stylelint-config-standard", "stylelint-config-sass-guidelines"],
};

module.exports = {
  extends: ["@commitlint/config-conventional"],
  rules: {
    "subject-case": [0, "never"],
    "type-enum": [
      2, // 代表必须输入
      "always",
      [
        "docs", // Adds or alters documentation. 仅仅修改了文档，比如README, CHANGELOG, CONTRIBUTE等等
        "chore", // Other changes that don't modify src or test files. 改变构建流程、或者增加依赖库、工具等
        "feat", // Adds a new feature. 新增feature
        "fix", // Solves a bug. 修复bug
        "merge", // Merge branch ? of ?.
        "perf", // Improves performance. 优化相关，比如提升性能、体验
        "refactor", // Rewrites code without feature, performance or bug changes. 代码重构，没有加新功能或者修复bug
        "revert", // Reverts a previous commit. 回滚到上一个版本
        "style", // Improves formatting, white-space. 仅仅修改了空格、格式缩进、都好等等，不改变代码逻辑
        "test", // Adds or modifies tests. 测试用例，包括单元测试、集成测试等
      ],
    ],
  },
};

// Grunt 的入口文件
// 用于定义一些需要 Grunt 自动执行的任务
// 需要导出一个函数
// 此函数接收一个 grunt 的对象类型的形参
// grunt 对象中提供一些创建任务时会用到的 API

module.exports = (grunt) => {
  grunt.registerTask("foo", "a sample task", () => {
    console.log("hello grunt");
  });

  grunt.registerTask("bar", () => {
    console.log("other task");
  });

  // // default 是默认任务名称
  // // 通过 grunt 执行时可以省略
  // grunt.registerTask('default', () => {
  //   console.log('default task')
  // })

  // 第二个参数可以指定此任务的映射任务，
  // 这样执行 default 就相当于执行对应的任务
  // 这里映射的任务会按顺序依次执行，不会同步执行
  grunt.registerTask("default", ["foo", "bar"]);

  // 也可以在任务函数中执行其他任务
  grunt.registerTask("run-other", () => {
    // foo 和 bar 会在当前任务执行完成过后自动依次执行
    grunt.task.run("foo", "bar");
    console.log("current task runing~");
  });

  // 默认 grunt 采用同步模式编码
  // 如果需要异步可以使用 this.async() 方法创建回调函数
  // grunt.registerTask('async-task', () => {
  //   setTimeout(() => {
  //     console.log('async task working~')
  //   }, 1000)
  // })

  // 由于函数体中需要使用 this，所以这里不能使用箭头函数
  grunt.registerTask("async-task", function () {
    const done = this.async();
    setTimeout(() => {
      console.log("async task working~");
      done();
    }, 1000);
  });
};

module.exports = (grunt) => {
  grunt.registerTask("foo", () => {
    console.log("hello grunt~");
  });

  grunt.registerTask("bar", "任务描述", () => {
    console.log("other task~");
  });

  grunt.registerTask("bad-async", function () {
    const done = this.async();
    setTimeout(() => {
      console.log("async task working~");
      done(false); // 出入实参false标识异步任务失败
    }, 1000);
  });

  grunt.registerTask("bad", () => {
    console.log("bad working~");
    return false;
  });

  grunt.registerTask("default", ["foo", "bad", "bar"]);
};

module.exports = (grunt) => {
  // grunt.initConfig() 用于为任务添加一些配置选项
  grunt.initConfig({
    // 键一般对应任务的名称
    // 值可以是任意类型的数据
    foo: {
      bar: "baz",
    },
  });

  grunt.registerTask("foo", () => {
    // 任务中可以使用 grunt.config() 获取配置
    console.log(grunt.config("foo"));
    // 如果属性值是对象的话，config 中可以使用点的方式定位对象中属性的值
    console.log(grunt.config("foo.bar"));
  });
};

module.exports = (grunt) => {
  grunt.initConfig({
    build: {
      // ‘build’名与
      options: {
        foo: "bar",
      },
      css: {
        options: {
          foo: "baz",
        },
      },
      js: "2",
    },
  });
  grunt.registerMultiTask("build", function () {
    console.log(this.options());
    console.log(`task: ${this.target}, data:${this.data}`);
  });
};

// 删除文件的任务

module.exports = (grunt) => {
  grunt.initConfig({
    clean: {
      // temp:'temp/app.js' // 需要清除的文件，可以使用通配符"*"，“**”表示找到该目录下的文件以及子目录的文件（即该目录下的所有文件）
      temp: "temp/*.txt",
    },
  });

  // 通过 loadNpmTasks 加载插件中提供的任务
  grunt.loadNpmTasks("grunt-contrib-clean");
};

const sass = require("sass");
module.exports = (grunt) => {
  grunt.initConfig({
    sass: {
      options: {
        implementation: sass,
      },
      main: {
        // 目标main(随便写)
        files: {
          "dist/css/main.css": "src/scss/main.scss", // 键是输出文件，值是输入文件
        },
      },
    },
  });
  // 通过 loadNpmTasks 加载插件中提供的任务
  grunt.loadNpmTasks("grunt-sass");
};

const loadGruntTasks = require("load-grunt-tasks");
module.exports = (grunt) => {
  // grunt.loadNpmTasks('grunt-sass')
  loadGruntTasks(grunt); // 自动加载所有的 grunt 插件中的任务
};

const sass = require("sass");
const loadGruntTasks = require("load-grunt-tasks");

module.exports = (grunt) => {
  grunt.initConfig({
    sass: {
      options: {
        implementation: sass,
      },
      main: {
        // 目标main(随便写)
        files: {
          "dist/css/main.css": "src/scss/main.scss", // 键是输出文件，值是输入文件
        },
      },
    },
    babel: {
      options: {
        sourceMap: true,
        presets: ["@babel/preset-env"],
      },
      main: {
        files: {
          "dist/js/app.js": "src/js/app.js",
        },
      },
    },
  });

  // grunt.loadNpmTasks('grunt-sass')
  loadGruntTasks(grunt); // 自动加载所有的 grunt 插件中的任务
};

const sass = require("sass");
const loadGruntTasks = require("load-grunt-tasks");

module.exports = (grunt) => {
  grunt.initConfig({
    sass: {
      options: {
        implementation: sass,
      },
      main: {
        // 目标main(随便写)
        files: {
          "dist/css/main.css": "src/scss/main.scss", // 键是输出文件，值是输入文件
        },
      },
    },
    babel: {
      options: {
        sourceMap: true,
        presets: ["@babel/preset-env"],
      },
      main: {
        files: {
          "dist/js/app.js": "src/js/app.js",
        },
      },
    },
    watch: {
      js: {
        files: ["src/js/*.js"], // 监听的文件
        tasks: ["babel"], // 当文件发生改变要执行什么任务
      },
      css: {
        files: ["src/scss/*.scss"], // 监听的文件
        tasks: ["sass"], // 当文件发生改变要执行什么任务
      },
    },
  });

  // grunt.loadNpmTasks('grunt-sass')
  loadGruntTasks(grunt); // 自动加载所有的 grunt 插件中的任务
  grunt.registerTask("default", ["sass", "babel", "watch"]);
};

// gulp入口文件

// 导出的函数都会作为 gulp 任务
exports.foo = (done) => {
  // gulp 的任务函数都是异步的
  // 可以通过调用回调函数标识任务完成
  console.log("foo task working~");
  done(); // 标识任务执行完成
};

// default 是默认任务
// 在运行是可以省略任务名参数
exports.default = (done) => {
  console.log("default task working~");
  done();
};

const { series, parallel } = require("gulp");

// 可以没导出的理解为私有任务

const task1 = (done) => {
  setTimeout(() => {
    console.log("task1 working~");
    done();
  }, 1000);
};

const task2 = (done) => {
  setTimeout(() => {
    console.log("task2 working~");
    done();
  }, 1000);
};

const task3 = (done) => {
  setTimeout(() => {
    console.log("task3 working~");
    done();
  }, 1000);
};

exports.foo = series(task1, task2, task3); // // 让多个任务按照顺序依次执行
exports.bar = parallel(task1, task2, task3); // // 让多个任务同时执行

exports.callback_error = (done) => {
  console.log("callback task~");
  done(new Error("task failed!"));
};

exports.promise = () => {
  console.log("promise task~");
  return Promise.resolve();
};
exports.promise = () => {
  console.log("promise task~");
  return Promise.reject(new Error("task failed~"));
};

const timeout = (time) => {
  return new Promise((resolve) => {
    setTimeout(resolve, time);
  });
};
exports.async = async () => {
  await timeout(1000);
  console.log("async task~");
};

// exports.stream = () => {
//     const readStream = fs.createReadStream('package.json')
//     const writeStream = fs.createWriteStream('temp.txt')
//     readStream.pipe(writeStream)
//     return readStream
// }
exports.stream = (done) => {
  const readStream = fs.createReadStream("package.json");
  const writeStream = fs.createWriteStream("temp.txt");
  readStream.pipe(writeStream);
  readStream.on("end", () => {
    done();
  });
};

const fs = require("fs");
const { Transform } = require("stream");

exports.default = () => {
  // 文件读取流
  const read = fs.createReadStream("normalize.css");
  // 文件写入流
  const write = fs.createWriteStream("normalize.min.css");
  // 文件转换流
  const transform = new Transform({
    transform: (chunk, encoding, callback) => {
      // 核心转换过程
      // chunk => 读取流中读取到的内容（Buffer）
      const input = chunk.toString();
      // 替换空格、注释（压缩代码）
      const output = input.replace(/\s+/g, "").replace(/\/\*.+?\*\//g, "");
      // 把内容传出
      callback(null, output); // 错误优先的回调函数
    },
  });

  // 把读取出来的文件流导入写入文件流
  read
    .pipe(transform) // 转换
    .pipe(write); // 写入
  return read;
};

const { src, dest } = require("gulp");
const cleanCss = require("gulp-clean-css"); // 压缩代码转换流模块
const rename = require("gulp-rename"); // 重命名扩展名模块

exports.default = () => {
  // gulp读取流 和 写入流，可以使用统配符
  return src("src/*.css")
    .pipe(cleanCss())
    .pipe(rename({ extname: ".min.css" })) // 指定重命名的扩展名
    .pipe(dest("dist"));
};

const { src, dest } = require("gulp");

// 该依赖会把下划线文件名的文件认为是主文件中依赖的文件，所以不会吧下划线文件名的文件转换
const sass = require("gulp-sass");

const style = () => {
  // base 基准路径，会把src后面的路径保留下来，否则不会按照原本路径输出
  return src("src/assets/styles/*.scss", { base: "src" })
    .pipe(sass({ outputStyle: "expanded" })) // outputStyle编译后“}”位于后面
    .pipe(dest("dist"));
};

module.exports = {
  style,
};

const { src, dest } = require("gulp");
const babel = require("gulp-babel");

const script = () => {
  // base 基准路径，会把src后面的路径保留下来，否则不会按照原本路径输出
  return src("src/assets/scripts/*.js", { base: "src" })
    .pipe(babel({ presets: ["@babel/preset-env"] })) // 如果不添加presets转换无效
    .pipe(dest("dist"));
};

module.exports = {
  script,
};

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

const data = {
  menus: [
    {
      name: "Home",
      icon: "aperture",
      link: "index.html",
    },
    {
      name: "Features",
      link: "features.html",
    },
    {
      name: "About",
      link: "about.html",
    },
    {
      name: "Contact",
      link: "#",
      children: [
        {
          name: "Twitter",
          link: "https://twitter.com/w_zce",
        },
        {
          name: "About",
          link: "https://weibo.com/zceme",
        },
        {
          name: "divider",
        },
        {
          name: "About",
          link: "https://github.com/zce",
        },
      ],
    },
  ],
  pkg: require("./package.json"),
  date: new Date(),
};
const page = () => {
  // 如果存在子目录：'src/**/*.html'
  return (
    src("src/*.html", { base: "src" })
      // data 把数据传入到模板中，渲染对应的数据
      // cache 防止模板缓存导致页面不能及时更新
      .pipe(swig({ data, defaults: { cache: false } }))
      .pipe(dest("dist"))
  );
};
module.exports = {
  page,
};

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

const image = () => {
  return src("src/assets/images/**", { base: "src" })
    .pipe(imagemin())
    .pipe(dest("dist"));
};

const font = () => {
  return src("src/assets/fonts/**", { base: "src" })
    .pipe(imagemin())
    .pipe(dest("dist"));
};

const del = require("del");

const extra = () => {
  // 转换其他文件
  return src("public/**", { base: "public" }).pipe(dest("dist"));
};

const clean = () => {
  return del(["dist"]);
};

const loadPlugins = require("gulp-load-plugins");
// 自动加载所有的插件
const plugins = loadPlugins(); // 把‘gulp-’去掉，如果后面有多个‘-’会变为驼峰命名

const style = () => {
  // base 基准路径，会把src后面的路径保留下来，否则不会按照原本路径输出
  return src("src/assets/styles/*.scss", { base: "src" })
    .pipe(plugins.sass({ outputStyle: "expanded" })) // 使用plugins.sass
    .pipe(dest("dist"));
};

const browserSync = require("browser-sync");
// 创建服务器
const bs = browserSync.create();
// 服务任务
// 此时dist文件目录的样式指向node_modules，需要修改配置
const serve = () => {
  bs.init({
    notify: false, // 关闭notify提示
    port: 8080, // 端口
    // open: false, // 是否自动打开浏览器
    files: "dist/**", // browserSync服务监听的路径通配符，文件发生改变自动刷新浏览器
    server: {
      baseDir: "dist",
      routes: {
        // 优先于baseDir，请求发生后会先看routes是否有对应的配置，如果有就走routes配置，否则就走baseDir对应的文件
        "/node_modules": "node_modules", // 键是请求的前缀
      },
    },
  });
};

const { watch } = require("gulp");
// 服务任务
// 此时dist文件目录的样式指向node_modules，使用路由映射
const serve = () => {
  watch("src/assets/styles/*.scss", style);
  watch("src/assets/scripts/*.js", script);
  watch("src/*.html", page);

  // 开发阶段对图片、字体不构建，提高构建效率
  // watch('src/assets/images/**', image)
  // watch('src/assets/fonts/**', font)
  // watch('public/**', extra)

  // 文件变化后自动更新浏览器，浏览器重新发起请求
  watch(
    ["src/assets/images/**", "src/assets/fonts/**", "public/**"],
    bs.reload
  );

  bs.init({
    notify: false, // 关闭notify提示
    port: 8080, // 端口
    // open: false, // 是否自动打开浏览器
    files: "dist/**", // browserSync服务监听的路径通配符，文件发生改变自动刷新浏览器
    server: {
      baseDir: ["dist", "src", "public"], // 如果资源在dist找不到就到src找，还找不到就到public找
      routes: {
        // 优先于baseDir，请求发生后会先看routes是否有对应的配置，如果有就走routes配置，否则就走baseDir对应的文件
        "/node_modules": "node_modules", // 键是请求的前缀
      },
    },
  });
};

const useref = () => {
  return (
    src("dist/*.html", { base: "dist" })
      // 去除HTML文件构建注释、把构建注释的内容合并到一个文件中
      .pipe(plugins.useref({ searchPath: ["dist", "."] }))
      .pipe(dest("dist"))
  );
};

const useref = () => {
  return (
    src("dist/*.html", { base: "dist" })
      // 去除HTML文件构建注释、把构建注释的内容合并到一个文件中
      .pipe(plugins.useref({ searchPath: ["dist", "."] }))
      .pipe(plugins.if(/\.js$/, plugins.uglify())) // 压缩js
      .pipe(plugins.if(/\.css$/, plugins.cleanCss())) // 压缩css
      .pipe(
        plugins.if(
          /\.html$/,
          plugins.htmlmin({
            collapseWhitespace: true,
            minifyCSS: true, // 把html文件中的style压缩
            minifyJS: true, // 把script中的js压缩
          })
        )
      ) // 压缩html
      .pipe(dest("release"))
  ); // 写入到另外一个文件，防止读、写同一个文件引发错乱
};

/ 转换样式
const style = () => {
    // base 基准路径，会把src后面的路径保留下来，否则不会按照原本路径输出
    return src('src/assets/styles/*.scss', { base: 'src' })
        .pipe(plugins.sass({ outputStyle: 'expanded' })) // outputStyle编译后“}”位于后面
        .pipe(dest('temp'))
        .page(bs.reload({ stream: true })) // 把信息以流的方法推到浏览器
}

// 转换脚本
const script = () => {
    return src('src/assets/scripts/*.js', { base: 'src' })
        .pipe(plugins.babel({ presets: ['@babel/preset-env'] }))
        .pipe(dest('temp'))
        .page(bs.reload({ stream: true }))
}

// 转换模板
const page = () => {
    // 如果存在子目录：'src/**/*.html'
    return src('src/*.html', { base: 'src' })
        // data 把数据传入到模板中，渲染对应的数据
        // cache 防止模板缓存导致页面不能及时更新
        .pipe(plugins.swig({ data, defaults: { cache: false } }))
        .pipe(dest('temp'))
        .page(bs.reload({ stream: true }))
}

const useref = () => {
    return src('temp/*.html', { base: 'temp' })
        // 去除HTML文件构建注释、把构建注释的内容合并到一个文件中
        .pipe(plugins.useref({ searchPath: ['temp', '.'] }))
        .pipe(plugins.if(/\.js$/, plugins.uglify())) // 压缩js
        .pipe(plugins.if(/\.css$/, plugins.cleanCss())) // 压缩css
        .pipe(plugins.if(/\.html$/, plugins.htmlmin({
            collapseWhitespace: true,
            minifyCSS: true, // 把html文件中的style压缩
            minifyJS: true // 把script中的js压缩
        }))) // 压缩html
        .pipe(dest('dist')) // 写入到另外一个文件，防止读、写同一个文件引发错乱
}

const { src, dest, parallel, series, watch } = require("gulp");

const del = require("del");
const browserSync = require("browser-sync");

const loadPlugins = require("gulp-load-plugins");

// 自动加载所有的插件
const plugins = loadPlugins(); // 把‘gulp-’去掉，如果后面有多个‘-’会变为驼峰命名

// 创建服务器
const bs = browserSync.create();

const data = {
  menus: [
    {
      name: "Home",
      icon: "aperture",
      link: "index.html",
    },
    {
      name: "Features",
      link: "features.html",
    },
    {
      name: "About",
      link: "about.html",
    },
    {
      name: "Contact",
      link: "#",
      children: [
        {
          name: "Twitter",
          link: "https://twitter.com/w_zce",
        },
        {
          name: "About",
          link: "https://weibo.com/zceme",
        },
        {
          name: "divider",
        },
        {
          name: "About",
          link: "https://github.com/zce",
        },
      ],
    },
  ],
  pkg: require("./package.json"),
  date: new Date(),
};

// 删除文件目录
const clean = () => {
  return del(["dist", "temp"]);
};

const style = () => {
  // base 基准路径，会把src后面的路径保留下来，否则不会按照原本路径输出
  return src("src/assets/styles/*.scss", { base: "src" })
    .pipe(plugins.sass({ outputStyle: "expanded" })) // outputStyle编译后“}”位于后面
    .pipe(dest("temp"))
    .pipe(bs.reload({ stream: true })); // 把信息以流的方法推到浏览器
};

const script = () => {
  return src("src/assets/scripts/*.js", { base: "src" })
    .pipe(plugins.babel({ presets: ["@babel/preset-env"] }))
    .pipe(dest("temp"))
    .pipe(bs.reload({ stream: true }));
};

const page = () => {
  // 如果存在子目录：'src/**/*.html'
  return (
    src("src/*.html", { base: "src" })
      // data 把数据传入到模板中，渲染对应的数据
      // cache 防止模板缓存导致页面不能及时更新
      .pipe(plugins.swig({ data, defaults: { cache: false } })) // 防止模板缓存导致页面不能及时更新
      .pipe(dest("temp"))
      .pipe(bs.reload({ stream: true }))
  );
};

// 压缩图片
const image = () => {
  return src("src/assets/images/**", { base: "src" })
    .pipe(plugins.imagemin())
    .pipe(dest("dist"));
};

// 压缩字体
const font = () => {
  return src("src/assets/fonts/**", { base: "src" })
    .pipe(plugins.imagemin())
    .pipe(dest("dist"));
};

// 转换其他文件
const extra = () => {
  // 转换其他文件
  return src("public/**", { base: "public" }).pipe(dest("dist"));
};

// 服务任务
// 此时dist文件目录的样式指向node_modules，需要修改配置
const serve = () => {
  watch("src/assets/styles/*.scss", style);
  watch("src/assets/scripts/*.js", script);
  watch("src/*.html", page);

  // 开发阶段对图片、字体不构建，提高构建效率
  // watch('src/assets/images/**', image)
  // watch('src/assets/fonts/**', font)
  // watch('public/**', extra)

  // 文件变化后自动更新浏览器，浏览器重新发起请求
  watch(
    ["src/assets/images/**", "src/assets/fonts/**", "public/**"],
    bs.reload
  );

  bs.init({
    notify: false, // 关闭notify提示
    port: 8080, // 端口
    // open: false, // 是否自动打开浏览器
    files: "dist/**", // browserSync服务监听的路径通配符，文件发生改变自动刷新浏览器
    server: {
      baseDir: ["temp", "src", "public"], // 如果资源在dist找不到就到src找，还找不到就到public找
      routes: {
        // 优先于baseDir，请求发生后会先看routes是否有对应的配置，如果有就走routes配置，否则就走baseDir对应的文件
        "/node_modules": "node_modules", // 键是请求的前缀
      },
    },
  });
};

const useref = () => {
  return (
    src("temp/*.html", { base: "temp" })
      // 去除HTML文件构建注释、把构建注释的内容合并到一个文件中
      .pipe(plugins.useref({ searchPath: ["temp", "."] }))
      .pipe(plugins.if(/\.js$/, plugins.uglify())) // 压缩js
      .pipe(plugins.if(/\.css$/, plugins.cleanCss())) // 压缩css
      .pipe(
        plugins.if(
          /\.html$/,
          plugins.htmlmin({
            collapseWhitespace: true,
            minifyCSS: true, // 把html文件中的style压缩
            minifyJS: true, // 把script中的js压缩
          })
        )
      ) // 压缩html
      .pipe(dest("dist"))
  ); // 写入到另外一个文件，防止读、写同一个文件引发错乱
};

// 并行执行任务
const compile = parallel(style, script, page);

// 串行执行任务，上线前执行的任务
const build = series(
  clean,
  parallel(series(compile, useref), image, font, extra)
);

const develop = series(compile, serve);

module.exports = {
  clean,
  build,
  develop,
};

module.exports = require("zce-pages");

build: {
  src: 'src',
  dist: 'dist',
  temp: 'temp',
  public: 'public',
  paths: {
   styles: 'assets/styles/*.scss',
    scripts: 'assets/scripts/*.js',
    pages: '*.html',
    images: 'assets/images/**',
    fonts: 'assets/fonts/**'
 }
}

// %~dp0: 当前目录
@IF EXIST "%~dp0\node.exe" (
  "%~dp0\node.exe"  "%~dp0\..\gulp-cli\bin\gulp.js" %*
) ELSE (
  @SETLOCAL
  @SET PATHEXT=%PATHEXT:;.JS;=;%
  node  "%~dp0\..\gulp-cli\bin\gulp.js" %*
)

// 入口文件

// 参数cwd：告诉gulp工作目录是命令行所在的目录
process.argv.push("--cwd");
process.argv.push(process.cwd());

// gulpfile：告诉gulp gulpfile的目录
process.argv.push("--gulpfile");
process.argv.push(require.resolve(".."));
// require：载入模块
// resolve：找到模块所对应的路径；这里传递‘..’它会找到package.json中的bin字段对应的文件

require("gulp/bin/gulp");

// app/index.js

// 此文件为 Generator 的核心入口
// 需要导出一个继承自 Yeoman Generator 的类
// Yeoman Generator 在工作时会自动调用我们在此类型中定义的一些生命周期方法
// 我们在这些生命周期方法中通过调用父类提供的一些工具方法实现一些功能，例如文件写入

const Generator = require("yeoman-generator");

module.exports = class extends Generator {
  writing() {
    // Yeoman 自动在生成文件阶段调用此方法
    // 我们尝试往项目目录中写入文件
    this.fs.write(this.destinationPath("temp.txt"), Math.random().toString());
  }
};

module.exports = class extends Generator {
  writing() {
    // Yeoman 自动在生成文件阶段调用此方法
    // 通过模板方式写入文件到目标目录
    // 模板文件路径
    const tmpl = this.templatePath("foo.txt"); // 自动获取当前生成器下template目录下的文件路径
    // 输出目标路径
    const outPut = this.destinationPath("foo.txt");
    // 模板数据上下文
    const context = { title: "Hello zyh~", success: false };
    this.fs.copyTpl(tmpl, outPut, context);
  }
};

const Generator = require("yeoman-generator");

module.exports = class extends Generator {
  prompting() {
    // Yeoman 在询问用户环节会自动调用此方法
    // 在此方法中可以调用父类的 prompt() 方法发出对用户的命令行询问

    // 数组的每个元素都是一个问题（终端命令行交互）
    return this.prompt([
      {
        type: "input", // input:使用用户输入的方式
        name: "name", // value是最终得到结果的键（用户输入的值的键）
        message: "Your project name", // 终端界面给用户的提示（问题）
        default: this.appname, // 默认值，如果用户不输入则使用默认值，appname 为项目生成目录名称
      },
    ]).then((answers) => {
      // 用户交互选择的结果
      // answers => { name: 'user input value' }
      this.answers = answers;
    });
  }

  writing() {
    // Yeoman 自动在生成文件阶段调用此方法

    // 模板文件路径
    const tmp = this.templatePath("bar.html");
    //输出模板路径
    const outPut = this.destinationPath("bar.html");
    // 模板数据上下文
    const context = this.answers;
    this.fs.copyTpl(tmp, outPut, context);
  }
};

const Generator = require("yeoman-generator");

module.exports = class extends Generator {
  prompting() {
    return this.prompt([
      {
        type: "input",
        name: "name",
        message: "Your project name",
        default: this.appname,
      },
      {
        type: "list",
        name: "tool",
        choices: ["yarn", "npm"],
        message: "请选择版本管理工具",
        default: "yarn",
      },
    ]).then((answers) => {
      this.answers = answers;
    });
  }
  writing() {
    // 把每一个文件都通过模板转换到目标路径

    // templates目录下的模板文件相对路径
    const templates = [
      ".browserslistrc",
      ".editorconfig",
      ".env.development",
      ".env.production",
      ".eslintrc.js",
      ".gitignore",
      "babel.config.js",
      "package.json",
      "postcss.config.js",
      "README.md",
      "public/favicon.ico",
      "public/index.html",
      "src/App.vue",
      "src/main.js",
      "src/router.js",
      "src/assets/logo.png",
      "src/components/HelloWorld.vue",
      "src/store/actions.js",
      "src/store/getters.js",
      "src/store/index.js",
      "src/store/mutations.js",
      "src/store/state.js",
      "src/utils/request.js",
      "src/views/About.vue",
      "src/views/Home.vue",
    ];
    templates.forEach((item) => {
      const temp = this.templatePath(item);
      const outPut = this.destinationPath(this.answers.name + "/" + item);
      this.fs.copyTpl(temp, outPut, this.answers);
    });
  }

  // 进入项目目录，根据用户选择的管理工具安装依赖
  install() {
    const { name, tool } = this.answers;
    const npmDir = process.cwd() + "/" + name;
    process.chdir(npmDir);
    tool === "yarn" ? this.yarnInstall() : this.npmInstall();
    // this.installDependencies({
    //   bower: true,
    //   npm: true
    // })
  }
};

module.exports = (plop) => {
  // 第一个：生成器名字 第二个：生成器的配置选项
  plop.setGenerator("component", {
    description: `cretate a component`,
    prompts: [
      // 命令行问题
      {
        type: "input",
        name: "name",
        message: "component name",
        default: "MyComponent",
      },
      {
        type: "input",
        name: "path",
        message: "output path",
        default: "src/components",
      },
    ],
    // 完成命令行交互后，执行的一些动作
    actions: [
      {
        type: "add", // 代表添加文件
        path: "{{path}}/{{name}}/{{name}}.js", // 输出路径；name为上面命令行交互中得到的name值
        templateFile: "plop-templates/component.hbs", // 添加的文件的模板文件
      },
      {
        type: "add", // 代表添加文件
        path: "{{path}}/{{name}}/{{name}}.css", // name为上面命令行交互中得到的name值
        templateFile: "plop-templates/component.css.hbs", // 添加的文件的模板文件
      },
      {
        type: "add", // 代表添加文件
        path: "{{path}}/{{name}}/{{name}}.test.js", // name为上面命令行交互中得到的name值
        templateFile: "plop-templates/component.test.hbs", // 添加的文件的模板文件
      },
    ],
  });
};

const fs = require("fs");
const path = require("path");
const inquirer = require("inquirer");
const ejs = require("ejs");

inquirer
  .prompt([
    {
      // 命令行问题
      type: "input",
      name: "name",
      message: "Project name?",
    },
  ])
  .then((anwsers) => {
    // 用户回答
    // console.log(anwsers)
    // 根据用户回答的结果生成文件

    // 模板目录
    const tmplDir = path.join(__dirname, "templates");
    // 目标目录
    const destDir = process.cwd(); // 输出目录（命令行在那执行，就输出到哪个目录）
    // 将模板下的文件全部转换到目标目录
    fs.readdir(tmplDir, (err, files) => {
      if (err) throw err;
      files.forEach((file) => {
        // 通过模板引擎渲染文件
        ejs.renderFile(path.join(tmplDir, file), anwsers, (err, result) => {
          if (err) throw err;

          // 将结果写入目标文件路径
          fs.writeFileSync(path.join(destDir, file), result);
        });
      });
    });
  });

export default {
  input: "src/index.js",
  output: {
    file: "dist/bundle.js",
    format: "iife",
  },
};

import json from "@rollup/plugin-json";

export default {
  input: "src/index.js",
  output: {
    file: "dist/bundle.js",
    format: "iife",
  },
  plugins: [json()],
};
// index.js
// package.json 的属性会作为成员导出
import { name, version } from "../package";
console.log(name, version);