时间戳

首页 > 解决方案 > Gulp 任务的多个来源

gulp - Gulp 任务的多个来源

问题描述

我正在尝试完成一些我觉得应该是相对基本的任务，但我很难弄清楚我做错了什么。

我需要：

  1. 我写的 lint javascript，
  2. 我用通过 NPM 下载的 3rd 方 javascript 编写的 concat javascript，
  3. 丑化它

我将路径存储在我的 package.json 文件中，所以我的应用程序库中有这个：

{
  ...,
  "paths": {
    "src": {
      "js": "./src/js/",
      "appLibraries": [
        "./node_modules/jquery/dist/jquery.js",
        "./node_modules/slick-carousel/slick/slick.js"
    },
    "dist": {
      "js": "./build/js"
    }
  }
}

我有一个简单的 jshint 函数：

function lintScripts() {
    return gulp
        .src( pkg.paths.src.js + '**/*.js' )
        .pipe( $.jshint() )
        .pipe( $.jshint.reporter( 'jshint-stylish' )
}

这工作正常。我实际编译我的 JS 的函数：

function scripts() {
    lintScripts();

    return gulp
    .src( pkg.paths.src.js + '**/*.js', pkg.paths.src.appLibraries )
    // do my other stuff
    .pipe( gulp.dest( pkg.paths.dist.js )
}

当我这样做时，我只得到实际处理的第一个参数。我已经尝试src为此换行：.src([ pkg.paths.src.js + '**/*.js', pkg.paths.src.appLibraries ])因为我知道它可以接受一个数组，但显然它不能接受一个数组数组，因为我收到了这个错误：Invalid glob argument after ./src/js/**/*.js

我可以通过将我的 package.json 路径更新为以下内容来解决这个问题，但这似乎很愚蠢和多余：

{
  ...,
  "paths": {
    "src": {
      "js": "./src/js/",
      "appLibraries": [
        "./node_modules/jquery/dist/jquery.js",
        "./node_modules/slick-carousel/slick/slick.js",
        "./src/js/**/*.js"
    },
    "dist": {
      "js": "./build/js"
    }
  }
}

我错过了什么？？？

标签： gulp

解决方案

除了您提供的代码中的几个错别字之外，如果我将数组 ( pkg.paths.src.appLibraries) 放在首位并传播该数组并将整个内容放入数组中，它确实对我有用，如下所示：

.src( [...pkg.paths.src.appLibraries, pkg.paths.src.js + '**/*.js'] )

不要问我为什么这些更改会有所不同 - 我查看了gulpjs问题和src文档，但找不到任何表明它应该是必要的东西。我建议您自己在那里提交一个问题，但它可能会等待一段时间。

也许gulp.src可以采用数组或字符串，但不能同时采用。在这一点上，文档可能更正式......

你总是可以src像这样添加一个：

function scripts() {

  return gulp

  .src(pkg.paths.src.js + '**/*.js')
    .pipe(gulp.src(pkg.paths.src.appLibraries))
    .pipe( gulp.dest( pkg.paths.dist.js ))
};

推荐阅读