Я настроил свой 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'));
});
пакет. 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 pipe чтение браузера site.min.js по-прежнему показывает You are running Vue in development mode в консоли.
Попытка сделать что-то показала в развертывании Vue: с Browserify, envify, но безуспешно , Я новичок и быстро теряюсь в этом пакете. Я чувствую, что мне нужно какое-то руководство. Это упущенный Webpack, а webpack-stream недостаточно?