Как переделать синтаксис gulpfile.js гальп 3 под гальп 4?

Question

[genrich_pauls]

const gulp = require('gulp');
const html = require('gulp-html');
const webpackStream = require('webpack-stream');
const gulpAutoprefix = require('gulp-autoprefixer');
const gulpSass = require('gulp-sass');
const gulpWatch = require('gulp-watch');
const gulpSourceMap = require('gulp-sourcemaps');
const browserSync = require('browser-sync').create();
const gulpStylelint = require('gulp-stylelint');
const image = require('gulp-image');
const historyFallback = require('connect-history-api-fallback');
const webpackConfig = require('./webpack.config.js');

gulp.task('stylesheets', () => gulp.src('./src/scss/**/*.scss')
    .pipe(gulpStylelint({
        failAfterError: false,
        reporters: [
            {
                formatter: 'string',
                console: true,
                fix: true,
            },
        ],
    }))
    .pipe(gulpSourceMap.init())
    .pipe(gulpSass({
        outputStyle: 'compressed',
    })).on('error', gulpSass.logError)
    .pipe(gulpAutoprefix({
        browsers: ['last 2 versions'],
    }))
    .pipe(gulpSourceMap.write())
    .pipe(gulp.dest('./dev/css/'))
    .pipe(browserSync.stream()));

gulp.task('stylesheetsProduction', () => gulp.src('./src/scss/**/*.scss')
    .pipe(gulpStylelint({
        failAfterError: true,
        reporters: [
            {
                formatter: 'string',
                console: true,
                fix: true,
            },
        ],
    }))
    .pipe(gulpSass({
        outputStyle: 'compressed',
    })).on('error', gulpSass.logError)
    .pipe(gulpAutoprefix({
        browsers: ['last 2 versions'],
    }))
    .pipe(gulp.dest('./build/css/')));

gulp.task('js', () => gulp.src('./src/js/main.js')
    .pipe(webpackStream(webpackConfig))
    .pipe(gulp.dest('./dev/js'))
    .pipe(browserSync.stream()));

gulp.task('jsProduction', () => {
    webpackConfig.watch = false;

    gulp.src('./src/js/main.js')
        .pipe(webpackStream(webpackConfig))
        .pipe(gulp.dest('./build/js'));
});

gulp.task('image', () => gulp.src('./src/images/*')
    .pipe(image())
    .pipe(gulp.dest('./dev/images'))
    .pipe(browserSync.stream()));

gulp.task('imageProduction', () => gulp.src('./src/images/*')
    .pipe(image())
    .pipe(gulp.dest('./build/images')));

gulp.task('html', () => gulp.src('./src/template/**/*.html')
    .pipe(html())
    .pipe(gulp.dest('./dev'))
    .pipe(browserSync.stream()));

gulp.task('htmlProduction', () => gulp.src('./src/template/**/*.html')
    .pipe(html())
    .pipe(gulp.dest('./build')));

gulp.task('watch', () => {
    gulpWatch(['./src/scss/**/*.scss'], () => {
        gulp.start('stylesheets');
    });
    gulpWatch(['./src/images/**/*'], () => {
        gulp.start('image');
    });
    gulpWatch(['./src/template/**/*.html'], () => {
        gulp.start('html');
    });
});



gulp.task('server', gulp.series(function () {
    browser.init({
        server: {
            baseDir: './dev',
            middleware: [
                historyFallback(),
            ],
        },
        open: true,
        port: 8080,
    });
}));



gulp.task('server', gulp.series('build', function () {
    browser.init({
        server: {
            baseDir: './dev',
            middleware: [
                historyFallback(),
            ],
        },
        open: true,
        port: 8080,
    });
}));


gulp.task('development', [
    'stylesheets',
    'js',
    'image',
    'html',
    'watch',
    'server',
]);

gulp.task('production', [
    'stylesheetsProduction',
    'jsProduction',
    'imageProduction',
    'htmlProduction',
]);

Answer 1

[Yuriy Vorobyov]

Смотрите тут и тут

Answer 2

[Сергей delphinpro]

Как-то так

const gulp = require('gulp');
const gulpHtml = require('gulp-html');
const webpackStream = require('webpack-stream');
const gulpAutoprefix = require('gulp-autoprefixer');
const gulpSass = require('gulp-sass');
const gulpWatch = require('gulp-watch');
const gulpSourceMap = require('gulp-sourcemaps');
const browserSync = require('browser-sync').create();
const gulpStylelint = require('gulp-stylelint');
const gulpImage = require('gulp-image');
const historyFallback = require('connect-history-api-fallback');
const webpackConfig = require('./webpack.config.js');

export const stylesheets = () => {
  return gulp.src('./src/scss/**/*.scss')
    .pipe(gulpStylelint({
      failAfterError: false,
      reporters     : [
        {
          formatter: 'string',
          console  : true,
          fix      : true,
        },
      ],
    }))
    .pipe(gulpSourceMap.init())
    .pipe(gulpSass({
      outputStyle: 'compressed',
    })).on('error', gulpSass.logError)
    .pipe(gulpAutoprefix({
      browsers: ['last 2 versions'],
    }))
    .pipe(gulpSourceMap.write())
    .pipe(gulp.dest('./dev/css/'))
    .pipe(browserSync.stream());
};

export const stylesheetsProduction = () => {
  return gulp.src('./src/scss/**/*.scss')
    .pipe(gulpStylelint({
      failAfterError: true,
      reporters     : [
        {
          formatter: 'string',
          console  : true,
          fix      : true,
        },
      ],
    }))
    .pipe(gulpSass({
      outputStyle: 'compressed',
    })).on('error', gulpSass.logError)
    .pipe(gulpAutoprefix({
      browsers: ['last 2 versions'],
    }))
    .pipe(gulp.dest('./build/css/'));
};

