@bulkmaker

В новом конфиге gulp не работает autopload сгенерированных файлов, почему?

В общем новый конфиг gulpfile.js
let preprocessor = 'sass', // Preprocessor (sass, less, styl); 'sass' also work with the Scss syntax in blocks/ folder.
		fileswatch   = 'html,htm,txt,json,md,woff2,svg' // List of files extensions for watching & hard reload

const { src, dest, parallel, series, watch } = require('gulp')
const browserSync  = require('browser-sync').create()
const bssi         = require('browsersync-ssi')
const ssi          = require('ssi')
const webpack      = require('webpack-stream')
const sass         = require('gulp-sass')
const sassglob     = require('gulp-sass-glob')
const stylglob     = require("gulp-empty")
const cleancss     = require('gulp-clean-css')
const autoprefixer = require('gulp-autoprefixer')
const rename       = require('gulp-rename')
const newer        = require('gulp-newer')
const sourcemaps   = require('gulp-sourcemaps')
const svgSprite    = require('gulp-svg-sprite')
const del          = require('del');

function svgsprite() {
	return src('assets/svg/*.svg') // svg files for sprite
	.pipe(svgSprite({
			mode: {
				stack: {
					sprite: "../sprite.svg"  //sprite file name
				}
			},
		}
	))
	.pipe(dest('assets'));
}
function browsersync() {
	browserSync.init({
        proxy: "site.ru/",
		notify: false,		
        reloadDelay: 1500,
	})
}
function scripts() {
	return src(['assets/js/*.js', '!assets/js/*.min.js'])
		.pipe(webpack({
			mode: 'production',
			module: {
				rules: [
					{
						test: /\.(js)$/,
						exclude: /(node_modules)/,
						loader: 'babel-loader',
						query: {
							presets: ['@babel/env'],
							plugins: ['babel-plugin-root-import']
						}
					}
				]
			}
		})).on('error', function handleError() {
			this.emit('end')
		})
		.pipe(rename('app.min.js'))
		.pipe(dest('assets/js'))
		.pipe(browserSync.stream())
}

function styles() {
	return src([`assets/styles/sass/*.sass`, `!assets/styles/sass/_*.sass`])
		.pipe(sourcemaps.init())
		.pipe(eval(`sassglob`)())
		.pipe(eval(preprocessor)())
		.pipe(autoprefixer({ overrideBrowserslist: ['last 10 versions'], grid: true }))
		.pipe(cleancss({ level: { 1: { specialComments: 0 } },/* format: 'beautify' */ }))
		.pipe(rename({ suffix: ".min" }))
		.pipe(sourcemaps.write(''))
		.pipe(dest('assets/css'))
		.pipe(browserSync.stream())
}

function startwatch() {
	watch(`assets/styles/sass/**/*.sass`, { usePolling: true }, styles)
	watch(['assets/js/**/*.js', '!assets/js/**/*.min.js'], { usePolling: true }, scripts)
	watch('assets/svg/*.svg}', { usePolling: true }, svgSprite)
	watch(`core/elements/**/*.tpl`, { usePolling: true }).on('change', browserSync.reload)
}
exports.svgSprite = svgSprite
exports.scripts = scripts
exports.styles  = styles
exports.assets  = series(scripts, styles, )
exports.default = series(scripts, styles, svgsprite, parallel(browsersync, startwatch))

в неём в phpstorm не работает autoupload для сгенерированных css файлов. Он срабатывает только когда по вкладкам пощёлкаешь . В версиях 2020 2019 2018.
а вот старый код
var gulp = require('gulp'),
    sass = require('gulp-sass'),
    browserSync = require('browser-sync'),
    cleancss = require('gulp-clean-css'),
    rename = require('gulp-rename'),
    autoprefixer = require('gulp-autoprefixer'),
    notify = require('gulp-notify'),
	svgSprite = require('gulp-svg-sprite'),
    sourcemaps = require('gulp-sourcemaps');
// Local Server
gulp.task('browser-sync', function () {
    browserSync.init({
        proxy: "site.ru",
		https: true,
        reloadDelay: 1000,
        notify: false
    });
});

gulp.task('svgSprite', function () {
	return gulp.src('assets/svg/*.svg') // svg files for sprite
		.pipe(svgSprite({
				mode: {
					stack: {
						sprite: "../sprite.svg"  //sprite file name
					}
				},
			}
		))
		.pipe(gulp.dest('assets'));
});
// Sass|Scss Styles
gulp.task('styles', function () {
    return gulp.src('assets/sass/**/*.sass')
        .pipe(sourcemaps.init())
        .pipe(sass({outputStyle: 'expanded'}).on("error", notify.onError()))
        .pipe(rename({suffix: '.min', prefix: ''}))
        .pipe(autoprefixer(['last 15 versions']))
        .pipe(cleancss({level: {1: {specialComments: 0}}})) // Opt., comment out when debugging
        .pipe(sourcemaps.write(''))
        .pipe(gulp.dest('assets/css'))
        .pipe(browserSync.reload({stream: true}))
});
// HTML Live Reload
gulp.task('code', function () {
    return gulp.src('assets/*.html')
        .pipe(browserSync.reload({stream: true}))
});
gulp.task('watch', function () {
    gulp.watch('assets/sass/**/*.sass', gulp.parallel('styles'));
	gulp.watch('assets/svg/**/*.svg', gulp.parallel('svgSprite'));
    gulp.watch('core/elements/**/*.tpl').on('change', browserSync.reload)

});
gulp.task('default', gulp.parallel('styles', 'svgSprite', 'browser-sync', 'watch'));

тут все работает и не надо щёлкать по вкладкам

Оба конфига на базе optimizedHtml от WebDesignMaster
  • Вопрос задан
  • 37 просмотров
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы