html - 错误：使用单数 glob gulp 4 找不到文件

Question

我在使用 gulp 4 构建时遇到问题。

我得到这个错误：

Error: File not found with singular glob: /app/build/js/all.min.js (if this was purposeful, use `allowEmpty` option)
        at Glob.<anonymous> (/app/node_modules/glob-stream/readable.js:84:17)
        at Object.onceWrapper (events.js:315:30)
        at emitOne (events.js:116:13)
        at Glob.emit (events.js:211:7)
        at Glob._finish (app/node_modules/glob/glob.js:197:8)
        at done (app/node_modules/glob/glob.js:182:14)
        at Glob._processSimple2 (app/node_modules/glob/glob.js:688:12)
        at app/node_modules/glob/glob.js:676:10
        at Glob._stat2 (app/node_modules/glob/glob.js:772:12)
        at lstatcb_ (app/node_modules/glob/glob.js:764:12)
        at RES (/app/node_modules/inflight/inflight.js:31:16)
        at f (app/node_modules/once/once.js:25:25)
        at FSReqWrap.oncomplete (fs.js:152:21)

这是我的 gulpfile.js

var gulp = require('gulp');
var environments = require('gulp-environments');
var htmlReplace = require('gulp-html-replace');
var preprocess = require('gulp-preprocess');
var replace = require('gulp-replace');
var concat = require('gulp-concat');
var terser = require('gulp-terser');
var filelist = require('gulp-filelist');
var addsrc = require('gulp-add-src');
var rename = require('gulp-rename');
var gulpSequence = require('gulp-sequence');
var textTransformation = require('gulp-text-simple');
var less = require('gulp-less');
var reworkUrls = require('gulp-rework-urls');
var cleanCss = require('gulp-clean-css');
var gulpif = require('gulp-if');
var hash = require('gulp-hash-filename');
var log = require('fancy-log');
var colors = require('ansi-colors');
var PluginError = require('plugin-error');
var del = require('del');
var argv = require('yargs').argv;
var _ = require('lodash');
var file = require('gulp-file');
var shell = require('gulp-shell');
var fs = require('fs');

var app = argv.app || 'main';
var vendorFree = /^true$/i.test(process.env.VENDOR_FREE) || false;
console.info('Is vendor free: [' + vendorFree + ']');
var appendHash = !argv.nohash;
console.info('Appending hash to resource file names: [' + appendHash + ']');

var config = {
  targetDir: 'build',
  targetJs: 'js/all.min.js',
  targetConfig: 'js/config.json',
  targetCss: 'css/all.min.css',
  targetLessCss: 'css/all.less.css',
  targetFonts: 'fonts',
  htmlTemplate: app + '/index.template.html',
  targetHtml: 'index.html',
  fileNameFormat: '{name}.{hash}{ext}'
};

var sources = {};

var development = environments.development;
var production = environments.production;

var env = environments.current().$name;
console.info('Environment: [' + env + ']');

if ([development.$name, production.$name].indexOf(env) === -1) {
  console.info('Unsupported Environment [' + env + ']. Building as production...');

  environments.current(production);
}

var params = JSON.stringify(_.merge(loadConfig('default'), loadConfig(env), {app: app, vendorFree: vendorFree}));

function targetPath(subPath) {
  return config.targetDir + '/' + subPath;
}

function _loadConfig(fileName, dir) {
  var filePath = './' + dir + '/config/' + fileName + '.json';

  return fs.existsSync(filePath) ? require(filePath) : null;
}

function loadConfig(fileName) {
  return _.merge(_loadConfig(fileName, './'), _loadConfig(fileName, app));
}

var onLessCompileError = function (err) {
  log.error(colors.red('[ERROR]'), err);

  this.emit('end', new PluginError('less', err, {showStack: true}));

  if (!argv.skipError) {
    process.exit(1);
  }
};

