gulp、webpack、package.json打包编译的相关内容exit 1 // 1. 有错退出 0. 正常退出

package.json相关
1. package的生命周期
2. pretest 预处理 pre执行任务之前
3. npm run env 查看环境变量
4. echo $LOGNAME 输出环境变量用$
5. config:{} 配置其他的环境变量 $npm_package_config_port
6. && 并行用来运行多个任务 & 是穿行
7. exit 1 // 1. 有错退出 0. 正常退出
8. npm-run-all --parallel test dev //管理多个任务
9. 一套完美的 script
```
- 'test': '' //测试服务
- 'start': '' //启动服务
- 'build': '' //编译
- 'docs': '' //文档的生成
- 'server:start': 'cross-env NODE_ENV=development supervisor ./app.js' 启动服务
- 'server:dev': 'cross-env NODE_ENV=development gulp' //开发的后端  编译后端
- 'server:prod': 'cross-env NODE_ENV=production gulp' //后端上线的js
- 'server:hint': 'cross-env NODE_ENV=hint gulp' //对js脚本进行校验
- 'client:dev': webpack--mode development //开发的前端
- 'client:prod': webpack--mode production //前端的上线
```
1. npm-run-all包简化任务, 方便管理多个任务直接写key即可添加参数--parallel 实现并行
2. scripty 包来美化, 清洁 package.json
  - 新建文件夹scripts 用来存放所有的shell脚本根据冒号来创建例如 scripts/server/start.sh
  - npm install--save -dev scripty
  - 将命令写入对应的shell脚本就可以了开头标注shell脚本#!/usr/bin/env sh
  - 修改package.json 例如 'server:start’:'scripty '
  - 修改权限 chmod a + x
检查80端口是否冲突

    base_port="80"
    check_port= `lsof -i:${base_port} | awk '{print $2}'` 
    while ["$check_port" != ""]
    do
        let base_port=base_port+1
        check_port= `lsof -i:${base_port}` 
    done
    echo ${base_port}

shelljs包用js 去书写shell 开头标注 #!/usr/bin/env node
gulp相关编译server
- 目标
  - 开发环境
  - 上线代码
  - 清晰流
  - 代码校验
- 实现的相关包以及坑
  1. gulp gulp-babel gulp-watch 进行编译
  2. @babel/plugin-transform-modules-commonjs 编译 import
  3. gulp-rollup (注意output: {format: 'cjs'}) rollup-plugin-replace
  4. 新建.eslintrc gulp-eslint
- 参考
  - 使用gulp 编译
  - gulpfile.js
    - npm install gulp gulp-babel gulp-watch @babel/plugin-transform-modules-commonjs --save-dev
    - npm install rollup-plugin-replace --save-dev
    - npm install gulp - eslint--save - dev

        const gulp = require("gulp");
        const gulp = require("gulp-babel");
        const watch = require("gulp-watch");
        const rollup = require("gulp-rollup");
        const replace = require("rollup-plugin-replace");
        const eslint = require("gulp-eslint");
        const entry = "./src/server/**/*.js";
        //需要清洗的代码
        const cleanEntry = "./src/server/config/index.js";
        //开发环境
        function builddev() {
            return watch(entry, {
                ignoreInitial: false
            }, function() {
                gulp.src(entry)
                    .pipe(babel({
                        //关闭外部的babelrc
                        babelrc: false,
                        "plugins": ["@babel/plugin-transform-modules-commonjs"]
                    }))
                    .pipe(gulp.dest('dist'))
            })
        }
        //上线环境
        function buildprod() {
            return gulp.src(entry)
                .pipe(babel({
                    //关闭外部的babelrc
                    babelrc: false,
                    ignore: ["./src/server/config/*.js"],
                    "plugins": ["@babel/plugin-transform-modules-commonjs"]
                }))
                .pipe(gulp.dest('dist'))
        }
        //清洗流
        function buildconfig() {
            return gulp.src(entry)
                // transform the files here.
                .pipe(rollup({
                    plugins: [
                        replace({
                            'process.env.NODE_ENV': JSON.stringify('production')
                        })
                    ],
                    output: {
                        format: 'cjs'
                    }
                    input: cleanEntry
                }))
                .pipe(gulp.dest('./dist'))
        }
        //代码校验
        function buildhint() {
            return gulp.src(entry)
                .pipe(eslint())
                .pipe(eslint.format())
                .pipe(eslint.failAfterError());
        }
        let build = gulp.series(builddev)
        if (process.env.NODE_ENV == "production") {
            build = gulp.series(buildhint, buildprod, buildconfig)
        }
        if (process.env.NODE_ENV == "hint") {
            build = gulp.series(buildhint)
        }

        gulp.task("default", build);

webpack相关处理web
1. npm install webpack webpack-cli -g --save-dev
2. 配置webpack.config.js
  - 新建文件夹 config 存放 webpack的配置
    - webpack.development.js
    - webpack.production.js
  - 根据不同的环境引入不同的js
    - process.argv 获取系统参数[执行环境, 执行命令位置, --mode, development]
    - yargs-parser 将数组转化为 { key: value}形式
    - webpack - merge 合并配置
  - 编译
  - views下根据路由创建对应的 HTML骨架
  - glob 找到所有的 * .entry.js -
  - 参考

    const argv = require("yargs-parser")(process.env.slice(2));
    const _mode = argv.mode || "development";
    const _mergeConfig = require( `./config/webpack.${_mode}.js` );
    const merge = require("webpack-merge");
    const glob = require("glob");
    const files = glob.sync("./src/web/views/**/*.entry.js");

    for (let item of files) {
        if (/.+\/([a-zA-Z]+-[a-zA-Z]+)(\.entry\.js$)/g.test(item) == true) {
            const entryKey = RegExp.$1;
            //html-plugin
            //注册插件  html-plugin 送到dist之前拦截 插入静态资源
        }
    }
    let _entry = {};

    let webpackConfig = {
        entry: _entry
    };

    module.exports = mrege(webpackConfig, _mergeConfig);

未完待续....