Gulp没有覆盖目标文件

Question

我有一个关于gulp的问题。我决定使用gulp自动化源代码和样式编译成单个文件的过程。但是，它不想覆盖由我的项目中所有.js文件创建的application.js文件。奇怪的是，它实际上覆盖了从项目中所有.less文件生成的已编译css文件。以下是我项目文件结构的样子：

.
├── gulpfile.js
└── apps
    ├── base
        ├── controllers
            ├── controllerBaseOne.js
            └── controllerBaseTwo.js
        ├── directives
            ├── directiveBaseOne.js
            └── directiveBaseTwo.js
        ├── services
            └── serviceBaseOne.js
        └── styles
            └── styleBase.less
        ├── header.html
        └── index.html
    ├── services
        ├── compilation
            ├── application.js
            └── application.css
        ├── controllers
            ├── controllerServicesOne.js
            ├── controllerServicesTwo.js
            └── controllerServicesThree.js
        ├── directives
            ├── directiveServicesOne.js
            ├── directiveServicesTwo.js
            └── directiveServicesThree.js
        ├── services
            ├── serviceServicesOne.js
            └── serviceServicesTwo.js
        └── styles
            ├── styleServicesOne.less
            ├── styleServicesTwo.less
            └── styleServicesThree.less
        ├── header.html
        └── index.html
    ├── appMain.js
    └── config.json

现在我的gulpfile.js的样子是这样的：

var gulp = require( "gulp" );
var gulpif = require( "gulp-if" );
var concat = require( "gulp-concat" );
var uglify = require( "gulp-uglify" );
var less = require( "gulp-less" );
var cleanCSS = require( "gulp-clean-css" );

// application components and paths:
var compileMinify = false;
var basePath = process.cwd() + "apps/base";
var webPath = process.cwd() + "apps/services";
var compilationPath = "compilation";
var appCompiledFileName = "application";
var stylePaths = [
    basePath + "/styles/**/*.less",
    webPath + "/styles/**/*.less"
];
var sourcePaths = [
    basePath + "/**/*.js",
    webPath + "/**/*.js"
];

gulp.task( "services-source", function() {
    return gulp.src( sourcePaths )
        .pipe( concat( appCompiledFileName + ".js" ) )
        .pipe( gulpif( compileMinify, uglify() ) )
        .pipe( gulp.dest( compilationPath, { cwd: webPath } ) );
} );
gulp.task( "services-styles", function() {
    return gulp.src( stylePaths )
        .pipe( concat( appCompiledFileName + ".less" ) )
        .pipe( less() )
        .pipe( gulpif( compileMinify, cleanCSS( { debug: true }, function( details ) {
            console.log( details.name + " original size: " + details.stats.originalSize );
            console.log( details.name + " minified size: " + details.stats.minifiedSize );
        } ) ) )
        .pipe( gulp.dest( compilationPath, { cwd: webPath } ) );
} );
gulp.task( "services", [ "services-source", "services-styles" ], function() {
    gulp.watch( sourcePaths, [ "services-source" ] );
    gulp.watch( stylePaths, [ "services-styles" ] );
} );

如您所见，gulp任务services-source正在遍历apps文件夹及其子文件夹中的每个.js文件，并将它们连接成一个单独的文件，应该放置在compilation文件夹中。在services-styles任务中也是这样做的，只是进行了一些较少的转换。还有检查是否对样式和源代码进行缩小处理，但默认情况下已禁用。

我尝试在services-source任务末尾添加参数来覆盖目标文件，像这样：overwrite: true，但似乎没有发生任何事情。当我运行gulpfile.js时，application.js文件会变得越来越大，而且似乎无法覆盖它。

那么，有什么建议可以解决问题吗？

- GBak

Answer 1

听起来像是每次启动任务时都会将你的 application.js 文件包含在 src 中。

你可以尝试使用像 gulp-debug 这样的插件来记录流中当前文件以确认。(参见此答案) 如果这是原因，那么你可以显式地将其排除：

var sourcePaths = [
  "!path/to/application.js",
  basePath + "/**/*.js",
  webPath + "/**/*.js"
];

- Gary

---

你真是救了我的命啊！我花了三个小时思考问题所在，结果发现问题出在任务中包含了“编译”文件夹... 所以我也将其添加到了“sourcePaths”数组中： "!" + webPath + "/" + compilationPath + "/**/*.js"非常感谢！ :) - GBak

Answer 2

尝试以下代码：

gulp.src("源文件路径") .pipe("目标文件夹路径", { overwrite: false }))

- Gajanan