代码之家 › 专栏 › 技术社区 › flysi3000

有条件地使用带有gulp if的函数

gulp

flysi3000 · 技术社区 · 6 年前

我试图在生产中有条件地更改JS文件的路径。我在用 gulp-inject-string 随着 gulp-if 要调用插入my remote path+一系列html文件的父文件夹名称的函数,请执行以下操作:

```
...(require a bunch of stuff here)...
var inject = require('gulp-inject-string');

function getFolders(dir) {
    return fs.readdirSync(dir)
        .filter(function(file) {
            return fs.statSync(path.join(dir, file)).isDirectory();
        });
}

function injectAfterEach(src) {
    var folders = getFolders(config.root.dest);

    var tasks = folders.map(function(folder) {
        if (folder !== 'base') {
            var fullPath = path.join(config.remotePath, folder, '/');
            console.log('folder: ' + fullPath);
            return gulp.src(src)
                .pipe(inject.afterEach('<script src="', fullPath))
                .pipe(gulp.dest(config.tasks.html.dest))
        }
    });
    return tasks;
}

gulp.task('html', function() {

    return gulp.src(config.tasks.html.src)
        .pipe(gulpif(process.env.NODE_ENV == 'production', injectAfterEach(config.tasks.html.src) ))
        .pipe(gulpif(process.env.NODE_ENV == 'production', removeCode({ production: true })))
        .pipe(gulpif(process.env.NODE_ENV == 'production', htmlmin(config.tasks.html.htmlmin)))
        .pipe(gulp.dest(config.tasks.html.dest))
        .pipe(browserSync.stream());
});
```

我不断得到一个“dest.on不是函数”错误,我想这是因为我的 injectAfterEach 没有返回一条流。变换对象?有人能澄清有条件地运行该功能的最佳方式吗?我的大口喝起来有点不稳,但我试着参考 api docs 对于这个特定的用例。

1 回复 | 直到 6 年前

Mark 6 年前

我想你想要下面这样的东西。我简化了一些事情,以便测试它。

第一点:你的 getFolders() 功能可以很容易地用 glob.sync() 见电话 glob options .由于您显然只需要文件夹,因此您的全局调用的全局模式必须以“ / “,即a path.sep .

这里返回流的关键点是使用 gulp-merge 它允许您返回每个文件夹的合并流。绘制各个流的地图。

const gulp = require('gulp');
const path = require('path');
const merge = require('gulp-merge');
const gulpif = require('gulp-if');
const glob = require("glob");
const inject = require('gulp-inject-string');


function injectAfterEach(src) {

  const folders = glob.sync(src);
  console.log(folders);

  return merge(folders.map(function (folder) {

    console.log("folder basename = " + path.basename(folder));

    if (path.basename(folder) !== 'base') {

      let fullPath = path.join("RemotePath", path.sep, path.basename(folder), path.sep);
      console.log('fullPath: ' + fullPath);

        return gulp.src(path.join(folder, '*.html') )
            .pipe(inject.afterEach('<script src="', fullPath))
            .pipe(gulp.dest('dist'))
      }
  }));
}

gulp.task('default', function() {

  return gulp.src('./htmlFolder')

    .pipe(gulpif(true, injectAfterEach('./htmlFolders/**/')))

      // just commented out for testing
      // .pipe(gulpif(process.env.NODE_ENV == 'production', removeCode({ production: true })))
      // .pipe(gulpif(process.env.NODE_ENV == 'production', htmlmin(config.tasks.html.htmlmin)))
      .pipe(gulp.dest('dist'))
      // .pipe(browserSync.stream());
});