npm、webpack、gulp多项目自动化构建、部署

多个不同的项目，可能共用一些组件或方法时，不需重新创建多个目录，初始化多个项目，减少重复操作。

文件结构

--build #用于构建的相关文件
    |--build.js
    |--gulpfile.js
    |--utils.js
    |--vue-loader.js
    |--webpack.base.js
    |--webpack.dev.js
    |--webpack.prod.js
--dist # 各个项目打包后的文件夹
    |--project1
--public #各个项目公共需要的内容
	|--assets
	    |--images
	|--components
    |--utils
        |--request.js
--src #各个项目的源代码
    |--project1
         |--main.js #项目入口
         |--config.js #可以作为各个项目单独的配置文件
    |--project2
--build.bat # 构建打包
--dev.bat # 启动某应用开发命令
--install.bat # 安装依赖
--new.bat # 创建新应用
--package.json
# 还有.babelrc、.eslintignore、.eslintrc

配置启动指令

{
   
  "name": "name",
  "version": "0.1.0",
  "description": "description",
  "scripts": {
   
    "dev": "cross-env NODE_ENV=development webpack-dev-server --inline --progress --config build/webpack.dev.js",
    "build": "cross-env NODE_ENV=production node build/build.js"
  },
  "author": "heartcnc<heartcnc@163.com>",
  "license": "MIT",
  "dependencies": {
   },
  "devDependencies": {
   
  },
  "engines": {
   
    "node": ">= 6.0.0",
    "npm": ">= 3.0.0"
  }
}

配置bat脚本

安装依赖

@echo off

@REM 安装依赖包

@REM 指令 ./install

npm i --registry=https://registry.npm.taobao.org

使用方法：./install

创建项目

@echo off

@REM 创建项目

@REM 指令 ./new project_name

set project=%1
set dirname=src\%project%

echo * Craete Project [<