如何使用 webpack 打开带有 gulp 任务的 VueJS 的生产模式

Question

I've set up my gulpfile.js like this:我已经像这样设置了我的 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 file: 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: 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>

And after this gulp pipeline, browser reading site.min.js still shows You are running Vue in development mode in the console.并且在这个site.min.js管道之后，浏览器读取site.min.js仍然在控制台中显示You are running Vue in development mode 。

Tried doing things showed in Vue deployment: with Browserify, envify, but with no success.尝试过在Vue部署中显示的事情：使用Browserify，envify，但没有成功。 I'm new and get lost in this package hell quickly.我是新手，很快就会迷失在这个包裹地狱中。 I feel like I need some guidance.我觉得我需要一些指导。 Is this missing Webpack, and webpack-stream isn't enough?这是缺少Webpack，而webpack-stream 还不够吗？

Answer 1

Use the terminal to set the NODE_ENV like this使用终端像这样设置NODE_ENV

export NODE_ENV=production

You can check if this set correctly by using echo您可以使用 echo 检查此设置是否正确

echo $NODE_ENV

如何使用 webpack 打开带有 gulp 任务的 VueJS 的生产模式

问题描述

1 个解决方案

解决方案1
0 2020-03-29 13:02:31

如何使用 webpack 打开带有 gulp 任务的 VueJS 的生产模式

问题描述

1 个解决方案

解决方案1 0 2020-03-29 13:02:31

解决方案1
0 2020-03-29 13:02:31