gulp.task('js', gulp.series([
  production() && 'js:bundle',
    function () {
      console.log('config.targetJs: ', config.targetJs);
      return gulp.src([
        'node_modules/core-js/client/shim.min.js',
        'node_modules/zone.js/dist/zone.min.js',
        'node_modules/hammerjs/hammer.min.js'
      ])
        .pipe(development(addsrc.append('node_modules/systemjs/dist/system.src.js')))
        .pipe(production(addsrc.append(targetPath(config.targetJs))))
        .pipe(development(addsrc.append('config.js')))
        .pipe(production(terser({
          mangle: {
            keep_fnames: true
          },
          compress: {
            pure_funcs: [
              'console.debug', 'console.info', 'console.log'
            ]
          }
        })))
        .pipe(production(concat(config.targetJs)))
        .pipe(production(replace(/^/, "document.addEventListener('DOMContentLoaded', function() {")))
        .pipe(production(replace(/$/, '})')))
        .pipe(production(gulpif(appendHash, hash({format: config.fileNameFormat}))))
        .pipe(production(gulp.dest(config.targetDir)))
        .pipe(filelist())
        .pipe(textTransformation(function (jsFiles) {
          sources.js = eval(jsFiles);
        })());
    }
  ].filter(Boolean)));


gulp.task('js:config', function () {
  return gulp.src([], {allowEmpty: true})
    .pipe(file(config.targetConfig, params))
    .pipe(gulp.dest(config.targetDir));
});

gulp.task('js:bundle', shell.task('npm run pack -- --env.appName=' + app + (appendHash ? '' : ' --env.nohash')));

gulp.task('less', function () {
  return gulp.src('less/styles.less')
    .pipe(less().on('error', onLessCompileError))
    .pipe(rename(config.targetLessCss))
    .pipe(gulp.dest(config.targetDir));
});

  gulp.task('css', gulp.series('less', function() {
    return gulp.src([
      'node_modules/@angular/material/prebuilt-themes/indigo-pink.css',
      'node_modules/open-sans-fontface/open-sans.css',
      'node_modules/typeface-rubik/index.css'
    ]).pipe(production(reworkUrls(function (url) {
      return url.replace(/^(.\/)?((images)|(fonts)\/)/, '$1../$2')
        .replace(/^.\/files\//, '../fonts/');
    })))
      .pipe(addsrc.append(targetPath(config.targetLessCss)))
      .pipe(production(concat(config.targetCss)))
      .pipe(production(cleanCss()))
      .pipe(production(gulpif(appendHash, hash({format: config.fileNameFormat}))))
      .pipe(production(gulp.dest(config.targetDir)))
      .pipe(filelist())
      .pipe(textTransformation(function (cssFiles) {
        sources.css = eval(cssFiles);
      })());
  }));

gulp.task('font', function () {
  return gulp.src([
    'node_modules/open-sans-fontface/fonts/**/*.{eot,svg,ttf,woff,woff2}',
    'node_modules/typeface-rubik/files/**/*.{eot,svg,ttf,woff,woff2}'
  ])
    .pipe(gulp.dest(targetPath(config.targetFonts)));
});

gulp.task('clean', function () {
  del.sync([config.targetDir, config.targetHtml]);
});

gulp.on('err', function(e) {
  console.log(e.err.stack);
});

gulp.task('html', gulp.series(gulp.parallel('js', 'css'), function() {
  return gulp.src(config.htmlTemplate)
    .pipe(htmlReplace({
      css: {
        src: sources.css,
        tpl: '<link rel="stylesheet" type="text/css" href="%s" />\n'
      },
      js: {
        src: sources.js,
        tpl: '\n<script src="%s"></script>'
      },
      config: {
        src: params,
        tpl: '<script nonce="<%- nonce %>">window.Config = %s</script>'
      },
      'config-backend': {
        src: params,
        tpl: '<script nonce="<%- nonce %>">' +
        "window.Config = %s;" +
        "window.EnvironmentConfig = JSON.parse('<%- config %>');" +
        '</script>'
      }
    }))
    .pipe(preprocess({
      extension: 'js'
    }))
    .pipe(rename(config.targetHtml))
    .pipe(gulp.dest(''));
}));

gulp.task('watch:less', gulp.series('less', function() {
  return gulp.watch('less/**/*.less', gulp.parallel(['less']));
}));
'js:config'].concat(production() ? 'font' : [])));
gulp.task('default', gulpSequence('clean', gulp.series(['html', 'js:config', production() && 'font'].filter(Boolean))));

请你帮助我好吗？

我需要 gulp 4 因为 gulp 3 很脆弱。

我尝试使用allowEmpty：true。没有结果。

此代码适用于 gulp 3。

任何帮助，将不胜感激。

对不起我的英语不好，这不是我的母语。

标签： htmlwebgulp