Answer the question
In order to leave comments, you need to log in
Trouble updating to localhost /?
In general, browsersync has recently stopped working correctly. what is the point: there is an openserver, it has a host with a project on gulp, I launch a mirror host through gulp on localhost:3000, and I work. and the problem is this: I make changes to main.sass, it compiles and injects, everything is fine. after I remove the change made, everything is also displayed and everything is fine. but when you update the html file after all these actions, it rolls back the styles to the version with the change, and if you make changes to the html itself, it will display them, but with the style file applied with the change. what could be the problem, please? gulp file:
var gulp = require('gulp'), // Подключаем Gulp
sass = require('gulp-sass'), //Подключаем Sass пакет,
browserSync = require('browser-sync').create(), // Подключаем Browser Sync
concat = require('gulp-concat'), // Подключаем gulp-concat (для конкатенации файлов)
uglify = require('gulp-uglifyjs'), // Подключаем gulp-uglifyjs (для сжатия JS)
cssnano = require('gulp-cssnano'), // Подключаем пакет для минификации CSS
rename = require('gulp-rename'), // Подключаем библиотеку для переименования файлов
del = require('del'), // Подключаем библиотеку для удаления файлов и папок
imagemin = require('gulp-imagemin'), // Подключаем библиотеку для работы с изображениями
pngquant = require('imagemin-pngquant'), // Подключаем библиотеку для работы с png
cache = require('gulp-cache'), // Подключаем библиотеку кеширования
autoprefixer = require('gulp-autoprefixer'),// Подключаем библиотеку для автоматического добавления префиксов
plumber = require('gulp-plumber');
gulp.task('sass', function(){ // Создаем таск Sass
return gulp.src('app/sass/**/*.sass') // Берем источник
.pipe(sass().on('error', sass.logError))
.pipe(sass()) // Преобразуем Sass в CSS посредством gulp-sass
.pipe(autoprefixer(['last 15 versions', '> 1%', 'ie 8', 'ie 7'], { cascade: true })) // Создаем префиксы
.pipe(gulp.dest('app/css')) // Выгружаем результата в папку app/css
.pipe(browserSync.reload({stream: true})); // ОбновляемCSS на странице при изменении
});
gulp.task('browser-sync', function() { // Создаем таск browser-sync
browserSync.init({ // Выполняем browserSync
proxy: "ershov.mihail",
notify: false
});
});
gulp.task('scripts', function() {
return gulp.src([ // Берем все необходимые библиотеки
'app/libs/jquery/dist/jquery.min.js' // Берем jQuery
])
.pipe(concat('libs.min.js')) // Собираем их в кучу в новом файле libs.min.js
.pipe(uglify()) // Сжимаем JS файл
.pipe(gulp.dest('app/js')); // Выгружаем в папку app/js
});
gulp.task('css', function() {
return gulp.src([
'app/libs/flexboxgrid/css/flexboxgrid.min.css'
])
.pipe(concat('libs.min.css'))
.pipe(cssnano())
.pipe(gulp.dest('app/css'));
});
gulp.task('watch', ['browser-sync', 'scripts', 'css'], function() {
gulp.watch('app/sass/**/*.sass', ['sass']); // Наблюдение за sass файлами в папке sass
gulp.watch('app/*.html').on('change', browserSync.reload); // Наблюдение за HTML файлами в корне проекта
gulp.watch('app/js/**/*.js').on('change', browserSync.reload); // Наблюдение за JS файлами в папке js
gulp.watch('app/**/*.php').on('change', browserSync.reload); // Наблюдение на PHP файлами
});
gulp.task('clean', function() {
return del.sync('dist'); // Удаляем папку dist перед сборкой
});
gulp.task('img', function() {
return gulp.src('app/img/**/*') // Берем все изображения из app
.pipe(cache(imagemin({ // Сжимаем их с наилучшими настройками с учетом кеширования
interlaced: true,
progressive: true,
svgoPlugins: [{removeViewBox: false}],
use: [pngquant()]
})))
.pipe(gulp.dest('dist/img')); // Выгружаем на продакшен
});
gulp.task('build', ['clean', 'img', 'sass', 'scripts'], function() {
var buildCss = gulp.src([ // Переносим библиотеки в продакшен
'app/css/*.css'
])
.pipe(gulp.dest('dist/css'));
var buildFonts = gulp.src('app/fonts/**/*') // Переносим шрифты в продакшен
.pipe(gulp.dest('dist/fonts'));
var buildJs = gulp.src('app/js/**/*') // Переносим скрипты в продакшен
.pipe(gulp.dest('dist/js'));
var buildHtml = gulp.src('app/*.html') // Переносим HTML в продакшен
.pipe(gulp.dest('dist'));
});
gulp.task('clear', function (callback) {
return cache.clearAll();
});
gulp.task('default', ['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