Всем привет. Есть вот такой вот gulpfile (GULP4)
'use strict';
const gulp = require('gulp');
const gulpIf = require('gulp-if');
const pug = require('gulp-pug');
const browserSync = require('browser-sync').create();
const stylus = require('gulp-stylus');
const sourcemaps = require('gulp-sourcemaps');
const csscomb = require('gulp-csscomb');
const del = require('del');
const plumber = require("gulp-plumber");
const notify = require("gulp-notify");
const concat = require('gulp-concat');
const uglify = require('gulp-uglifyjs');
const spritesmith = require("gulp.spritesmith");
const svgSprite = require('gulp-svg-sprite');
const svgmin = require('gulp-svgmin');
const cheerio = require('gulp-cheerio');
const replace = require('gulp-replace');
const tinypng = require('gulp-tinypng');
const autoprefixer = require('gulp-autoprefixer');
var path = {
build: {
html: 'build/',
js: 'build/static/js/',
css: 'build/static/css/',
img: 'build/static/img/',
svg: 'build/static/img/svg/',
sprite: 'build/static/img/sprite/',
fonts: 'build/static/fonts/'
},
src: {
html: 'src/pug/pages/*.pug',
js: [
'src/static/js/*.js'
],
css: 'src/static/stylus/',
img: 'src/static/img/',
fonts: 'src/static/fonts/**/*.*'
},
watch: {
html: 'src/pug/**/*.pug',
js: 'src/static/js/**/*.js',
css: 'src/static/stylus/main.styl',
img: [
'src/static/img/**/*',
'!src/static/img/sprite/*',
'!src/static/img/svg/*'
],
svg: 'src/static/img/svg/*.svg',
sprite: 'src/static/img/sprite/*',
},
clean: './build'
};
gulp.task('serve', function() {
browserSync.init({
server: 'build'
})
browserSync.watch('build/**/*.*').on('change', browserSync.reload);
})
gulp.task('pug', function() {
return gulp.src(path.src.html)
.pipe(plumber())
.pipe(pug({
pretty: true
}))
.on("error", notify.onError(function(error) {
return "Message to the notifier: " + error.message;
}))
.pipe(gulp.dest(path.build.html));
});
gulp.task('scripts', function() {
return gulp.src([
// Библиотеки
'node_modules/svg4everybody/dist/svg4everybody.min.js'
])
.pipe(concat('libs.min.js'))
.pipe(uglify())
.pipe(gulp.dest(path.build.js));
});
gulp.task('styles', function() {
return gulp.src(path.watch.css)
.pipe(plumber())
.pipe(sourcemaps.init())
.pipe(stylus({
'include css': true
}))
.pipe(sourcemaps.write())
.on("error", notify.onError(function(error) {
return "Message to the notifier: " + error.message;
}))
.pipe(autoprefixer(['last 3 version']))
.pipe(csscomb())
.pipe(gulp.dest(path.build.css));
});
gulp.task('svg', function() {
return gulp.src(path.watch.svg)
.pipe(svgmin({
js2svg: {
pretty: true
}
}))
.pipe(cheerio({
run: function($) {
$('[fill]').removeAttr('fill');
$('[stroke]').removeAttr('stroke');
$('[style]').removeAttr('style');
},
parserOptions: { xmlMode: true }
}))
.pipe(replace('>', '>'))
.pipe(svgSprite({
mode: {
symbol: {
sprite: "sprite.svg"
}
}
}))
.pipe(gulp.dest(path.build.svg));
});
gulp.task('tinypng', function() {
return gulp.src(path.watch.img)
.pipe(tinypng('ZW8nIAmNF_pB0hlpyWMhqIdzhNC2KmaD'))
.pipe(gulp.dest(path.build.img));
});
gulp.task('cleansprite', function() {
return del.sync(path.src.img + 'sprite/sprite.png');
});
gulp.task('spritemade', function() {
var spriteData =
gulp.src(path.src.img + 'sprite/*.*')
.pipe(spritesmith({
imgName: 'sprite.png',
cssName: '_sprite.styl',
padding: 15,
cssFormat: 'stylus',
algorithm: 'binary-tree',
cssTemplate: 'stylus.template.mustache',
cssVarMap: function(sprite) {
sprite.name = 's-' + sprite.name;
}
}));
spriteData.img.pipe(gulp.dest(path.build.sprite));
spriteData.css.pipe(gulp.dest(path.src.css));
});
gulp.task('sprite', gulp.series(gulp.parallel('cleansprite', 'spritemade'), function() {
}));
gulp.task('clean', function() {
return del(path.clean);
});
gulp.task('fonts:build', function() {
return gulp.src(path.src.fonts)
.pipe(gulp.dest(path.build.fonts));
});
gulp.task('js:build', function() {
return gulp.src(path.src.js)
.pipe(gulp.dest(path.build.js));
});
gulp.task('watch', function() {
gulp.watch('src/static/stylus/**/*.styl', gulp.series('styles'));
gulp.watch(path.watch.html, gulp.series('pug'));
gulp.watch(path.src.js, gulp.series('scripts', gulp.parallel('js:build')));
gulp.watch(path.watch.svg, gulp.series('svg'));
gulp.watch(path.watch.sprite, gulp.series('sprite'));
})
gulp.task('build', gulp.series(
'clean',
gulp.parallel('styles', 'pug', 'scripts', 'svg', 'tinypng', 'fonts:build', 'js:build')))
gulp.task('default', gulp.series('build', gulp.parallel('watch', 'serve')));
Что-то непонятное происходит с компиляцие CSS. Сперва быстро. Через несколько сохранений - начинает думать по 4-6 секунд. Перезагружу gulp и вроде все нормльно опять. Как можно оптимизировать это?
Также буду благодарен, если подскажете как еще можно оптимизировать данный файл.
Заранее спасибо
Средний