Как правильно настроить gulp файл?

Question

[5tka]

Уважаемые коллеги по цеху.
Нужна Ваша помощь в настройке галп файла.
Имеется следующий код.
И структура проекта prntscr.com/k8jyfl
В основном все более-менее работает. Все плохо с обработкой pug и картинок.
По поводу pug. Если рядом с index.pug будет, например index2.pug и будут вносится изменения которые касаются лишь индекс2, то все равно будут пересобираться все страницы, было такое что 54 стр. пересобирало. - есть возможность это вылечить?
Второе - это оптимизация картинок. 1) Галп при каждом запуске работает над всеми картинками. 2) Если из соурса удалить картинку то она должна также из билда убраться - возможно ли это как сделать?
Прошу помощи в этом вопросе. Также буду рад любым советам/замечаниям по поводу моего галпфайла.

var
  gulp = require('gulp'),
  concat = require('gulp-concat'), // Склейка файлов
  browserSync = require('browser-sync'), // BrowserSync
  pug = require('gulp-pug'), // Pug обработчик html
  sass = require('gulp-sass'),
  sourcemaps = require('gulp-sourcemaps'),
  cssnano = require('gulp-cssnano'), //Минификация CSS
  autoprefixer = require('gulp-autoprefixer'), // Автопрефиксы CSS
  imagemin = require('gulp-imagemin'), // Сжатие JPG, PNG, SVG, GIF
  uglify = require('gulp-uglify'), // Минификация JS
  plumber = require('gulp-plumber'),
  shorthand = require('gulp-shorthand'), // шорт код
  rename = require('gulp-rename'),
  watch = require('gulp-watch'),
  rigger = require('gulp-rigger'), // іморт файлів в файл like //="../../../bower_components/...
  gcmq = require('gulp-group-css-media-queries'), // обєднує media з однаковими breakpoint
  criticalCss = require('gulp-penthouse'),
  print = require('gulp-print').default,
  clean = require('gulp-clean'),
  path = require('path'),
  cache = require('gulp-cached'),
  remember = require('gulp-remember'),
  dependents = require('gulp-dependents'),
  rtlcss = require('gulp-rtlcss'),
  cond = require('gulp-cond');

var paths = {
  name: "boiler",
  build: { //Куда складывать готовые файлы
    server: 'build/',
    html: 'build/',
    js: 'build/js/',
    jsVendor: 'build/js/vendor/',
    css: 'build/css/',
    img: 'build/img/',
    fonts: 'build/css/fonts/',
    favicon: 'build/favicon/'
  },
  src: { //Пути откуда брать исходники
    pug: ['src/pug/*.pug', '!src/pug/_*.pug'],
    js: 'src/js/script.js',
    jsVendor: 'src/js/vendor.js',
    scss: ['src/sass/**/*.scss', 'src/sass/_*.scss'],
    img: 'src/img/**/*.*',
    fonts: 'src/fonts/*',
    favicon: 'src/favicon/*'
  },
  watch: { //Пути файлов, за которыми хотим наблюдать
    pug: './src/pug/**/*.pug',
    js: './src/js/script.js',
    jsVendor: './src/js/vendor.js',
    scss: ['src/sass/**/*.scss', 'src/sass/_*.scss'],
    img: './src/img/**/*',
    favicon: './src/favicon/*',
    fonts: './src/fonts/*'
  }
};


function favicon_fn() {
  return gulp.src(paths.src.favicon)
    .pipe(plumber())
    .pipe(gulp.dest(paths.build.favicon))
    .pipe(browserSync.stream());
}

function fonts_fn() {
  return gulp.src(paths.src.fonts)
    .pipe(plumber())
    .pipe(gulp.dest(paths.build.fonts))
    .pipe(browserSync.stream());
}

function imgmin_fn() {
  return gulp.src(paths.src.img)
    .pipe(plumber())
    .pipe(imagemin({ optimizationLevel: 3, progressive: true }))
    .pipe(gulp.dest(paths.build.img))
    .pipe(browserSync.stream());
}

function js_fn() {
  return gulp.src(paths.src.js)
    .pipe(plumber())
    .pipe(rigger())
    .pipe(concat('script.js'))
    .pipe(gulp.dest(paths.build.js))
    .pipe(browserSync.stream());
}

function jsV_fn() {
  return gulp.src(paths.src.jsVendor)
    .pipe(plumber())
    .pipe(rigger())
    .pipe(concat('vendor.js'))
    .pipe(gulp.dest(paths.build.js))
    .pipe(browserSync.stream());
}

