Question

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

.
├── 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将遍历.js文件夹和子文件夹中的每个apps文件，并将所有文件连接到一个应放入的文件中进入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（ “sourcefilepath”） .pipe（“destinationdirpath”，{overwrite：false}））

Gulp不会覆盖目标文件

2 个答案: