Gulp不会覆盖目标文件 [英] Gulp is not overwriting the destination file

问题描述

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

I've got a problem, regarding gulp. I decided to automate the process of how the source and styles are compiled into a single file, so I decided to use gulp for that purpose. However, it doesn't want to overwrite the application.js file that I'm creating from all .js files in my Project. The strange thing is that it actually overwrites the compiled css files, that is generated from all .less files in the Project. Here is how my Project file structure looks like:

.
├── 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任务中也进行了相同的操作，只是进行了较少的转换.还可以进行检查以最小化样式和来源，但默认情况下目前处于禁用状态.

As you can see, the gulp task services-source is going through each .js file in the apps folder and sub-folders, and concatenate all into a single file that should be put into compilation folder. Same is done in the services-styles task, just some less transformation is made. There is also a check to minify both styles and sources, but it's disabled by default for now.

我尝试在services-source任务的末尾添加，在其中您将编译文件的目标放置了一个用于覆盖的参数，如下所示:overwrite: true，但似乎没有任何反应.当我运行gulpfile.js时，每次都会使application.js越来越大-它不会以某种方式覆盖它.

I tried adding at the end of the services-source task, where you put the destination of the complied file a parameter for overwriting like so: overwrite: true, but nothing seems to happen. When I run the gulpfile.js it makes just the application.js bigger and bigger each time - it's not overwriting it somehow.

那么，任何建议可能是造成问题的原因?

So, any advice what can be the cause of the problem?

推荐答案

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

It sounds like your application.js file is being included in your src when you start the task each time.

您可以尝试使用 gulp-debug 之类的插件注销流中的当前文件以确认. (请参阅此答案)

You could try using a plugin such as gulp-debug to log out the current file in the stream to confirm. (See this answer for that)

如果这是原因，那么您可以明确排除它:

If that's the cause you can then explicitly exclude it:

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

这篇关于Gulp不会覆盖目标文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！