U
U
Uncle Tolya2019-07-30 20:57:28
Images
Uncle Tolya, 2019-07-30 20:57:28

Is it possible to prevent Gulp from recompressing images on startup?

I'm still very weak in js and gulp. Tasks are partially rewritten from different sources.
At the moment, everything starts with the gulp command, and at startup, images are processed again, although I already did this before and the images from the src folder fell into build.
Is it possible to do something so that image processing at startup is not, but is also tracked during operation? This is what mine looks like

gulpfile.js
function deploy(cb) {
  ghPages.publish(path.join(process.cwd(), './build'), cb);
}
exports.deploy = deploy;

// const csso = require('gulp-csso'); // минификатор

gulp.task('serve', function () {
  browserSync.init({
    server: {
      baseDir: './build'
    }
  });
});

// Pug

gulp.task('pug', function () {
  return gulp.src('src/pug/pages/**/*.pug')
    .pipe(pug({
      pretty: true
    }))
    .pipe(gulp.dest('build'))
    .on('end', browserSync.reload);
});

// Sass

sass.compiler = require('node-sass');

gulp.task('sass', function () {
  return gulp.src('src/sass/**/*.scss')
    .pipe(sourcemaps.init())
    .pipe(changed('build/css'))
    .pipe(sass({
      outputStyle: 'expanded'
    }).on('error', sass.logError))
    .pipe(autoprefixer({
      Browserslist: ['last 3 versions'],
      cascade: false
    }))
    .on('error', notify.onError({
      message: 'Error: <%= error.message %>',
      title: 'Error running something'
    }))
    .pipe(sourcemaps.write('/maps'))
    .pipe(gulp.dest('build/css'))
    .pipe(browserSync.reload({
      stream: true
    }));
});

// JS

gulp.task('scripts', function () {
  return gulp.src('src/js/**/*.js')
    .pipe(uglify())
    .pipe(gulp.dest('build/js'));
})

// Optimize images

gulp.task('img', function () {
  return gulp.src('src/img/**/*.{png,jpg,jpeg,svg,gif,webp}')
    .pipe(cache(imagemin([
      imgCompress({
        loops: 4,
        min: 65,
        max: 80,
        quality: 'high'
      }),
      pngquant({
        speed: 1,
        quality: [0.95, 1] //lossy settings
      }),
      webp({
        quality: 80,
        preset: 'photo',
        method: 6
      }),
      imagemin.gifsicle(),
      imagemin.optipng(),
      imagemin.svgo({
        plugins: [{
          removeViewBox: true
        }]
      })
    ])))
    .pipe(gulp.dest('build/img'));
});

// Optimize images (WebP)

gulp.task('exportWebP', function () {
  return gulp.src('src/img/**/*')
    .pipe(imagemin([
      webp({
        quality: 70
      })
    ]))
    .pipe(extReplace(".webp"))
    .pipe(gulp.dest('build/img'));
});

gulp.task('clear', function () {
  return cache.clearAll();
})

gulp.task('watch', function () {
  gulp.watch('src/sass/**/*.scss', gulp.series('sass'));
  gulp.watch('src/pug/**/*.pug', gulp.series('pug'));
  gulp.watch('src/js/**/*.js', gulp.series('scripts'));
  gulp.watch('src/img/**/*.{png,jpg,svg,gif}', gulp.series('img'));
});

gulp.task('default', gulp.series(
  gulp.parallel('pug', 'sass', 'scripts', 'img'),
  gulp.parallel('watch', 'serve')
));

Answer the question

In order to leave comments, you need to log in

1 answer(s)
S
Stockholm Syndrome, 2019-07-30
@sh4rov

gulp.task('default', gulp.series(
  gulp.parallel('pug', 'sass', 'scripts'),
  gulp.parallel('watch', 'serve')
));

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question