export const js = () => {
  return gulp.src('./src/js/main.js')
    .pipe(webpackStream(webpackConfig))
    .pipe(gulp.dest('./dev/js'))
    .pipe(browserSync.stream());
};

export const jsProduction = () => {
  webpackConfig.watch = false;

  gulp.src('./src/js/main.js')
    .pipe(webpackStream(webpackConfig))
    .pipe(gulp.dest('./build/js'));
};

export const image = () => {
  return gulp.src('./src/images/*')
    .pipe(gulpImage())
    .pipe(gulp.dest('./dev/images'))
    .pipe(browserSync.stream());
};

export const imageProduction = () => {
  return gulp.src('./src/images/*')
    .pipe(gulpImage())
    .pipe(gulp.dest('./build/images'));
};

export const html = () => {
  return gulp.src('./src/template/**/*.html')
    .pipe(gulpHtml())
    .pipe(gulp.dest('./dev'))
    .pipe(browserSync.stream());
};

export const htmlProduction = () => {
  return gulp.src('./src/template/**/*.html')
    .pipe(gulpHtml())
    .pipe(gulp.dest('./build'));
};

const watch = () => {
  gulpWatch(['./src/scss/**/*.scss'], () => {
    gulp.start('stylesheets');
  });
  gulpWatch(['./src/images/**/*'], () => {
    gulp.start('image');
  });
  gulpWatch(['./src/template/**/*.html'], () => {
    gulp.start('html');
  });
};

const server = () => {
  return gulp.series(function () {
    browser.init({
      server: {
        baseDir   : './dev',
        middleware: [
          historyFallback(),
        ],
      },
      open  : true,
      port  : 8080,
    });
  });
};

// ХЗ что это такое....
// gulp.task('server', gulp.series('build', function () {
//   browser.init({
//     server: {
//       baseDir   : './dev',
//       middleware: [
//         historyFallback(),
//       ],
//     },
//     open  : true,
//     port  : 8080,
//   });
// }));

export const development = gulp.series(
  gulp.parallel(
    stylesheets,
    js,
    image,
    html,
  ),
  gulp.parallel(
    watch,
    server,
  ),
);

export const production = gulp.parallel(
  stylesheetsProduction,
  jsProduction,
  imageProduction,
  htmlProduction,
);

Comments

[genrich_pauls]

Сергей delphinpro, запустил получил ошибку
gulp development

assert.js:341
    throw err;
    ^

AssertionError [ERR_ASSERTION]: Task never defined: build
    at getFunction (C:\rarus-test-master\node_modules\undertaker\lib\helpers\normalizeArgs.js:21:9)
    at map (C:\rarus-test-master\node_modules\arr-map\index.js:20:14)
    at normalizeArgs (C:\rarus-test-master\node_modules\undertaker\lib\helpers\normalizeArgs.js:30:10)
    at getFunction (C:\rarus-test-master\node_modules\undertaker\lib\helpers\normalizeArgs.js:21:9)
    at map (C:\rarus-test-master\node_modules\arr-map\index.js:20:14)
    at normalizeArgs (C:\rarus-test-master\node_modules\undertaker\lib\helpers\normalizeArgs.js:30:10)
SyntaxError: Unexpected token export
    at Module._compile (internal/modules/cjs/loader.js:760:23)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:827:10)
    at Module.load (internal/modules/cjs/loader.js:685:32)
    at Function.Module._load (internal/modules/cjs/loader.js:620:12)
    at Module.require (internal/modules/cjs/loader.js:723:19)
    at require (internal/modules/cjs/helpers.js:14:16)
    at execute (C:\Users\Anriko\AppData\Roaming\npm\node_modules\gulp\node_modules\gulp-cli\lib\versioned\^4.0.0\index.js:36:18)
    at Liftoff.handleArguments (C:\Users\Anriko\AppData\Roaming\npm\node_modules\gulp\node_modules\gulp-cli\index.js:196:24)
    at Liftoff.execute (C:\Users\Anriko\AppData\Roaming\npm\node_modules\gulp\node_modules\liftoff\index.js:201:12)
    at module.exports (C:\Users\Anriko\AppData\Roaming\npm\node_modules\gulp\node_modules\flagged-respawn\index.js:51:3

[Сергей delphinpro]

genrich_pauls, естественно, у вас же нет такой задачи. Вы посмотрите код, который скидывали в вопросе =)

[genrich_pauls]

Сергей delphinpro, на третьем работало чего на 4 эта таска понадобилась? без ние никак?
и как правильно ее добавить если надо?

[genrich_pauls]

и вот ругает,как исправить подскажите пожалуйста

export const stylesheets = () => {
^^^^^^

SyntaxError: Unexpected token export
    at Module._compile (internal/modules/cjs/loader.js:760:23)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:827:10)
    at Module.load (internal/modules/cjs/loader.js:685:32)
    at Function.Module._load (internal/modules/cjs/loader.js:620:12)
    at Module.require (internal/modules/cjs/loader.js:723:19)
    at require (internal/modules/cjs/helpers.js:14:16)
    at execute (C:\Users\Anriko\AppData\Roaming\npm\node_modules\gulp\node_modules\gulp-cli\lib\versioned\^4.0.0\index.js:36:18)
    at Liftoff.handleArguments (C:\Users\Anriko\AppData\Roaming\npm\node_modules\gulp\node_modules\gulp-cli\index.js:196:24)
    at Liftoff.execute (C:\Users\Anriko\AppData\Roaming\npm\node_modules\gulp\node_modules\liftoff\index.js:201:12)
    at module.exports (C:\Users\Anriko\AppData\Roaming\npm\node_modules\gulp\node_modules\flagged-respawn\index.js:51:3)