Question

我已经将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']);

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

Answer 1

第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/

将gulpfile.js转换为v4

1 个答案: