I am trying to copy all .css files within subfolders to another folder with gulp
gulp.task('copyCss', function () {
gulp.src('/bower_components/*.{css}')
.pipe(gulp.dest('/content/css'));
});
But this does not work, because in bower_components i have a lot of subfolders?
You are not able to access the nested directory. Try using gulp-flatten:
var flatten = require('gulp-flatten');
gulp.task('copyCss', function () {
gulp.src('/bower_components/**/*.css')
.pipe(flatten())
.pipe(gulp.dest('/content/css'));
});
Related
I'm working to copy a file style.scss from specific directory to multiple folders that start with skin-.
In fact, i don't know how to tell gulp to choose folders that start with this string skin-.
Here is my gulp code:
// Copy Files
gulp.task( "copyFiles" , function() {
return gulp.src( "app/scss/style.scss" )
.pipe( gulp.dest( "app/scss/skins/skin-*" ) );
});
At command prompt, it says that the task is running but with no result.
I have searched a lot around for that, but i didn't find a method. I found this question here which near to my question context, but it didn't help! Gulp copy single file (src pipe dest) with wildcarded directory
Modifying only slightly #davidmdem's answer at saving to multiple destinations:
const gulp = require("gulp");
const glob = require("glob");
const destinationFolders = glob.sync("app/scss/skins/skin-*");
gulp.task('copyFiles', function () {
var stream = gulp.src("app/scss/style.scss");
destinationFolders.forEach(function (skinFolder) {
stream = stream.pipe(gulp.dest(skinFolder));
});
return stream;
});
You cannot put a glob into gulp.dest as you are trying in your question.
I wrote a gulp task to process all scss files in one folder into separate css files.
gulp.task('process', function () {
gulp.src(['./base.scss', './layout/*.scss'])
.pipe(sass())
.pipe(gulp.dest('dist'))
});
Now I want to concatenate one file (base.scss) to each scss process; how can I do this?
This should help you but I didn't test it. Gulp-foreach is good for you, it will treat each file from gulp.src as its own stream which you can manipulate separately. The code below then appends your base.scss to each stream, then concatenates them and then they go through the sass pipe.
var foreach = require('gulp-foreach');
var concat = require('gulp-concat');
var addsrc = require('gulp-add-src');
gulp.task('default', function () {
return gulp.src('./layout/*.scss')
// treats each file in gulp.src as a separate stream
.pipe(foreach(function (stream, file) {
return stream
// append or prepend
.pipe(addsrc.append('./base.scss'))
// you do have access to the 'file' parameter here if you need to rename
.pipe(sass())
.pipe(concat(path.basename(file.path)))
.pipe(gulp.dest('dist'));
}));
});
Let me know if it works for you.
I have a gulp script which is supposed to copy some dll's in sub directories, if those files have the ending with for instace .Plugin. So I have this structure in my solution:
Now I want to copy all of my assemblies with name ending with .Plugin.dll up to the folder Plugins right under Host. This is my gulp script so far:
gulp.task('pluginsCopy', function (cb) {
gulp.src('.\/**/bin/Debug/*.Plugins')
.pipe(newer("bin/Debug/Plugins/"))
.pipe(gulp.dest("bin/Debug/Plugins/"))
});
As you can see, I dont have that much experience with gulp, but could someone please give me a hint?
Thanks!
You could do something like this:
var gulp = require('gulp');
var bases = {
app: 'MySolution/',
dist: 'MySolution/bin/Debug/Plugins',
};
var paths = {
text: '**/*.dll.txt'
};
// Copy all other files to dist directly
gulp.task('copy', function() {
// Copy txt
gulp.src(paths.text, {cwd: bases.app})
.pipe(gulp.dest(bases.dist));
});
gulp.task('default', ['copy']);
Figured it out:
gulp.task('pluginCopy', function (cb) {
gulp.src('../*Plugin/bin/Debug/*.Plugin.dll')
.pipe(newer("bin/Debug/Plugins/"))
.pipe(rename({ dirname: '' }))
.pipe(gulp.dest("bin/Debug/Plugins/"))
});
The code bellow doesn't merge correctly rev-manifest.json file.
I loop several JS tasks and just one is merged, although hash files are being created and stored correctly.
I already tried a ton of things, I checked gulp-rev and some users seam to have similar problems. Some of them are creating several manifest files and proceed with the actual merge at the end. I would like to discard this solutions since it's slow and ugly.
If I comment the concat(...) line the manifest file registers all the JS tasks.
Is this a BUG or am I missing something here?
gulp 3.9.1
gulp-concat 2.6.0
gulp-rev 7.0.0
var gulp = require('gulp');
var less = require('gulp-less');
var minifycss = require('gulp-minify-css');
var jshint = require('gulp-jshint');
var uglify = require('gulp-uglify');
var concat = require('gulp-concat');
var rev = require('gulp-rev');
var jsFiles = {
task1: [
'./path/file1.js'
],
task2: [
'./path/file2.js',
'./path/file2.js'
]
};
function jsTask(key) {
gulp.task(key, function() {
gulp.src(jsFiles[key])
.pipe(jshint())
.pipe(jshint.reporter('default'))
.pipe(uglify())
// IT WORKS WHEN I COMMENT THIS LINE
.pipe(concat(key + '.min.js'))
.pipe(rev())
.pipe(gulp.dest('./public/js'))
.pipe(rev.manifest({merge:true }))
.pipe(gulp.dest('.'));
});
}
gulp.task('less', function() {
return gulp.src(['./path/less/*.less'])
.pipe(less({errLogToConsole: true}))
.pipe(minifycss())
.pipe(rev())
.pipe(gulp.dest('./path/public/css'))
.pipe(rev.manifest({merge:true }))
.pipe(gulp.dest('.'));
});
for (var key in jsFiles) {
jsTask(key);
}
var defaultTasks = ['less'];
for (var key in jsFiles) {
defaultTasks.push(key);
}
gulp.task('default', defaultTasks);
You can pass the name of the manifest file you want to create(different for each gulp task) to manifest function of the gulp-rev-all module like below
gulp.task('productionizeCss', function () {
return gulp
.src(['dist/prod/**/*.css'])
.pipe(revAll.revision({
fileNameManifest: 'css-manifest.json'
}))
.pipe(gulp.dest('dist/prod/'))
.pipe(revAll.manifestFile())
.pipe(gulp.dest('dist/prod/'));
});
gulp.task('productionizeJS', function () {
return gulp
.src(['dist/prod/**/*.js'])
.pipe(revAll.revision({
fileNameManifest: 'js-manifest.json'
}))
.pipe(gulp.dest('dist/prod/'))
.pipe(revAll.manifestFile())
.pipe(gulp.dest('dist/prod/'));
});
Here, I have two gulp tasks, one to revise all JS and one for CSS.So, I have created two manifest files css-manifest.json, js-manifest.json.
Then I specified both the manifest files in src of the rev-replace module as shown below:
gulp.task('revReplaceIndexHtml', function () {
var manifest = gulp.src(["dist/prod/js-manifest.json", 'dist/prod/css-manifest.json']);
return gulp.src('dist/dev/referralswebui/index.html')
.pipe(revReplace({ manifest: manifest, replaceInExtensions: ['.html']}))
.pipe(gulp.dest('dist/prod/referralswebui/'));
});
I would suggest using gulp-useref instead of gulp-concat.
Given your setup, I think key references a glob path, or at least I hope so. Otherwise you are trying to concatenate a single file, or no files which may crash the concat plug-in. Emphasis on may.
Also, since you are using gulp-rev, I suggest using gulp-rev-replace which will automatically update your index references to the reved files.
Edit
Sometimes rev.manifest behaves in ways that I would describe as buggy. Just to exhaust all possibilities remove the merge option for the manifest and run concat. Or run concat and remove manifest altogether.
In my project structure I have app folder for development, I would like to move the .html files and the content of /css to a folder above it called /dist.
In my gulp tasks I tried this:
gulp.task('prod', function() {
gulp.src('app/*.html')
.pipe(gulp.dest('dist'))
gulp.src('app/css/*.css')
.pipe(gulp.dest('dist/css'))
});
This didn't work out. The only way was to create two different tasks:
gulp.task('prod_html', function() {
return gulp.src('app/*.html')
.pipe(gulp.dest('dist'))
});
gulp.task('prod_css', function() {
return gulp.src('app/css/*.css')
.pipe(gulp.dest('dist/css'))
});
But this seems to be the bad practice to create servera different tasks in the end; one for the html files, then for /css and /js and /images
cheers
Sohail
I ended up using merge-stream :)
npm install --save-dev gulp merge-stream
Then:
var merge = require('merge-stream');
gulp.task('prod', function() {
var html = gulp.src('app/*.html')
.pipe(gulp.dest('dist'))
var css = gulp.src('app/css/*.css')
.pipe(gulp.dest('dist/css'))
return merge(html, css);
});
and put in my default tasks :)