function pug_fn() {
  return gulp.src(paths.src.pug)
    .pipe(print(filepath => "src " + filepath))
    .pipe(plumber())
    .pipe(print(filepath => "saved " + filepath))
    .pipe(pug({ pretty: true }))
    .on('error', console.log)
    .pipe(gulp.dest(paths.build.html))
    .pipe(browserSync.stream());
}

function sass_fn() {
  return gulp.src(paths.src.scss)
    .pipe(plumber())
    .pipe(sourcemaps.init())
    .pipe(rigger())
    .pipe(cache('sass'))
    .pipe(print(filepath => "file saved " + filepath))
    .pipe(dependents())
    .pipe(sass().on('error', sass.logError))
    .pipe(autoprefixer({ browsers: ['last 15 versions'] }))
    // .pipe(shorthand())
    // .pipe(cssnano({discardComments: {removeAll: true}}))
    .pipe(remember('sass'))
    .pipe(concat('main.css'))
    .pipe(sourcemaps.write('.'))
    .pipe(gulp.dest(paths.build.css))
    .pipe(browserSync.stream());
}

// clean
function clean_fn() {
  return gulp.src(paths.build.html)
      .pipe(clean());
}
gulp.task('clr', gulp.series(clean_fn));

// rtl
function rtl_fn() {
  return gulp.src('build/css/main.css')
    .pipe(rtlcss())
    .pipe(rename({ suffix: '-rtl' }))
    .pipe(gulp.dest(paths.build.css))
}
gulp.task('rtl', gulp.series(rtl_fn));

function watch_fn() {
  browserSync({
    server: {
      baseDir: paths.build.server
    },
    port: 8080,
    open: true,
  });
  gulp.watch(paths.watch.favicon, gulp.series(favicon_fn));
  gulp.watch(paths.watch.fonts, gulp.series(fonts_fn));
  gulp.watch(paths.watch.img, gulp.series(imgmin_fn));
  gulp.watch(paths.watch.js, gulp.series(js_fn));
  gulp.watch(paths.watch.jsVendor, gulp.series(jsV_fn));
  gulp.watch(paths.watch.pug, gulp.series(pug_fn));
  gulp.watch(paths.watch.scss, gulp.series(sass_fn));
};

var build = gulp.series(
  // clean_fn,
  gulp.parallel(
    favicon_fn,
    fonts_fn,
    imgmin_fn,
    js_fn,
    jsV_fn,
    pug_fn,
    sass_fn,
  )
);

gulp.task('build', build);

gulp.task('default', gulp.series(build, watch_fn));

// GOOGLE PAGE SPPED
// var psi = require('psi');
// var site = 'http://www.html5rocks.com';
// var key = '';
// gulp.task('psi-m', function () {
//   return psi(site, {
//       // key: key
//       nokey: 'true',
//       strategy: 'mobile',
//   }).then(function (data) {
//       console.log('Speed score: ' + data.ruleGroups.SPEED.score);
//       console.log('Usability score: ' + data.ruleGroups.USABILITY.score);
//   });
// });
// gulp.task('psi-d', function () {
//   return psi(site, {
//       nokey: 'true',
//       // key: key,
//       strategy: 'desktop',
//   }).then(function (data) {
//       console.log('Speed score: ' + data.ruleGroups.SPEED.score);
//       console.log('Usability score: ' + data.ruleGroups.USABILITY.score);
//   });
// });

Comments

[sergey]

открываем google - ищем информацию о gulp, а именно о gulp4, и там предостаточно информации о том как это сделать (касательно второй части вопроса, да и первой собственно)

Answer 1

[Oscar Handsome]

Посмотри скринкаст по gulp сборке.
>>есть возможность это вылечить?
есть возможность исключить файлы, записывая в кэш, я думаю это твой случай. Просто я это еще не использовал, в скрин касте от js learn было это.
по второму вопросу то же самое.

Answer 2

[LaughingThroll]

Вот сам долго мучился с этой проблемой, если это у тебя работать не будет значить ищи в гугле инкрементальный подход

// Incremental approach
G.gulp.task('pug', function () {
return G.gulp.src('app/**/*.pug')
// files which changed
.pipe(G.gulpChanged('app/', {extension: '.html'}))
// if file watching mean woks cach
.pipe(G.gulpIf(global.isWatching, G.gulpCached('pug')))
// Rebuild pug file that have extended or included
.pipe(G.gulpPugInheritance({basedir: 'app', skip: 'node_modules'}))
// Filter all files with _
.pipe(G.gulpFilter(function (file) {
return !/\/_/.test(file.path) && !/^_/.test(file.relative);
}))
// Standart PUG
.pipe(G.pug({
pretty: true
}))
.pipe(G.gulp.dest('app/'))

.pipe(G.browserSync.reload({stream: true}))
});