My default task is to execute the "step2" task, which depends on step1. Step1 copies over a bunch of files, step2 is supposed to rename a single file, "file1.txt". My default task says to just do "step2". I am using gulp-rename.
gulp.task('step1', function() {
var files = [
'./folder1/**/*.*',
'./file1.txt'
];
return gulp.src(files, {base: "."})
.pipe(gulp.dest("./build"));
});
gulp.task('step2', ['step1'], function() {
gulp.src('./build/file1.txt')
.pipe(rename("./renamed-file1.txt"))
.pipe(gulp.dest("./build"));
});
The problem is I don't see a renamed file at all, and instead I see both the copy of the file I copied over and the renamed file. How do I fix this?
Also, why is it that for "./renamed-file1.txt", I have to specify it that way to ensure it gets in the build directory as opposed to ./build/renamed-file1.txt?
The gulp-rename plugin renames the files in the stream not the ones in the file system: I guess you should split your step1 in to 2 gulp flows renaming your file while copying it.
Related
I am using gulp 4 to process various css, js and mjml files which are triggered using gulp.watch to process files on save and everything is working in terms of that specific file being processed on save. What I have not been able to get working is having a save trigger processing of different files than the file that was saved.
Scenario: I have mjml files in a src/templates directory. Those file have mj-include tags which import files from src/templates/includes directory. When I save a file in the src/template/includes directory, I want gulp to process all the src/templates/*.mjml files. This way any change to a child file will trigger processing of all possible parent files to ensure the change is incorporated.
All of my doc reading and googling hasn't turned up solution.
var paths = {
mjmlincludes: ["src/templates/*.mjml"],
mjmlincludeswatch: ["src/templates/includes/*.mjml"],
mjmlincludesoutput: "src/templates/html/",
};
function mjmlincludesconvert() {
return gulp.src(paths.mjmlincludes).pipe(mjml()).pipe(gulp.dest(paths.mjmlincludesoutput));
}
function watchFiles() {
gulp.watch(paths.mjmlincludeswatch, mjmlincludesconvert);
}
const watch = gulp.parallel(watchFiles);
We have bundling our application using gulp process(using aurelia-bundler). As of now the bundle process destination folder resides inside the project folder named "dist". We need to place the destination folder outside the project folder
gulp.task('bundle', function (callback) {
runSequence('unbundle',
'bundle-config',
'copy-app-files',
'compress',
function () {
});
});
In theory, you just have to change the exportSrvRoot variable of the build/paths.js file. For instance:
//var exportSrvRoot = 'export/';
var exportSrvRoot = '../'; //this is outside of the project folder.
Now, the gulp export command will export the files to the folder above the project folder. The solution is the same for build output (gulp build/bundle), but you'd have to change the outputRoot variable instead of exportSrvRoot.
However, there is a problem in this approach. Since your export folder is outside of the project folder, if you run gulp export, you will get an error saying that gulp.del cannot delete a folder that is outside of the project folder. This could be solved by passing additional parameters to gulp.del, but the task uses vinyl-paths to call gulp.del, preventing you to send any additional parameters for it =/.
One of the ways to solve the above problem is deleting the line 36 of the export-release.js:
// use after prepare-release
gulp.task('export', function(callback) {
return runSequence(
'bundle',
//'clean-export', <---- this line
'export-copy',
callback
);
});
In this way, gulp export won't try to delete the folder, preventing the error. But now, you must delete the export folder manually before each time you run gulp export.
Another way to solve this is rewriting the clean-export task in order to remove its dependency from vinyl-paths.
Hope this helps!
I'm new to gulp and I tried to follow the documentation in https://www.npmjs.com/package/gulp-newer to understand how it works. However its not working as expected for the below task. I think I'm missing something obvious.
Here's the folder structure,
temp
file1.js
file2.js
new
file1.js
file3.js
change
<empty initially>
I want to compare temp folder with new folder and if there are any new files in new folder(which was not present in temp earlier) then move those files to change folder. This is just me trying to understand how gulp-newer works. Am I doing it right?
gulp.task('newer', function() {
return gulp.src('temp/*.js')
.pipe(newer('new/*.js'))
.pipe(gulp.dest('change'))
});
However when I run this task it just copy all the files in temp folder to change folder. So after task run change folder has file1.js and file2.js. I'm expecting just file3.js to be present in change(since that's a new file). Correct me if my understanding with the approach is incorrect.
From gulp-newer:
Using newer with many:1 source:dest mappings Plugins like gulp-concat
take many source files and generate a single destination file. In this
case, the newer stream will pass through all source files if any one
of them is newer than the destination file. The newer plugin is
configured with the destination file path.
and the sample code:
var gulp = require('gulp');
var newer = require('gulp-newer');
var concat = require('gulp-concat');
// Concatenate all if any are newer
gulp.task('concat', function() {
// Add the newer pipe to pass through all sources if any are newer
return gulp.src('lib/*.js')
.pipe(newer('dist/all.js'))
.pipe(concat('all.js'))
.pipe(gulp.dest('dist'));
});
it seems that you need to pass in all the files already concatenated to newer. In your case:
gulp.task('newer', function() {
return gulp.src('temp/*.js')
.pipe(newer('new/*.js'))
.pipe(concat('*.js'))
.pipe(gulp.dest('change'))
});
Also, since newer checks the files modified date make sure that the files are actually newer. I know it's obvious, but I'm usually stuck on "obvious" stuff.
May I also suggest gulp-newy in which you can manipulate the path and filename in your own function. Then, just use the function as the callback to the newy(). This gives you complete control of the files you would like to compare.
This will allow 1:1 or many to 1 compares.
newy(function(projectDir, srcFile, absSrcFile) {
// do whatever you want to here.
// construct your absolute path, change filename suffix, etc.
// then return /foo/bar/filename.suffix as the file to compare against
}
I see the console log statement that js task run twice once I change any of the javascript files. I wonder why it run two times for each change?
var gulp = require('gulp');
var concat = require("gulp-concat");
var uglify = require("gulp-uglify");
gulp.task('default', function() {
gulp.watch("public/js/**/*.*", ["js"]);
});
gulp.task("js", function(){
var js = [
"public/js/**/*.js",
"!public/js/api/**/*.js"
];
gulp.src(js)
.pipe(concat("app.min.js"))
.pipe(uglify())
.pipe(gulp.dest("public/js"));
});
Console
[13:02:27] Starting 'js'...
[13:02:27] Finished 'js' after 1.6 ms
[13:02:27] Starting 'js'...
[13:02:27] Finished 'js' after 5.1 ms
The problem is that you are watching the same directory which is used as the destination directory in the task you run when the change is detected. Currently, your build flow looks like this:
Imagine you're modifying a file public/js/script.js.
The watch task detects the change and starts your custom js task. As the result, the public/js/app.min.js file is created.
Since the app.min.js is inside the watched directory, the watch task detects another change, hence the js task is executed once more. You actually should run into a loop, but Gulp seems to be smart enough do detect such a cycle.
The best solution for this issue is to separate source files from the output. In your task pipe, set the destination folder to something outside the source directory, for example:
.pipe(gulp.dest("dist/js"));
After that, your project should has the following structure:
public
js
script.js
dist
js
app.min.js
grunfile.js
...
Where the public directory is used to keep the source files that are watched and the dist directory holds the output of the build. If I were you, I would reconsider renaming the public directory to something more descriptive like src, but that is up to you :)
I currently use gulp for most of my automation tasks. To keep the process optimised I check for file changes before processing the file. The problem is that when I rebuild my files and only a single file in the set has changed, the concat file only includes the changed file. Is there a way to pickup all the files in case of concat
gulp.task('myScripts', function() {
return gulp.src(['public/js/one.js','public/js/two.js'], {base: 'public/js'})
.pipe(changed('public/dist/original/js'))
.pipe(gulp.dest('public/dist/original/js'))
.pipe(uglify())
.pipe(concat('all.min.js'))
.pipe(gulp.dest('public/dist/js'));
});
I am using gulp-changed to check for file changes, Here are the scenarios:
When running it for the first time, it takes both the miles and minifies them.
When only one file is changed after that, the concatenated file 'all.min.js' only contains the minified version of the changed file.
Can anyone please help me with how I can concat all the files even if only one file changes?
You should require gulp-remember and call it before concat. Gulp-remember works with gulp-changed and restores the previous changed files into the stream.
Have a look to this official recipe: Incremental rebuilding, including operating on full file sets