Правильный переход Gulp с 3 на 4 версию?

Question

[Eugene Chefranov]

Автоматически обновился с 3 версии до 4 и соответственно перестали запускаться таски. Можете помочь переписать следующие три таска на новый синтаксис для примера?

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

gulp.task('watch', function () {
    gulp.watch('src/img/*', ['compress']);
});

gulp.task('css', function () {
    return gulp.src('src/scss/*.scss')
        .pipe(plumber())
        .pipe(sourcemaps.init())
        .pipe(sass())
        .on('error', sass.logError)
        .pipe(cleanCSS())
        .pipe(autoprefixer({
            browsers: ['last 2 versions'],
            cascade: false
        }))
        .pipe(sourcemaps.write())
        .pipe(gulp.dest('dist/css'))
        .pipe(browserSync.stream());
});

Там как я понял используется теперь функция series, первый таск в моем примере тоже через series запускается?

Answer 1

[FabiBoom]

const gulp = require('gulp');

function compress() {
    // compress task
}

function watch() {
    gulp.watch('src/img/*', compress);
}

function css() {
    return gulp
        .src('src/scss/*.scss')
        .pipe(plumber())
        .pipe(sourcemaps.init())
        .pipe(sass())
        .on('error', sass.logError)
        .pipe(cleanCSS())
        .pipe(
            autoprefixer({
                browsers: ['last 2 versions'],
                cascade: false
            })
        )
        .pipe(sourcemaps.write())
        .pipe(gulp.dest('dist/css'))
        .pipe(browserSync.stream());
}

module.exports.default = gulp.series(watch); // ну если один таск можно и просто `watch`.
module.exports.watch = watch;
module.exports.css = css;

Comments

[Eugene Chefranov]

Спасибо, а для чего module.exports в конце файла?

[FabiBoom]

Eugene Chefranov, Это модули из Node.js. Если кратко, то раньше для экспорта тасков мы использовали gulp.task(taskName, ...). Сейчас это не рекомендуют и считается устаревшим.

Теперь экспорт нужных нам тасков - это присвоение их как свойства обьекта `module.exports`.

module.exports = {
   default: defaultTask,
   css: cssTask,
   html: htmlTask
};

Так и ориентироваться проще, какие именно задачи мы используем в нашем gulpfile, особенно если их много и они обьемные.

вот подробней, если нужно

[Eugene Chefranov]

FabiBoom и если можете помочь с этим таском

gulp.task('server', ['css', 'html', 'compress', 'fonts', 'js'], function () {
    browserSync.init({
        server: {
            baseDir: './dist'
        },
        open: 'local',
        injectChanges: true
    });
    gulp.watch('src/img/*', ['compress']).on('change', browserSync.reload);
    gulp.watch('src/fonts/*', ['fonts']).on('change', browserSync.reload);
    gulp.watch('src/js/*', ['js']).on('change', browserSync.reload);
    gulp.watch('src/scss/*.scss', ['css']);
    gulp.watch('src/*.html', ['html']).on('change', browserSync.reload);
});

Я попытался его переделать так

spoiler

gulp.task('server', gulp.series('css', 'html', 'compress', 'fonts', 'js', function () {
 
  browserSync.init({
        server: {
            baseDir: './dist'
        },
        open: 'local',
        injectChanges: true
    });
    gulp.watch('src/img/*', ['compress']).on('change', browserSync.reload);
    gulp.watch('src/fonts/*', ['fonts']).on('change', browserSync.reload);
    gulp.watch('src/js/*', ['js']).on('change', browserSync.reload);
    gulp.watch('src/scss/*.scss', ['css']);
    gulp.watch('src/*.html', ['html']).on('change', browserSync.reload);
 
}));

Но явно не в том направлению делаю

[FabiBoom]

Eugene Chefranov,

