Gulp does not overwrite destination file
I have a problem regarding gulp. I decided to automate the process of linking the source and styles into one file, so I decided to use gulp for this purpose. However, it doesn't want to overwrite the file application.js
I am creating from all files .js
in my project. The weird thing is that it actually overwrites the compiled css files that are generated from all .less
files in the project. This is what 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
This is what mine looks like 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" ] );
} );
As you can see, the gulp task services-source
goes through each .js
file in the folder and subfolders apps
and combines everything into one file, which should be placed in the compilation
folder. The same is done in the task services-styles
, only some transformation is performed. There is also a check to minify both styles and sources, but is off by default by default.
I tried to add to the end of the task services-source
where you put the destination for the file to match the parameter to overwrite like this: overwrite: true
but nothing happens. When I run gulpfile.js
it only does application.js
more and more each time - it doesn't rewrite it somehow.
So any advice what might be causing the problem?
source to share
It looks like your application.js file is being included in your src every time you run the task.
You can try using a plugin like gulp-debug to dump the current file in a stream for confirmation. (see this answer for that)
If this is the reason, you can explicitly rule it out:
var sourcePaths = [
"!path/to/application.js",
basePath + "/**/*.js",
webPath + "/**/*.js"
];
source to share