Добрый день.
Я работаю с сайтами на wordrpess.
Есть gulp файл, где настроил и работу с webpack.
'use strict';
const gulp = require('gulp');
const webpack = require('webpack-stream');
const sass = require('gulp-sass');
const autoprefixer = require('gulp-autoprefixer');
const sourcemaps = require('gulp-sourcemaps');
const plumber = require('gulp-plumber');
const wait = require('gulp-wait'),
notify = require('gulp-notify');
const browserSync = require('browser-sync');
const log = require('fancy-log');
let isDev = true;
let webpackConfig = {
output: {
filename: 'webpack.js',
},
watch: false,
module: {
rules: [
{
test: /\.m?js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: [
[
'@babel/preset-env',
{
debug: true,
corejs: 3,
useBuiltIns: 'usage',
},
],
],
},
},
},
],
},
mode: isDev ? 'development' : 'production',
devtool: isDev ? 'eval-source-map' : 'none',
};
gulp.task('webpack', function () {
return gulp
.src('assets/js/src/main.js')
.pipe(webpack(webpackConfig))
.pipe(gulp.dest('assets/js/dist/'))
.pipe(browserSync.stream());
});
gulp.task('scss', function () {
return gulp
.src('assets/scss/my.scss')
.pipe(plumber())
.pipe(sourcemaps.init())
.pipe(wait(500))
.pipe(
sass().on(
'error',
notify.onError(function (error) {
return (
'An error occurred while compiling sass.\nLook in the console for details.\n' +
error
);
})
)
)
.pipe(
autoprefixer({
cascade: false,
})
)
.pipe(sourcemaps.write('.'))
.pipe(gulp.dest('assets/css/'))
.pipe(browserSync.stream());
});
gulp.task('watch', function () {
browserSync.init({
proxy: {
target: 'https://new2.bludelego.it',
ws: true,
},
reloadDelay: 2000,
notify: true,
open: false,
});
gulp.watch('**/*.html').on('change', browserSync.reload);
gulp.watch('**/*.php').on('change', browserSync.reload);
gulp.watch('**/*.css').on('change', browserSync.reload);
gulp.watch('assets/js/dist/webpack.js').on('change', browserSync.reload);
gulp.watch('assets/js/custom-jquery.js').on('change', browserSync.reload);
gulp.watch('assets/scss/**/*.scss', gulp.series('scss'));
gulp.watch('assets/js/src/**/*.js', gulp.series('webpack'));
});
gulp.task('default', gulp.series('webpack', 'scss', gulp.parallel('watch')));
После сохранение файла, идет отправка на сервер по ftp, после чего перезаргужается страница.
На самом деле, страница перезагружается через delay, например 2 sec.
И возникает проблема, что на сервере код прописывается не до конца в scss или js файлах, которые работают через webpack.
Например.
.benefits__title {
font-weight: no;
}
Или если отправляю js файл, то ошибка "unexpected token" в webpack.
Чтобы исправить, приходится менять что-нибудь в css или js файл, это жутко неудобно.
Может кто столкнулся с такой проблемой?
И еще, сайты на сервере в связке с cloudflare.
Может из-за этого проблема?
Заранее благодарен.