[DEP_WEBPACK_COMPILATION_ASSETS] DeprecationWarning: Compilation.assets will be frozen in future, all modifications are deprecated.
BREAKING CHANGE: No more changes should happen to Compilation.assets after sealing the Compilation.
Do changes to assets earlier, e. g. in Compilation.hooks.processAssets.
Make sure to select an appropriate stage from
Compilation.PROCESS_ASSETS_STAGE_*. (Use `node --trace-deprecation ...` to show where the warning was created){
"name": "mau0hezzz-start",
"version": "3.0.0",
"description": "Start template with Gulp and Webpack",
"author": "",
"private": true,
"license": "",
"type": "module",
"scripts": {
"dev": "gulp && webpack serve --progress -c config/webpack.dev.js",
"build": "gulp build --build",
"sprite": "gulp sprite",
"fonts": "gulp fonts --rewrite",
"deploy": "gulp deployFTP --build",
"zip": "gulp deployZIP --build",
"devbuild": "gulp build --build --nowebp",
"tmp": "gulp -f gulpfile.tmp.js",
"bem": "fls-bemtree-from-html"
},
"devDependencies": {
"copy-webpack-plugin": "latest",
"css-loader": "latest",
"del": "latest",
"file-include-webpack-plugin-replace": "latest",
"fls-bemtree-from-html": "^1.0.0",
"gulp": "latest",
"gulp-autoprefixer": "latest",
"gulp-clean-css": "latest",
"gulp-file-include": "latest",
"gulp-fonter-fix": "latest",
"gulp-group-css-media-queries": "latest",
"gulp-if": "latest",
"gulp-imagemin": "latest",
"gulp-newer": "latest",
"gulp-notify": "latest",
"gulp-plumber": "latest",
"gulp-prettier": "latest",
"gulp-rename": "latest",
"gulp-svg-sprite": "latest",
"gulp-ttf2woff": "latest",
"gulp-ttf2woff2": "latest",
"gulp-util": "latest",
"gulp-version-number": "latest",
"gulp-webp": "latest",
"gulp-webp-html-nosvg": "latest",
"gulp-webpcss": "latest",
"gulp-zip": "latest",
"html-webpack-plugin": "latest",
"inputmask": "latest",
"lightgallery": "latest",
"load-plugins": "latest",
"mini-css-extract-plugin": "latest",
"nouislider": "latest",
"pug": "latest",
"pug-loader": "latest",
"sass": "latest",
"sass-loader": "latest",
"smooth-scroll": "latest",
"string-replace-loader": "latest",
"style-loader": "latest",
"swiper": "latest",
"terser-webpack-plugin": "latest",
"tippy.js": "latest",
"transform-runtime": "0.0.0",
"vanilla-lazyload": "latest",
"vinyl-ftp": "latest",
"webp-converter": "2.2.3",
"webpack": "latest",
"webpack-cli": "latest",
"webpack-dev-server": "latest",
"webpack-stream": "latest"
},
"dependencies": {
"simplebar": "latest"
}
}import fs from 'fs';
import FileIncludeWebpackPlugin from 'file-include-webpack-plugin-replace';
import HtmlWebpackPlugin from 'html-webpack-plugin';
import CopyPlugin from "copy-webpack-plugin";
import * as path from 'path';
const srcFolder = "src";
const builFolder = "dist";
const rootFolder = path.basename(path.resolve());
let pugPages = fs.readdirSync(srcFolder).filter(fileName => fileName.endsWith('.pug'))
let htmlPages = [];
if (!pugPages.length) {
htmlPages = [new FileIncludeWebpackPlugin({
source: srcFolder,
htmlBeautifyOptions: {
"indent-with-tabs": true,
'indent_size': 3
},
replace: [
{ regex: '<link rel="stylesheet" href="css/style.min.css">', to: '' },
{ regex: '../img', to: 'img' },
{ regex: '@img', to: 'img' },
{ regex: 'NEW_PROJECT_NAME', to: rootFolder }
],
})];
}
const paths = {
src: path.resolve(srcFolder),
build: path.resolve(builFolder)
}
const config = {
mode: "development",
devtool: 'inline-source-map',
optimization: {
minimize: false
},
entry: [
`${paths.src}/js/app.js`
],
output: {
path: `${paths.build}`,
filename: 'js/app.min.js',
publicPath: '/'
},
devServer: {
historyApiFallback: true,
static: paths.build,
open: true,
compress: true,
port: 'auto',
hot: true,
host: 'local-ip',
// Расскоментировать на слабом ПК
devMiddleware: {
writeToDisk: true,
},
watchFiles: [
`${paths.src}/**/*.html`,
`${paths.src}/**/*.pug`,
`${paths.src}/**/*.htm`,
`${paths.src}/img/**/*.*`
],
},
module: {
rules: [
{
test: /\.(scss|css)$/,
exclude: `${paths.src}/fonts`,
use: [
'style-loader',
{
loader: 'string-replace-loader',
options: {
search: '@img',
replace: '../img',
flags: 'g'
}
}, {
loader: 'css-loader',
options: {
sourceMap: true,
importLoaders: 1,
modules: false,
url: {
filter: (url, resourcePath) => {
if (url.includes("img/") || url.includes("fonts/")) {
return false;
}
return true;
},
},
},
}, {
loader: 'sass-loader',
options: {
sourceMap: true,
}
}
],
}, {
test: /\.pug$/,
use: [
{
loader: 'pug-loader'
}, {
loader: 'string-replace-loader',
options: {
search: '@img',
replace: 'img',
flags: 'g'
}
}
]
}
],
},
plugins: [
...htmlPages,
...pugPages.map(pugPage => new HtmlWebpackPlugin({
minify: false,
template: `${srcFolder}/${pugPage}`,
filename: `${pugPage.replace(/\.pug/, '.html')}`
})),
new CopyPlugin({
patterns: [
{
from: `${srcFolder}/img`, to: `img`,
noErrorOnMissing: true,
force: true
}, {
from: `${srcFolder}/files`, to: `files`,
noErrorOnMissing: true,
force: true
}, {
from: `${paths.src}/favicon.ico`, to: `./`,
noErrorOnMissing: true
}
],
}),
],
resolve: {
alias: {
"@scss": `${paths.src}/scss`,
"@js": `${paths.src}/js`,
"@img": `${paths.src}/img`
},
},
}
export default config;// Импорт основного модуля
import gulp from "gulp";
// Импорт общих плагинов
import { plugins } from "./config/gulp-plugins.js";
// Импорт путей
import { path } from "./config/gulp-settings.js";
// Передаем значения в глобальную переменную
global.app = {
isBuild: process.argv.includes('--build'),
isDev: !process.argv.includes('--build'),
isWebP: !process.argv.includes('--nowebp'),
isFontsReW: process.argv.includes('--rewrite'),
gulp: gulp,
path: path,
plugins: plugins
}
// Импорт задач
import { reset } from "./config/gulp-tasks/reset.js";
import { html } from "./config/gulp-tasks/html.js";
import { css } from "./config/gulp-tasks/css.js";
import { js } from "./config/gulp-tasks/js.js";
import { jsDev } from "./config/gulp-tasks/js-dev.js";
import { images } from "./config/gulp-tasks/images.js";
import { ftp } from "./config/gulp-tasks/ftp.js";
import { zip } from "./config/gulp-tasks/zip.js";
import { sprite } from "./config/gulp-tasks/sprite.js";
import { gitignore } from "./config/gulp-tasks/gitignore.js";
import { otfToTtf, ttfToWoff, fonstStyle } from "./config/gulp-tasks/fonts.js";
// Последовательная обработака шрифтов
const fonts = gulp.series(reset, otfToTtf, ttfToWoff, fonstStyle);
// Основные задачи будем выполнять параллельно после обработки шрифтов
const devTasks = gulp.parallel(fonts, gitignore);
// Основные задачи будем выполнять параллельно после обработки шрифтов
const buildTasks = gulp.series(fonts, jsDev, js, gulp.parallel(html, css, images, gitignore));
// Экспорт задач
export { html }
export { css }
export { js }
export { jsDev }
export { images }
export { fonts }
export { sprite }
export { ftp }
export { zip }
// Построение сценариев выполнения задач
const development = gulp.series(devTasks);
const build = gulp.series(buildTasks);
const deployFTP = gulp.series(buildTasks, ftp);
const deployZIP = gulp.series(buildTasks, zip);
// Экспорт сценариев
export { development }
export { build }
export { deployFTP }
export { deployZIP }
// Выполнение сценария по умолчанию
gulp.task('default', development);
Простой
Средний
Сложный
Средний
