0

我有一些使用plop.js修改某个文件的 gulp 任务。如果我自己运行任务，它们就可以正常工作。

现在我有一个包装任务，我在其中提示用户他想要执行哪些任务，然后我想使用gulp.series().

它们都可以工作，但是对于那些需要修改相同源文件的任务，它只会应用第一次修改。似乎任务并没有真正按顺序执行，允许完成第一个更改，然后传递给第二个......

这是一些代码：

const gulp = require('gulp')

const strings = {
  polyfill: `polyfill-string-which-is-added-to-file`, // I simplified this one
  modernizr: `{ src: '/js/modernizr-custom.js', async: true, defer: true }`
}

/*
 * Replace specific comments with a string
 * Using plop modify actions
 */
function replaceComment(path, template, pattern) {
  console.log(` Replacing ${pattern} in ${path}...`)

  const nodePlop = require('node-plop')
  const plop = nodePlop()

  const generator = plop.setGenerator('replace', {
    prompts: [],
    actions: [
      {
        type: 'modify',
        path,
        pattern,
        template
      }
    ]
  })

  generator
    .runActions()
    .then(results => {
      console.log(`✅ Sucessfully modified ${path} with ${template}`)
    })
    .catch(err => {
      console.log('err', err)
    })
}

gulp.task('add-polyfill', function(done) {
  console.log('Adding IE11 polyfill to nuxt.config.js ...')

  const path = './nuxt.config.js'
  const pattern = '\/\*\ setup-autocomment-polyfill\ \*\/' // eslint-disable-line
  const template = strings.polyfill

  replaceComment(path, template, pattern)
  done()
})

gulp.task('add-modernizr', function(done) {
  console.log('Adding modernizr script to nuxt.config.js ...')

  const path = './nuxt.config.js'
  const pattern = '\/\*\ setup-autocomment-modernizr\ \*\/' // eslint-disable-line
  const template = strings.modernizr

  replaceComment(path, template, pattern)
  done()
})

gulp.task('setup', function(done) {
   return gulp.series('add-modernizr' , 'add-polyfill')(done)
})

如果有人可以在这里给我指点，我会很高兴。我必须更多地处理承诺吗？或者为什么 gulp.series 没有真正在一个系列中做这件事——我的意思是他们自己工作的任务......

提前干杯和感谢

4

1 回答 1

0

好的，我发现了问题所在。确实，这是有承诺的事情。该函数replaceComment()已启动，但done()之前replaceComment()已完成调用。所以我不得不等待replaceComment()我返回一个只在修改完成时才解决的承诺：

function replaceComment(path, template, pattern) {
  return new Promise((resolve, reject) => {

    console.log(` Replacing ${pattern} in ${path}...`)

    const nodePlop = require('node-plop')
    const plop = nodePlop()

    const generator = plop.setGenerator('replace', {
      prompts: [],
      actions: [
        {
          type: 'modify',
          path,
          pattern,
          template
        }
      ]
    })

    generator
      .runActions()
      .then(results => {
        console.log(`✅ Sucessfully modified ${path} with ${template}`)
        resolve()
      })
      .catch(err => {
        console.log('err', err)
        reject(err)
      })
  })
}

然后为每个任务添加异步等待：

gulp.task('add-polyfill', async function(done) {
  console.log('Adding IE11 polyfill to nuxt.config.js ...')

  const path = './nuxt.config.js'
  const pattern = '\/\*\ setup-autocomment-polyfill\ \*\/' // eslint-disable-line
  const template = strings.polyfill

  await replaceComment(path, template, pattern)
  done()
})

干杯

于 2019-10-18T11:56:00.727 回答