Преобразование gulpfile. js в v4 - PullRequest
0 голосов
/ 17 марта 2020

Я обновил Gulp до версии 4 и получаю ошибки при выполнении сборки gulp, поскольку мой файл gulpfile. js устарел. Мне нужна помощь в изменении синтаксиса моего файла gulpfile. js с Gulp v3 на Gulp v4. Ваша помощь будет принята с благодарностью.

var gulp = require('gulp');
var sass = require('gulp-sass');
var uglify = require('gulp-uglify');
var gulpIf = require('gulp-if');
var gutil = require("gulp-util");
var useref = require('gulp-useref');
var runSequence = require('run-sequence');
var del = require('del');
var cssnano = require('gulp-cssnano');
var imagemin = require('gulp-imagemin');
var webpackStream = require("webpack-stream");
var webpack = require("webpack");
var webpackConfig = require("./webpack.config.js");
var injectVersion = require('gulp-inject-version');


gulp.task('sass', function(){
  return gulp.src('src/scss/log.scss')
    .pipe(sass())
    .pipe(gulp.dest('src/css'))
});

gulp.task('images', function(){
  return gulp.src('src/images/*.+(png|jpg|gif|svg)')
    .pipe(imagemin())
    .pipe(gulp.dest('dist/images'))
});

gulp.task('webpack', function(){
  return gulp.src('src/main.js')
    .pipe(webpackStream( webpackConfig ))
    .pipe(injectVersion())
    .pipe(gulp.dest('src/js/'));
});

gulp.task('useref', function(){
  return gulp.src('src/*.html')
    .pipe(useref())
    .pipe(gulpIf('*.js', uglify()))
    .pipe(gulpIf('*.css', cssnano()))
    .pipe(gulp.dest('dist'))
});

gulp.task('move:js', function(){
  return gulp.src([
      'src/js/config.js.example',
      'src/js/worker.online.js',
      'src/js/worker.queue.js'
    ])
    .pipe(gulp.dest('dist/js'))
});

gulp.task('clean:dist', function() {
  return del.sync('dist');
});

gulp.task('watch', ['sass', 'webpack'], function(){
  gulp.watch('src/scss/*', ['sass']);
  gulp.watch('src/components/**/*.vue', ['webpack']);
  gulp.watch('src/*.js', ['webpack']);
});

gulp.task('build', function (callback) {
  runSequence('clean:dist',
    ['webpack', 'sass', 'images'],
    'useref',
    'move:js',
    callback
  )
});

gulp.task('default', ['webpack-dev-server', 'watch']);

.................................. ..........................

1 Ответ

0 голосов
/ 17 марта 2020

В версии 4 изменился способ определения зависимой задачи. Вот пример:

// V3
gulp.task('default', ['del'], function() {
   // default task code here
});

// v4
gulp.task('default', gulp.series('del', function() { 
    // default task code here
}));

//v3
gulp.task('default', ['scripts', 'styles'], function() {...});

// v4 

gulp.task('default', gulp.parallel('scripts', 'styles'));

Дополнительная информация:

https://www.liquidlight.co.uk/blog/how-do-i-update-to-gulp-4/

https://fettblog.eu/gulp-4-parallel-and-series/

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...