В общем новый конфиг 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