Конспекты к двум виедороликам о кэшированиив в Gulp

Примеры с плагинами gulp watch, since: , Gulp-changed, gulp-newer, gulp-remember, gulp-cache, gulp-cached от Ильи Кантора в скринкастах Gulp 5: Инкрементальная сборка, watch. Gulp 5: Инкрементальная сборка, повышение производительности.
В первом примере, "инкрементальность" обеспечивается за счет того, что в плагине styles данные кэшируются, а значит пересобираются заново только измененные файлы, но все это реализовано внутри styles...

Конспекты к первым четырем скринкастам Gulp Структура папок и имена файлов можно посмотреть в этом предыдущем посте

gulp-screencast/05-watch/gulpfile.js¶

gulp watch после запусканачинает наблюдать за файлами, если обнаруживает изменения, то выполняет задачи

In [ ]:

# ... gulp.watch('frontend/assets/**/*.*', gulp.series('assets'));});
# мониторим все изменения в 'frontend/assets/'
# а далее задача, которую нужно запускамть..., это либо функция, либо 
# gulp.series('assets'))

In [ ]:

# Даже, если задача одна, ее надо обернуть в 
# gulp.series(

In [ ]:

'use strict';

const gulp = require('gulp');
const stylus = require('gulp-stylus');
const sourcemaps = require('gulp-sourcemaps');
const debug = require('gulp-debug');
const gulpIf = require('gulp-if');
const del = require('del');

const isDevelopment = !process.env.NODE_ENV || 
                       process.env.NODE_ENV == 'development';

gulp.task('styles', function() {

  return gulp.src('frontend/styles/main.styl')
      .pipe(gulpIf(isDevelopment, sourcemaps.init()))
      .pipe(stylus())
      .pipe(gulpIf(isDevelopment, sourcemaps.write()))
      .pipe(gulp.dest('public'));

});

gulp.task('clean', function() {
  return del('public');
});

gulp.task('assets', function() {
  return gulp.src('frontend/assets/**', {since: gulp.lastRun('assets')})
      .pipe(debug({title: 'assets'}))
      .pipe(gulp.dest('public'));
});


gulp.task('build', gulp.series(
    'clean',
    gulp.parallel('styles', 'assets'))
);

gulp.task('watch', function() {
  gulp.watch('frontend/styles/**/*.*', gulp.series('styles'));

  gulp.watch('frontend/assets/**/*.*', gulp.series('assets'));
});

gulp.task('dev', gulp.series('build', 'watch'));

Вот эту команду можно вставить, а запомнить надо¶

In [ ]:

