@tory_kuzya

Как изменить таск Gulp.js (добавление gulp-changed)?

Есть работающий gulpfile.js
'use strict';

const gulp = require('gulp');
const scss = require('gulp-sass');
const autoprefixer = require('gulp-autoprefixer');
const less = require('gulp-less');
const sourcemaps = require('gulp-sourcemaps');
const debug = require('gulp-debug');
const gulpIf = require('gulp-if');
const del = require('del');
const browserSync = require('browser-sync').create();
const notify = require('gulp-notify');
const cssnano = require('gulp-cssnano'); // Подключаем пакет для минификации CSS
const csso = require('gulp-csso');  //для минификации CSS
//const uncss = require('gulp-uncss');    //для оптимизации CSS файлов, анализирует HTML код и находит все неиспользуемые и продублированные стили
const concat = require('gulp-concat'); // Подключаем gulp-concat (для конкатенации файлов)
const combiner = require('stream-combiner2').obj;
const uglify = require('gulp-uglify');

const changed = require('gulp-changed');


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

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

    return combiner(
        gulp.src(['frontend/styles/fonts.css','frontend/styles/main.scss']),
        gulpIf(isDevelopment, sourcemaps.init()),
        //less(),
        scss(),
        autoprefixer({
            browsers: ['last 20 versions'],
            cascade: false
        }),
        //cssnano(),    //минимизируем
        concat('main.min.css'), // Собираем их в кучу в новом файле main.min.css
        // uncss({
        //     html: ['index.html']
        // }),
        csso({
            restructure: false,
            sourceMap: true,
            debug: true
        }),
        gulpIf(isDevelopment, sourcemaps.write()),
        gulp.dest('public/css')
    ).on('error', notify.onError());

});

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

    return combiner(
        gulp.src(['frontend/styles/lib/*.*']),
        gulpIf(isDevelopment, sourcemaps.init()),
        cssnano(),    //минимизируем
        concat('lib.min.css'), // Собираем их в кучу в новом файле lib.min.js
        gulpIf(isDevelopment, sourcemaps.write()),
        gulp.dest('public/css')
    ).on('error', notify.onError());

});

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

    return combiner(
        gulp.src(['frontend/assets/js/**']),
        gulpIf(isDevelopment, sourcemaps.init()),
        // uglify(),  //минимизируем
        // concat('lib.min.js'), // Собираем их в кучу в новом файле lib.min.js
        gulpIf(isDevelopment, sourcemaps.write()),
        gulp.dest('public/js')
    ).on('error', notify.onError());

});

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

gulp.task('assets', function() {
    return combiner(
        gulp.src(['frontend/assets/**']),
        changed(['frontend/assets/**']),
        gulp.dest('public')
    ).on('error', notify.onError());
});

gulp.task('img', function() {
    return combiner(
        gulp.src(['frontend/assets/img/*.*']),
        changed(['frontend/assets/img/*.*']),
        gulp.dest('public/img')
    ).on('error', notify.onError());
});

gulp.task('fonts', function() {
    return combiner(
        gulp.src(['frontend/assets/fonts/**']),
        gulp.dest('public/fonts')
    ).on('error', notify.onError());
});

gulp.task('html', function() {
    return combiner(
        gulp.src(['frontend/assets/*.html']),
        gulp.dest('public')
    ).on('error', notify.onError());
});

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

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

    gulp.watch('frontend/styles/lib/*.*', gulp.series('librarys'));

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

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

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

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

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

    browserSync.watch('public/**/*.*').on('change', browserSync.reload);
});

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

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

, в нем таск для изображений:
gulp.task('img', function() {
    return combiner(
        gulp.src(['frontend/assets/img/*.*']),
        gulp.dest('public/img')
    ).on('error', notify.onError());
});


пытаюсь добавить gulp-changed (чтобы копировалось только новое изображение, а старые не перезаписывались), не получается... Пишу так:
const changed = require('gulp-changed');

gulp.task('img', function() {
    return combiner(
        gulp.src(['frontend/assets/img/*.*']),
        changed(),
        gulp.dest('public/img')
    ).on('error', notify.onError());
});


Получаю ошибку:
[15:20:43] Starting 'img'...
[15:20:43] 'img' errored after 10 ms
[15:20:43] Error in plugin "gulp-changed"
Message:
    `dest` required
Details:
    domain: [object Object]
    domainThrown: true


Что я делаю не так?
P.S. gulpfile.js отредактирован (в тасках images и assets вставлен gulp-changed, но желаемый результат не достигнут, т.е. изображения как и прежде пересобиравются все, а не только вновь добавленные...
  • Вопрос задан
  • 832 просмотра
Пригласить эксперта
Ответы на вопрос 1
Mordraug
@Mordraug
frontend разработчик
в сообщении ошибки же указано, что нужен контекст. Типа так:
changed(dest)
Ответ написан
Ваш ответ на вопрос

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

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