A
A
Alexander Yank2016-10-11 11:38:47
gulp.js
Alexander Yank, 2016-10-11 11:38:47

What causes the speed of the gulp collector to drop after 20 minutes for a while?

There were no problems on small projects. The problems started after large projects (layout), after 20 - 30 minutes it starts to transform for a long time, which is why I wait a long time until changes appear in the browser. This is my gulpfile.js (collected bit by bit from different sources):

'use strict';

var gulp = require('gulp'),
    imagemin = require('gulp-imagemin'),
    autoprefixer = require('gulp-autoprefixer'),
    uglify = require('gulp-uglify'),
    sass = require('gulp-sass'),
    sourcemaps = require('gulp-sourcemaps'),
    rigger = require('gulp-rigger'),
    browserSync = require('browser-sync'),
    cleanCSS = require('gulp-clean-css'),
    watch = require('gulp-watch'),
    newer = require('gulp-newer'),
    rename = require('gulp-rename'),
    svgSprite = require('gulp-svg-sprites'),
    svgmin = require('gulp-svgmin'),
    cheerio = require('gulp-cheerio'),
    replace = require('gulp-replace'),
    create = browserSync.create(),
    reload = browserSync.reload;

var path = {
        build: { //Тут мы укажем куда складывать готовые после сборки файлы
            html: './build/',
            js: './build/js/',
            css: './build/css/',
            img: './build/img/',
            maps: '../maps/',
            fonts: './build/fonts/'
        },
        src: { //Пути откуда брать исходники
            html: './src/*.html', //Синтаксис src/*.html говорит gulp что мы хотим взять все файлы с расширением .html
            js: './src/js/*.js',//В стилях и скриптах нам понадобятся только main файлы
            style: './src/style/*.scss',
            img: './src/img/**/*.*', //Синтаксис img/**/*.* означает - взять все файлы всех расширений из папки и из вложенных каталогов
            fonts: './src/fonts/**/*.*'
        },
        watch: { //Тут мы укажем, за изменением каких файлов мы хотим наблюдать
            html: './src/**/*.html',
            js: './src/js/**/*.js',
            style: './src/style/**/*.scss',
            img: './src/img/**/*.*',
            fonts: './src/fonts/**/*.*'
        },
        clean: './build'
    },
    config = {
        server: {
            baseDir: "./build"
        },
        tunnel: false,
        host: 'localhost',
        port: 9005,
        logPrefix: "frontend",
        devBaseUrl: 'http://localhost'
    };

gulp.task('webserver', function () {
    browserSync(config);
});

gulp.task('clean', function (cb) {
    rimraf(path.clean, cb);
});

gulp.task('html:build', function () {
    gulp.src(path.src.html) //Выберем файлы по нужному пути
        .pipe(rigger()) //Прогоним через rigger
        .pipe(gulp.dest(path.build.html))
        .pipe(reload({stream: true})); //И перезагрузим наш сервер для обновлений*/
});

gulp.task('img:build', function (cb) {
    gulp.src(path.src.img) //Выберем файлы по нужному пути
        .pipe(newer(path.build.img))
        .pipe(imagemin())
        .pipe(gulp.dest(path.build.img))//Выплюнем их в папку build
        .pipe(reload({stream: true})); //И перезагрузим сервер
});

gulp.task('js:build', function () {
    gulp.src(path.src.js) //Найдем наш main файл
        .pipe(rigger()) //Прогоним через rigger
        .pipe(uglify()) //Сожмем наш js
        .pipe(gulp.dest(path.build.js)) //Выплюнем готовый файл в build
        .pipe(reload({stream: true})); //И перезагрузим сервер
});

gulp.task('style:build', function () {
    gulp.src(path.src.style) //Выберем наш main.scss
        .pipe(sourcemaps.init())
        .pipe(sass({
            outputStyle: 'expanded'
        }).on('error', sass.logError)) //Скомпилируем
        .pipe(gulp.dest(path.build.css)) //И в build
        .pipe(rename({
            prefix: "",
            suffix: ".min",
            extname: ".css"
        }))
        .pipe(autoprefixer()) //Добавим вендорные префиксы
        .pipe(cleanCSS({debug: true}, function (details) {//Сожмем
            console.log(details.name + ': ' + details.stats.originalSize);
            console.log(details.name + ': ' + details.stats.minifiedSize);
        }))
        .pipe(sourcemaps.write(path.build.maps, {
            addComment: true
        }))
        .pipe(gulp.dest(path.build.css)) //И в build
        .pipe(reload({stream: true}));
});

gulp.task('fonts:build', function () {
    gulp.src(path.src.fonts)
        .pipe(gulp.dest(path.build.fonts))
});

gulp.task('build', [
    'html:build',
    'js:build',
    'style:build',
    'fonts:build',
    'img:build'
]);

gulp.task('watch', function () {
    watch([path.watch.html], function (event, cb) {
        gulp.start('html:build');
    });
    watch([path.watch.style], function (event, cb) {
        gulp.start('style:build');
    });
    watch([path.watch.js], function (event, cb) {
        gulp.start('js:build');
    });
    watch([path.watch.fonts], function (event, cb) {
        gulp.start('fonts:build');
    });
    watch([path.watch.img], function (event, cb) {
        gulp.start('img:build');
    });
});

gulp.task('default', ['build', 'webserver', 'watch']);

My package.json
{
      "name": "frontend",
      "version": "1.0.0",
      "description": "Gulp frontend",
      "main": "gulpfile.js",
      "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1"
      },
      "repository": {
        "type": "git",
        "url": ""
      },
      "author": "Alex Lenk",
      "license": "MIT",
      "bugs": {
        "url": ""
      },
      "homepage": "",
      "devDependencies": {
        "bower-installer": "^1.*",
        "browser-sync": "^2.*",
        "gulp": "^3.*",
        "gulp-autoprefixer": "^3.*",
        "gulp-cheerio": "^0.*",
        "gulp-clean-css": "^2.*",
        "gulp-htmlmin": "^2.*",
        "gulp-imagemin": "^3.*",
        "gulp-newer": "^1.*",
        "gulp-rename": "^1.*",
        "gulp-replace": "^0.*",
        "gulp-rigger": "^0.*",
        "gulp-sass": "^2.*",
        "gulp-sourcemaps": "^1.*",
        "gulp-svg-sprites": "^4.*",
        "gulp-svgmin": "^1.*",
        "gulp-uglify": "^1.*",
        "gulp-watch": "^4.*",
        "svg-sprite-loader": "0.*"
      }
    }

Answer the question

In order to leave comments, you need to log in

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question