Answer the question
In order to leave comments, you need to log in
Why doesn't reload work after changing in scss?
GULP + WordPress
Reload not working... when making changes to scss on the page, the changes are not displayed
var syntax = 'scss', // выберете используемый синтаксис sass или scss, и перенастройте нужные пути в файле gulp.js и папки в вашего шаблоне wp
gulpversion = '4'; // Выберете обязателньо свою версию Gulp: 3 или 4
var gulp = require('gulp'),
autoprefixer = require('gulp-autoprefixer'),
browserSync = require('browser-sync'),
reload = browserSync.reload,
concat = require('gulp-concat'),
cache = require('gulp-cache'),
cleancss = require('gulp-clean-css'),
ftp = require('vinyl-ftp'),
imagemin = require('gulp-imagemin'),
notify = require('gulp-notify'),
pngquant = require('imagemin-pngquant'),
gutil = require('gulp-util' ),
rename = require('gulp-rename'),
rsync = require('gulp-rsync'),
sass = require('gulp-sass'),
uglify = require('gulp-uglify');
// Незабываем менять 'wp-gulp.loc' на свой локальный домен
gulp.task('browser-sync', function() {
browserSync.init({
proxy: "z.loc",
notify: false,
// open: false,
// tunnel: true,
// tunnel: "gulp-wp-fast-start", //Demonstration page: http://gulp-wp-fast-start.localtunnel.me
})
});
// Обьединяем файлы sass, сжимаем и переменовываем
gulp.task('styles', function() {
return gulp.src(['src/wp-content/themes/ninazvereva/sass/**/*.sass',
'src/wp-content/themes/ninazvereva/sass/**/*.scss'])
.pipe(sass({ outputStyle: 'expand' }).on("error", notify.onError()))
//.pipe(rename({ suffix: '.min', prefix : '' }))
.pipe(concat('style.min.css'))
.pipe(autoprefixer(['last 15 versions']))
.pipe(cleancss( {level: { 1: { specialComments: 0 } } })) // Opt., comment out when debugging
.pipe(gulp.dest('src/wp-content/themes/ninazvereva/css'))
.pipe(browserSync.stream());
});
// Обьединяем файлы скриптов, сжимаем и переменовываем
gulp.task('scripts', function() {
return gulp.src([ // Берем все необходимые библиотеки
'node_modules/jquery/dist/jquery.min.js', // Берем jQuery
'node_modules/bootstrap/dist/js/bootstrap.bundle.min.js', // Берем Bootstrap
'node_modules/slick-carousel/slick/slick.min.js',
'src/wp-content/themes/ninazvereva/js/fancybox/jquery.fancybox.pack.js',
'node_modules/bxslider/dist/jquery.bxslider.min.js'
])
.pipe(concat('libs.min.js'))
// .pipe(uglify()) // Mifify js (opt.)
.pipe(gulp.dest('src/wp-content/themes/ninazvereva/js'))
.pipe(browserSync.reload({ stream: true }))
});
// сжимаем картинки в папке images в шаблоне, и туда же возвращаем в готовом виде
gulp.task('imgmin-theme', function() {
return gulp.src('src/wp-content/themes/ninazvereva/img/**/*')
.pipe(cache(imagemin())) // Cache Images
.pipe(gulp.dest('src/wp-content/themes/ninazvereva/img'));
});
// сжимаем картинки в папке uploads, и туда же возвращаем в готовом виде
gulp.task('imgmin-uploads', function() {
return gulp.src('src/wp-content/uploads/**/*')
.pipe(cache(imagemin())) // Cache Images
.pipe(gulp.dest('src/wp-content/uploads'));
});
// Отгрузка всего сайта на хостинг
gulp.task('deploy-site', function() {
var conn = ftp.create({
host: '11.111.111.111', // or domain
user: 'user ftp',
password: 'password ftp',
parallel: 10,
log: gutil.log
});
var globs = [
'src/**', // Путь до готовой папки вашего сайта к отгрузки на хостинг
//'src/.htaccess',
];
return gulp.src(globs, {buffer: false})
.pipe(conn.dest('/www/domain.com/')); // Путь до папки сайта на хостинге
});
// Отгрузка только шаблона на хостинг
gulp.task('deploy-theme', function() {
var conn = ftp.create({
host: 'domen.ru', // or domain
user: 'user1',
password: '123',
parallel: 10,
log: gutil.log
});
var globs = [
'src/wp-content/themes/ninazvereva/**', // Путь до шаблона у вас на компьютере
];
return gulp.src(globs, {buffer: false})
.pipe(conn.dest('test/public_html/wp-content/themes/ninazvereva/')); // Путь до шаблона на хостинге
});
// Отгрузка или всего сайта, или какой то папки по SSH, настроите нужный путь сами
gulp.task('rsync', function() {
return gulp.src('src/**')
.pipe(rsync({
root: 'src/',
hostname: '[email protected]',
destination: 'www/domain.com/',
// include: ['*.htaccess'], // Hidden files to include in the deployment
recursive: true,
archive: true,
silent: false,
compress: true
}));
// Documentation: https://pinchukov.net/blog/gulp-rsync.html
});
if (gulpversion == 3) {
gulp.task('watch', ['styles', 'scripts', 'browser-sync'], function() {
gulp.watch(['src/wp-content/themes/twentyseventeen/assets/sass/**/*.sass'], ['styles']); // Наблюдение за sass файлами в папке sass в теме
gulp.watch(['src/wp-content/themes/twentyseventeen/assets/libs/**/*.js', 'src/wp-content/themes/twentyseventeen/assets/js/common.js'], ['scripts']); // Наблюдение за JS файлами js в теме
gulp.watch('src/wp-content/themes/twentyseventeen/**/*.php', browserSync.reload) // Наблюдение за sass файлами php в теме
});
gulp.task('default', ['watch']);
}
if (gulpversion == 4) {
gulp.task('watch', function() {
gulp.watch(['src/wp-content/themes/ninazvereva/sass/**/*.sass','src/wp-content/themes/ninazvereva/sass/**/*.scss'], gulp.parallel('styles'));// Наблюдение за sass файлами в папке sass в теме
gulp.watch('src/wp-content/themes/ninazvereva/js/common.js').on('change',reload); // Наблюдение за JS файлами в папке js
gulp.watch('src/wp-content/themes/ninazvereva/**/*.php').on('change',reload); // Наблюдение за sass файлами php в теме
});
gulp.task('default', gulp.parallel('styles', 'scripts', 'browser-sync', 'watch'));
}
Answer the question
In order to leave comments, you need to log in
Didn't find what you were looking for?
Ask your questionAsk a Question
731 491 924 answers to any question