Как оптимизировать работу gulpfile?

Всем привет. Есть вот такой вот 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 и вроде все нормльно опять. Как можно оптимизировать это?

Также буду благодарен, если подскажете как еще можно оптимизировать данный файл.

Заранее спасибо
  • Вопрос задан
  • 957 просмотров
Решения вопроса 2
alvvi
@alvvi
export default apathy;
Что-то непонятное происходит с компиляцие CSS. Сперва быстро. Через несколько сохранений - начинает думать по 4-6 секунд. Перезагружу gulp и вроде все нормльно опять. Как можно оптимизировать это?


Часто встречающаяся проблема, несколько решений можно найти тут, мне лично помогло отключение atomic_save в Саблайме.

Также буду благодарен, если подскажете как еще можно оптимизировать данный файл.

1) Вынести таски в отдельные файлы, и подключать их только при вызове.
2) То же самое с плагинами, gulp-load-plugins в помощь
3) Использовать ES6 стрелочные функции
Пример из вашего же файла:
gulp.task('clean', function() {
    return del(path.clean);
});

Можно переписать как: gulp.task( 'clean', () => del(path.clean) );

В целом, можете взглянуть на эти прекрасные репозитории: bemgo, cssr
(ну или на мой ужасный)
Ответ написан
nikolayshabalin
@nikolayshabalin
Автор профессиональных курсов в HTML Academy
Присоединяюсь к товарищу сверху. Дельные советы. Конкретно по проблеме ничего сказать не могу, т.к. не ставлкивался с таким, но есть пару моментов, которые можно "с оптимизировать".

1. У Вас в styles таске, есть csscomb. Зачем вам пересобирать правила в компилруемом CSS? Вы часто в готовый CSS файл заглядываете? И так ли Вам это нужно? Вот например в исходниках, в .styl файлах я бы это ещё мог понять, а так лишние машиноресурсы тратятся.

2. В scripts Вы постоянно запускаете минификацию. Минификация нужна для продакшена, во время разработки она не нужна.

3. Pug скорее всего у Вас тоже не быстро собирается, посмотрите в pug inheritance. А лучше , и плагин прочтите статьюemitty

4. Почитайте доку галпа, чтобы понимать как это всё работает. Если лень, то курсы Кантора. Он там и про `cached` рассказывает и про `changed`. Также у него на курсе `стилус`.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

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

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