Gulp：将 Gulpfile.js 从 gulp 3 迁移到 4

Question

我正在尝试迁移我现有的网站，该网站正在使用 gulp 3。现在将 gulp 从 3 升级到 4。

下面是Gulpfile.js

'use strict';

var gulp = require('gulp'),
  autoprefixer = require('gulp-autoprefixer'),
  sass = require('gulp-sass'),
  sourcemaps = require('gulp-sourcemaps'),
  scsslint = require('gulp-scss-lint'),
  jshint = require('gulp-jshint'),
  shell = require('gulp-shell'),
  spritesmith = require('gulp.spritesmith'),
  browserSync = require('browser-sync'),
  g = require('gulp-load-plugins')(),
  reload = browserSync.reload,
  src = {
    scss: '../scss/**/*.scss',
    css: '../css',
    baseCss: '../css/base',
    twigFile: '../pattern-lab/source/_**/**/*.twig',
    jsonFile: '../pattern-lab/source/_**/**/*.json',
    mdFile: '../pattern-lab/source/_**/**/*.md',
    latestChangeFile: '../pattern-lab/public/latest-change.txt',
    javascript: '../js/*.js',
    cssFile: '../css/*.css',
    imageSprite: '../images/sprite/*.png',
  };

// Build pattern-lab
gulp.task('build-pattern-lab', shell.task([
 'cd ../pattern-lab/; M | composer install --no-dev; cd ../.npm/;'
]));

// Task for local, static development.
gulp.task('local-development', gulp.series('sprite', 'style-split', 'pl-generate', function() {
  browserSync({
    server: {
      baseDir: "../",
    }
  });

  gulp.watch(src.scss, ['style-split']);
  gulp.watch(src.javascript, reload);
  gulp.watch(src.cssFile, reload);
  gulp.watch(src.twigFile, ['pl-generate']);
  gulp.watch(src.jsonFile, ['pl-generate']);
  gulp.watch(src.mdFile, ['pl-generate']);
  gulp.watch(src.imageSprite, ['sprite']);
  gulp.watch(src.latestChangeFile).on('change', reload);
}));

// Sprite.
gulp.task('sprite', function generateSpritesheets() {
  var spriteData = gulp.src('./../images/sprite/*.png')
    .pipe(spritesmith({
      padding: 5,
      imgName: 'sprite.png',
      imgPath: '../images/sprite.png',
      cssName: '_sprite.scss'
    }));

  spriteData.img.pipe(gulp.dest('./../images/'));
  spriteData.css.pipe(gulp.dest('./../scss/helpers/'));
  return spriteData;
});

// Sass watch, compile css when sass is changed.
gulp.task('sass-watch', ['style-split'], function () {
  gulp.watch(src.scss, ['style-split']);
});

// SCSS Lint.
gulp.task('scss-lint', function () {
  return gulp.src(src.scss)
    .pipe(
      scsslint({
        'config': 'scss-lint.yml',
      })
    );
});

// Task for compiling sass in development mode with all features enabled.
gulp.task('sass', function () {
  var stream = gulp.src('../scss/{,*/}*.{scss,sass}')
    .pipe(sourcemaps.init())
    .pipe(sass({
      errLogToConsole: true
    }))
    .on('error', function (err) {
      console.error('Error!', err.message);
    })
    .pipe(autoprefixer({browsers: ['safari >= 8', 'last 3 versions', '> 2%']}))
    .pipe(sourcemaps.write())
    .pipe(gulp.dest(src.baseCss));
  return stream;
});

gulp.task('style-split', ['sass'], function() {
  return gulp.src(src.baseCss + "/styles.css")
    .pipe(g.extractMediaQueries())
    .pipe(gulp.dest(src.css));
});

// Generate pattern-lab.
gulp.task('pl-generate', shell.task([
 'php ../pattern-lab/core/console --generate'
]));

// Javascript Lint.
gulp.task('js-lint', function () {
  return gulp.src(src.javascript)
    .pipe(jshint())
    .pipe(jshint.reporter('default'));
});   
    
gulp.task('default', gulp.series('local-development', function() {
    console.log('Build completed.');
}));

当运行默认 gulp 时，它会抛出错误，AssertionError [ERR_ASSERTION]: Task never defined: sprite

我在任务中使用了gulp 4 种语法。我需要为迁移执行任何特定操作吗？有帮助吗？

Answer 1

尝试定义您的 "sprite" 任务在它被 "local-development" 任务（以及任何其他可能属于相同模式的任务）调用之前。

通过 gulp.task(...) 表单创建任务时，您确实需要在调用任务之前创建这些任务（以便可以注册）。否则你会forward-referencing他们

Forward references

A forward reference is when you compose tasks, using string references, that haven't been registered yet. This was a common practice in older versions, but this feature was removed to achieve faster task runtime and promote the use of named functions.

In newer versions, you'll get an error, with the message "Task never defined", if you try to use forward references.

来自 Forward reference documentation

function myGulpTask() {...} 创建任务的一个优点是不需要在调用它们之前声明。

Gulp：将 Gulpfile.js 从 gulp 3 迁移到 4

Gulp: Migrating Gulpfile.js from gulp 3 to 4

gulp

gulp-sass

gulp-watch

gulp-sourcemaps

Forward references