function serve() {
    browserSync.init({
        server: {
            baseDir: "./dist"
        },
        open: "local",
        injectChanges: true
    });

    // лучше вместо названий тасков создать для каждого функцию с таким же именем

    /*
        function compress() {
            return gulp.src(...)
            ....
        }
    */

    gulp.watch("src/img/*", "compress").on("change", browserSync.reload);
    gulp.watch("src/fonts/*", "fonts").on("change", browserSync.reload);
    gulp.watch("src/js/*", "js").on("change", browserSync.reload);
    gulp.watch("src/scss/*.scss", "css");
    gulp.watch("src/*.html", "html").on("change", browserSync.reload);
}

// тоже самое лучше функции использовать вместо названий тасков

module.exports.server = gulp.series(css, html, compress, fonts, js, serve);

// можна также паралельно выполнять

// module.exports.server = gulp.series(gulp.parallel(css, html, compress, fonts, js), serve);

[Eugene Chefranov]

FabiBoom, почти работает, но вылазит такая ошибка

[11:39:36] The following tasks did not complete: server, compress
[11:39:36] Did you forget to signal async completion?

[FabiBoom]

Eugene Chefranov, в таске compress есть return?

[Eugene Chefranov]

FabiBoom, да была проблема в return. Добавил - заработало. Но теперь почему-то не работает watch, то есть когда редактирую html, css и т.д. нет моментального обновления на странице.

Полный код

const gulp = require('gulp');
const sass = require('gulp-sass'); // SASS
const imagemin = require('gulp-imagemin'); // Image minification
const sourcemaps = require('gulp-sourcemaps'); // Sourcemaps
const cleanCSS = require('gulp-clean-css'); // CSS Minification
const browserSync = require('browser-sync').create(); // Browser sync
const fileInclude = require('gulp-file-include');
const plumber = require('gulp-plumber');
const autoprefixer = require('gulp-autoprefixer'); // Autoprefixer
const concat = require('gulp-concat'); // Concatation
const uglify = require('gulp-uglify'); // Minification

function compress() {
    return gulp
        .src('src/img/*')
        .pipe(imagemin())
        .pipe(gulp.dest('dist/img'));
}

function watch() {
    gulp.watch('src/img/*', compress);
}

function css() {
    return gulp
        .src('src/scss/*.scss')
        .pipe(plumber())
        .pipe(sourcemaps.init())
        .pipe(sass())
        .on('error', sass.logError)
        .pipe(cleanCSS())
        .pipe(
            autoprefixer({
                browsers: ['last 2 versions'],
                cascade: false
            })
        )
        .pipe(sourcemaps.write())
        .pipe(gulp.dest('dist/css'))
        .pipe(browserSync.stream());
}

 function html() {
    return gulp
        .src('src/*.html')
        .pipe(plumber())
        .pipe(
            fileInclude({
                prefix: '@@',
                basepath: 'src/templates/',
                indent: true
            }),
        )
        .pipe(gulp.dest('dist'));
}

function fonts() {
    return gulp
        .src('src/fonts/*')
        .pipe(gulp.dest('dist/fonts'))
}

let jsfiles = [
    "src/js/jquery.js",
    "src/js/!(common)*.js",
    "src/js/common.js"
];


function js() {
    return gulp
        .src(jsfiles, {
            base: 'src/js'
        })
        .pipe(sourcemaps.init({
            loadMaps: true
        }))
        .pipe(concat('main.min.js'))
        .pipe(uglify())
        .pipe(sourcemaps.write('.'))
        .pipe(gulp.dest('dist/js'))
}

function serve() {
    return browserSync.init({
        server: {
            baseDir: "./dist"
        },
        open: "local",
        injectChanges: true
    });

    // лучше вместо названий тасков создать для каждого функцию с таким же именем

    /*
        function compress() {
            return gulp.src(...)
            ....
        }
    */

    gulp.watch("src/img/*", "compress").on("change", browserSync.reload);
    gulp.watch("src/fonts/*", "fonts").on("change", browserSync.reload);
    gulp.watch("src/js/*", "js").on("change", browserSync.reload);
    gulp.watch("src/scss/*.scss", "css");
    gulp.watch("src/*.html", "html").on("change", browserSync.reload);
}

// тоже самое лучше функции использовать вместо названий тасков