gulp.task('assets', function() {
        console.log(require('stylus/lib/parser').cashe)
return ...
        
# 3:40 Gulp 5: Инкрементальная сборка, watch

Итак, файлы стилей кэшируются, а вот assets будут пересобираться каждый раз заново, если не добавить параметр since

ОБеспечиваем инкрементальность для assets¶

In [ ]:

return gulp.src('frontend/assets/**', {since: gulp.lastRun('assets')})

# 4:40 Gulp 5: Инкрементальная сборка, watch

In [ ]:

# Команда touch изменяет дату модификации, а файл тот же
> touch fronted/assets/index.html 

А если файл был удален? Ну и что? При сборке в проадкшен сначала почистим папку, а при разработке мусор не так страшен..., но способ есть

In [ ]:

# В основе **watch** модуль **chokidar**, который генерирует события

# 7:40 Gulp 5: Инкрементальная сборка, watch

Нельзя оставлять gulp.watch без обертки¶

Поскольку при любом обращении к модулю она будет выполняться. Просто сделаем вот такой вызов:

In [ ]:

gulp.task('watch', function() {
  gulp.watch('frontend/styles/**/*.*', gulp.series('styles'));

  gulp.watch('frontend/assets/**/*.*', gulp.series('assets'));
});

Кроме того, лучше задать последовательность

In [ ]:

gulp.task('dev', gulp.series('build', 'watch'));

# 9:00 Gulp 5: Инкрементальная сборка, watch

In [ ]:

####Gulp 6: Инкрементальность и производительность (следущий скринкаст)

gulp-screencast/06-watch-perf-newer/gulpfile.js

При первом запуске gulp.lastRun('assets') не срабатывает, чтобы ускорить первый запуск нужен плагин gulp-newer

In [ ]:

#  return gulp.src('frontend/assets/**', {since: gulp.lastRun('assets')})

In [ ]:

'use strict';

const gulp = require('gulp');
const stylus = require('gulp-stylus');
const sourcemaps = require('gulp-sourcemaps');
const debug = require('gulp-debug');
const gulpIf = require('gulp-if');
const del = require('del');
const newer = require('gulp-newer');  // gulp-changed

const isDevelopment = !process.env.NODE_ENV || process.env.NODE_ENV == 'development';

gulp.task('styles', function() {

  return gulp.src('frontend/styles/main.styl')
      .pipe(gulpIf(isDevelopment, sourcemaps.init()))
      .pipe(stylus())
      .pipe(gulpIf(isDevelopment, sourcemaps.write()))
      .pipe(gulp.dest('public'));

});

gulp.task('clean', function() {
  return del('public');
});

gulp.task('assets', function() {
  return gulp.src('frontend/assets/**', {since: gulp.lastRun('assets')})
      .pipe(newer('public'))
      .pipe(debug({title: 'assets'}))
      .pipe(gulp.dest('public'));
});

gulp.task('watch', function() {
  gulp.watch('frontend/styles/**/*.*', gulp.series('styles'));

  gulp.watch('frontend/assets/**/*.*', gulp.series('assets'));
});

gulp.task('build', gulp.series('clean', gulp.parallel('styles', 'assets')));

gulp.task('dev', gulp.series('build', 'watch'));

Что делает плагин gulp-newer

In [ ]:

gulp.task('assets', function() {
  return gulp.src('frontend/assets/**', {since: gulp.lastRun('assets')})
      .pipe(newer('public')) //# читает содержание папки
//# и сравнивает даты, и не пускает дальше неизмененные файлы       
      .pipe(debug({title: 'assets'}))
      .pipe(gulp.dest('public')); 
});

# 1:40 Gulp 6: Инкрементальность и производительность

Есть еще один плагин - аналог Gulp-changed

In [ ]:

gulp-screencast/06-watch-perf-remember-cached/gulpfile.js

In [ ]:

.pipe(remember('styles'))

# 4:00 Gulp 6: Инкрементальность и производительность

Запоминает то, что проходит через него в именованном кэше 'styles', если при следующем обращении к нему не попадает какой-то файл, то он добавляет его из кэша... В видео все подробно...

In [ ]:

# 6:00 Gulp 6: Инкрементальность и производительность

In [ ]:

'use strict';

// gulp-remember

const gulp = require('gulp');
const debug = require('gulp-debug');
const concat = require('gulp-concat');
const autoprefixer = require('gulp-autoprefixer');
const remember = require('gulp-remember');
const cached = require('gulp-cached');
const path = require('path');

gulp.task('styles', function() {

  return gulp.src('frontend/styles/**/*.css')
      .pipe(cached('styles'))
      .pipe(autoprefixer())
      .pipe(remember('styles'))
      .pipe(concat('all.css'))
      .pipe(gulp.dest('public'));

});

gulp.task('watch', function() {

  gulp.watch('frontend/styles/**/*.css', 
    gulp.series('styles')).on('unlink', function(filepath) {
      remember.forget('styles', path.resolve(filepath));
      delete cached.caches.styles[path.resolve(filepath)];
    });

});

gulp.task('dev', gulp.series('styles', 'watch'));

Поставил .pipe(cached('styles')) - прио повторном поиске все файлы с тем же содержимым "отметаются"

In [ ]:

# 11:10 Gulp 6: Инкрементальность и производительность

Все же, большинство использует since - он не читает содержимое файлов

In [ ]:

# 13:10 Gulp 6: Инкрементальность и производительность

Есть еще gulp-cache (ранее был gulp-cached)

In [ ]:

# 13:50 Gulp 6: Инкрементальность и производительность

Посты чуть ниже также могут вас заинтересовать