Gulp 没有覆盖目标文件

Question

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

.
├── 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 越来越大 - 它不会以某种方式覆盖它。

那么，有什么建议可能是导致问题的原因吗？

Answer 1

听起来您的 application.js 文件在您每次启动任务时都包含在您的 src 中。

您可以尝试使用gulp-debug 等插件注销流中的当前文件以确认。 (See this answer for that)

如果这是原因，您可以明确排除它：

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

Answer 2

试试下面一个

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