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 to log out the current file in the stream to confirm. (See this answer for that)

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

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

Answer 2

试试下面一个

gulp.src("sourcefilepath") .pipe("destinationdirpath", { overwrite: false }))

Gulp 未覆盖目标文件

Gulp is not overwriting the destination file

javascript

concat

build

overwrite

gulp