I am trying to copy a specific file src C:\Project\dir1\dirv-1.0.0\tools\file.exe to a specific directory dest C:\Project\dir2\ using gulp.
The version number in dirv-1.0.0 could change in the future, so I want to wildcard the version number.
Here is the task I have for that (gulpfile.js is in C:\Project):
gulp.task('copy', function(){
return gulp
.src('dir1\dirv-*\tools\file.exe')
.pipe(gulp.dest('dir2'));
});
This ends up generating the following dest file: C:\Project\dir2\dirv-1.0.0\tools\file.exe. What I want is C:\Project\dir2\file.exe.
How do I do this gulp copy task so that I can wildcard the src path but only copy file.exe to the dest path?
Use gulp-flatten
var gulp = require('gulp');
var flatten = require('gulp-flatten');
gulp.task('default', function(){
return gulp.src('./dir1/dirv-*1/test.txt')
.pipe(flatten())
.pipe(gulp.dest('dir2'));
});
Related
I am using gulp for minify JS and CSS.
Everything works fine, but I need add .watch for automatic this process.
Anyone help me please?
Here is my code:
// Require the npm modules we need
var gulp = require("gulp"),
rename = require("gulp-rename"),
cleanCSS = require("gulp-clean-css"),
terser = require("gulp-terser");
// Looks for a file called styles.css inside the css directory
// Copies and renames the file to styles.min.css
// Minifies the CSS
// Saves the new file inside the css directory
function minifyCSS() {
return gulp.src("./_statika/css/style.css")
.pipe(rename("style.min.css"))
.pipe(cleanCSS())
.pipe(gulp.dest("./css"));
}
// Looks for a file called app.js inside the js directory
// Copies and renames the file to app.min.js
// Minifies the JS
// Saves the new file inside the js directory
function minifyJS() {
return gulp.src("./_statika/js/scripts.js")
.pipe(rename("scripts.min.js"))
.pipe(terser())
.pipe(gulp.dest("./js"));
}
// Makes both functions available as a single default task
// The two functions will execute asynchronously (in parallel)
// The task will run when you use the gulp command in the terminal
exports.default = gulp.parallel(minifyCSS, minifyJS);
Thanks a lot
Just try this:
gulp.watch("./_statika/css/style.css", minifyCSS);
gulp.watch("./_statika/js/scripts.js", minifyJS);
Given the following dir structure:
<project>
|- src
|- gen
|- target
We have a Gulp build chain in place which performs the entire front-end build for us. Intermediate results are put in the gen directory and the final results are put in the target directory.
During development, we want to monitor the target directory and synchronize changes to a separate directory that contains our Grails based application. We use the following snippet for this:
'use strict';
var debug = require('gulp-debug');
var config = require('../config');
var gulp = require('gulp');
var watch = require('gulp-watch');
module.exports = {
//command: 'prod',
//desc: 'Builds "production" version',
run: function(){
gulp.task('watch', ['server'], function() {
// Copy files from the 'target' directory to the framework directory while developing
var source = config.dist.root,
destination = config.fw.root;
gulp.src(source + '/**/*', {base: source})
.pipe(debug({title: 'unicorn:'}))
.pipe(watch(source + '/**/*', {base: source}))
.pipe(debug({title: 'minotaur:'}))
.pipe(gulp.dest(destination))
.pipe(debug({title: 'centaur:'}));
});
}
};
When I update a source file, the build chain fires and puts the updated results in the target directory. But the updates are NOT synced to separate Grails directory. When I check the logging, I see this:
[14:29:42] Rebundle...
[14:29:42] minotaur: target\web-app\portal\js\appLoader.js
[14:29:43] minotaur: target\web-app\portal\js\appLoader.js
It seems that the file IS regenerated in the target directory and the regeneration IS picked up by the gulp-watch package. But the file is NOT written by the gulp.dest() function?!
What's might be going on here?
After some trial and error, it seems that you cannot use watch() in the middle of your pipeline. Instead, you should use it as the head of your pipeline (instead of gulp.src()). Splitting the single pipeline into two separate pipelines solved the issue.
So this (removed debug() statements for brevity):
gulp.src(source + '/**/*', {base: source})
.pipe(watch(source + '/**/*', {base: source}))
.pipe(gulp.dest(destination));
Becomes this:
gulp.src(source + '/**/*', {base: source})
.pipe(gulp.dest(destination));
watch(source + '/**/*', {base: source})
.pipe(gulp.dest(destination));
I have the following gulp task that is currently not working.
gulp.task('emails', function() {
gulp.src('views/emails/src/**/*.html')
.pipe(inky())
.pipe(gulp.dest('views/emails/dist/'+debug()+"/html.ejs"));
});
I would like to iterate over the /views/emails/src/ directory, find all html files, then use inky to convert them to html, and then copy the resulting html file to...
views/emails/dist/'+ folderName +"/html.ejs
where folderName is the name of the .html file that was processed.
I need this in order to get the file structure in the format that the npm email-templates package requires.
That's a job for gulp-rename:
var rename = require('gulp-rename');
var path = require('path');
gulp.task('emails', function() {
gulp.src('views/emails/src/**/*.html')
.pipe(inky())
.pipe(rename(function(file) {
file.dirname = path.join(file.dirname, file.basename);
file.basename = 'html';
file.extname = '.ejs';
}))
.pipe(gulp.dest('views/emails/dist/'));
});
Is there a way to use gulp-clean such that instead of passing in the files or directories I want to delete, to delete everything that does not match a specific file name in the directory?
For example, If I have 3 files in directory "dir":
dir/a.js
dir/b.js
dir/c.js
Sample Pseudocode of what I want to do, (delete everything in /dir/ thats not a.js:
gulp.src('!./dir/a.js').pipe(clean());
This should work:
var gulp = require('gulp');
var del = require('del');
gulp.task('clean', function(cb) {
del(['dir/**/*', '!dir/a.js'], cb);
});
If the excluded file is in a sub directory you need to exclude that dir from deletion. For example:
del(['dir/**/*', '!dir/subdir', '!dir/subdir/a.js'], cb);
or:
del(['dir/**/*', '!dir/subdir{,/a.js}'], cb);
gulp-filter can be used to filter files from a gulp stream:
var gulp = require('gulp');
var filter = require('gulp-filter');
gulp.src('**/*.js')
.pipe(filter(['*', '!dir/a.js']))
.pipe(clean());
I have a bunch of html files in a partials directory. Using gulp js, I want to minify and rename these files to .min.html. Please show me how to achieve this.
See here, using gulp-rename, if you just want to rename the files.
Something in the line of below should do:
var rename = require('gulp-rename');
gulp.src("./partials/**/*.hmtl")
.pipe(rename(function (path) {
path.suffix += ".min";
}))
.pipe(gulp.dest("./dist"));
In order to minify, you can use gulp-htmlmin. Pretty straightforward from the documentation:
var htmlmin = require('gulp-htmlmin');
gulp.task('compress', function() {
gulp.src('./partials/**/*.html')
.pipe(htmlmin())
.pipe(gulp.dest('dist'))
});
You can certainly combine the two to obtain the desired effect.