如何使用 webpack 通过 gulp 任务打开 VueJS 的生产模式答案

【问题标题】：How to turn on production mode for VueJS with gulp task using webpack如何使用 webpack 通过 gulp 任务打开 VueJS 的生产模式
【发布时间】：2020-03-29 10:24:34
【问题描述】：

我已经像这样设置了我的 gulpfile.js：

'use strict';
const gulp = require('gulp');
const sass = require('gulp-sass');
const postcss = require('gulp-postcss');
const autoprefixer = require('autoprefixer');
const cssnano = require('cssnano');
const rename = require('gulp-rename');
const babel = require('gulp-babel');
const uglify = require('gulp-uglify');
const webpack = require('webpack-stream');
const plumber = require('gulp-plumber');
const notify = require('gulp-notify');
const scriptsPath = 'Scripts/**/*.js';
const stylesPath = 'Styles/**/*.scss';


gulp.task('js:prod', () => {
gulp.src(scriptsPath)
    // First process thru Webpack
    // setting the mode to 'production'
    .pipe(webpack({
        mode: 'production'
    }))
    // then transpile to ES5
    .pipe(babel({
        presets: ['@babel/env']
    }))
    // then minify and uglify
    .pipe(uglify())
    // rename the output file
    .pipe(rename('site.min.js'))
    // write output file to destination
    .pipe(gulp.dest('wwwroot/js'));
});

package.json 文件：

{
  "name": "myApp",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.0.0",
    "@babel/preset-env": "^7.0.0",
    "autoprefixer": "^9.1.3",
    "cssnano": "^4.1.0",
    "gulp": "^3.9.1",
    "gulp-babel": "^8.0.0-beta.2",
    "gulp-notify": "^3.2.0",
    "gulp-plumber": "^1.2.0",
    "gulp-postcss": "^8.0.0",
    "gulp-rename": "^1.4.0",
    "gulp-sass": "^4.0.1",
    "gulp-uglify": "^3.0.1",
    "webpack-stream": "^5.1.1"
  }
}

HTML：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>@ViewData["Title"] - MyApp</title>

    <link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap/dist/css/bootstrap.min.css" />
    <link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.css" />
    <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
    <link rel="stylesheet" href="~/css/site.min.css" asp-append-version="true" />

    <script src="https://unpkg.com/vue"></script>
    <script src="https://unpkg.com/babel-polyfill@latest/dist/polyfill.min.js"></script>
    <script src="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
    <div id="container">
        <main>
            @RenderBody()
        </main>
    </div>
        <script src="~/js/site.min.js" asp-append-version="true"></script>
</body>
</html>

在这个 gulp 管道之后，浏览器读取site.min.js 仍然在控制台中显示You are running Vue in development mode。

尝试在 Vue 部署中显示的操作：使用 Browserify，envify，但没有成功。我是新手，很快就会迷失在这个包裹里。我觉得我需要一些指导。这是缺少Webpack，而webpack-stream 还不够吗？

【问题讨论】：

你为什么不直接使用 vue-cli 来生成项目 - 无论你想做什么，你都会开箱即用，而且你将不再使用 gulp。
这是一个令人兴奋的项目，一切都已经设置好了

标签： javascript vue.js webpack gulp

【解决方案1】：

使用终端设置NODE_ENV这样

export NODE_ENV=production

你可以使用 echo 来检查这个设置是否正确

echo $NODE_ENV

【讨论】：

不明白，运行gulp任务前需要设置吗？如果其他人从源代码管理中获取项目，他们是否也必须对其进行设置？
是的。在运行 gulp 命令之前设置它。这个帮助我完成了我的一个旧项目。