module.exports.default = gulp.series(watch); // ну если один такс можно и просто `watch`.
module.exports.watch = watch;
module.exports.css = css;
module.exports.html = html;
module.exports.fonts = fonts;
module.exports.js = js;
module.exports.server = gulp.series(css, html, compress, fonts, js, serve);

запускаю gulp server

[FabiBoom]

Eugene Chefranov, там кавычки убрать нужно, вот так

gulp.watch("src/img/*", compress).on("change", browserSync.reload);
    gulp.watch("src/fonts/*", fonts).on("change", browserSync.reload);
    gulp.watch("src/js/*", js).on("change", browserSync.reload);
    gulp.watch("src/scss/*.scss", css);
    gulp.watch("src/*.html", html).on("change", browserSync.reload);

[Eugene Chefranov]

FabiBoom, подправил, но тоже самое. Даже после ручного обновления страницы контент не меняется. Меняется только если полностью таск перезапустить

spoiler

const gulp = require('gulp');
const sass = require('gulp-sass'); // SASS
const imagemin = require('gulp-imagemin'); // Image minification
const sourcemaps = require('gulp-sourcemaps'); // Sourcemaps
const cleanCSS = require('gulp-clean-css'); // CSS Minification
const browserSync = require('browser-sync').create(); // Browser sync
const fileInclude = require('gulp-file-include');
const plumber = require('gulp-plumber');
const autoprefixer = require('gulp-autoprefixer'); // Autoprefixer
const concat = require('gulp-concat'); // Concatation
const uglify = require('gulp-uglify'); // Minification

function compress() {
    return gulp
        .src('src/img/*')
        .pipe(imagemin())
        .pipe(gulp.dest('dist/img'));
}

function watch() {
    gulp.watch('src/img/*', compress);
}

function css() {
    return gulp
        .src('src/scss/*.scss')
        .pipe(plumber())
        .pipe(sourcemaps.init())
        .pipe(sass())
        .on('error', sass.logError)
        .pipe(cleanCSS())
        .pipe(
            autoprefixer({
                browsers: ['last 2 versions'],
                cascade: false
            })
        )
        .pipe(sourcemaps.write())
        .pipe(gulp.dest('dist/css'))
        .pipe(browserSync.stream());
}

 function html() {
    return gulp
        .src('src/*.html')
        .pipe(plumber())
        .pipe(
            fileInclude({
                prefix: '@@',
                basepath: 'src/templates/',
                indent: true
            }),
        )
        .pipe(gulp.dest('dist'));
}

function fonts() {
    return gulp
        .src('src/fonts/*')
        .pipe(gulp.dest('dist/fonts'))
}

let jsfiles = [
    "src/js/jquery.js",
    "src/js/!(common)*.js",
    "src/js/common.js"
];


function js() {
    return gulp
        .src(jsfiles, {
            base: 'src/js'
        })
        .pipe(sourcemaps.init({
            loadMaps: true
        }))
        .pipe(concat('main.min.js'))
        .pipe(uglify())
        .pipe(sourcemaps.write('.'))
        .pipe(gulp.dest('dist/js'))
}

function serve() {
    return browserSync.init({
        server: {
            baseDir: "./dist"
        },
        open: "local",
        injectChanges: true
    });
    gulp.watch("src/img/*", compress).on("change", browserSync.reload);
    gulp.watch("src/fonts/*", fonts).on("change", browserSync.reload);
    gulp.watch("src/js/*", js).on("change", browserSync.reload);
    gulp.watch("src/scss/*.scss", css);
    gulp.watch("src/*.html", html).on("change", browserSync.reload);
}

module.exports.default = gulp.series(watch);
module.exports.watch = watch;
module.exports.css = css;
module.exports.html = html;
module.exports.fonts = fonts;
module.exports.js = js;
module.exports.server = gulp.series(css, html, compress, fonts, js, serve);

[Eugene Chefranov]

FabiBoom и еще Visual Code подсвечивает серым как будто не использует

[FabiBoom]

Eugene Chefranov, а я понял в `serve` return не нужен, если что или просто можно перенести все `gulp.watch` перед `return`. Без разницы.

[Eugene Chefranov]

FabiBoom, теперь всё работает, тысячу плюсов вам) благодарю за помощь!