I want to copy a file /stubs/foo.txt in all the subdirectories of /something/, for example
/something/foo.txt
/something/else/foo.txt
I tried:
gulp.task('copy', function () {
return gulp.src('/stubs/foo.txt')
.pipe(gulp.dest('/something/**/*'));
});
But it seems Gulp does not support variable in the destination folder.
Not an ideal solution, but you could use multiple destination pipes.
Related
I am a newcomer to Gulp. I have a gulp file and I am running one task in it -
gulp.task('sass', function () {
return gulp.src('app/scss/**/.scss') // Get source files with gulp.src
.pipe(sass()) // Sends it through a gulp plugin
.pipe(gulp.dest('app/css')) // Outputs the file in the destination folder
});
in the above code what i want to do is:
I have four scss files in app/scss folder:
site1.scss
site2.scss
site3.scss
copy.scss
Now i want to run the sass task and have all the files in scss folder excuding one particular file 'copy.scss'. I don't want the 'copy.scss' file to be converted into css file.
How do I do it?
Any help would be apprecisted
Try
return gulp.src(['app/scss/**/*.scss', '!app/scss/**/copy.scss'])
Note the ! It allows you to negate or remove from the stream a file or files. Also note I added a * to your *.scss
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 have css and js files in a directory (and subdirectories). I'm looking into different tools to compress the assets in all the directories. I'm trying to find a way to get gulp to compress all the files in those directories and save the compressed file in the same directory and name it with the following convention: [name].min.css or [name].min.js. So example.js would become example.min.js.
Is there a way to achieve this?
I've read the following on this:
http://gulpjs.com/plugins/
https://github.com/gulpjs/gulp/blob/master/docs/getting-started.md
https://github.com/gulpjs/gulp/blob/master/docs/API.md
You usually don't want to generate the minified files in the same directory as the original files. You write all files that are generated by your build script to a single output directory. Some advantages of this approach are:
Makes it easier to clean the build and recreate everything from scratch: you just delete that one output folder.
You don't have to worry about generated files accidentally getting picked up by your build and getting processed again.
But since you asked, here's a solution that creates the minified files in the same directory as the original files. This creates a .min.css and .min.js file for every .css and .js file. All CSS files are assumed to be in a directory called css (or its subdirectories) and all JS files are assumed to be in a directory called js (or its subdirectories):
var gulp = require('gulp');
var rename = require('gulp-rename');
var cssnano = require('gulp-cssnano');
var uglify = require('gulp-uglify');
gulp.task('css', function () {
return gulp.src([
'css/**/*.css',
'!css/**/*.min.css',
])
.pipe(cssnano())
.pipe(rename(function(path) {
path.extname = ".min.css";
}))
.pipe(gulp.dest('css'));
});
gulp.task('js', function () {
return gulp.src([
'js/**/*.js',
'!js/**/*.min.js',
])
.pipe(uglify())
.pipe(rename(function(path) {
path.extname = ".min.js";
}))
.pipe(gulp.dest('js'));
});
gulp.task('default', ['css', 'js']);
Notice the negation pattern !css/**/*.min.css that is used to prevent the already minified CSS from getting minified again on the next build. Same for the JavaScript.
I used gulp-cssnano and gulp-uglify to minify the CSS and JS, but there's plenty of other options out there that can act as drop-in replacements.
I have following directory structure:
common
-services
--service1.js
--service2.js
-app
--gulpfile.js
--src
---services
----service1.js
----service3.js
I want to made gulp task that will take all files from common directory, take files from app directory and replace all files with same filenames in original stream. After that I will concat it and write to other directory.
I tried this:
var gulp = require('gulp'),
merge = require('gulp-merge'),
concat = require('gulp-concat');
gulp.task('templates', function () {
return merge(
gulp.src(['../common/**/*.js']),
gulp.src(['src/**/*.js'])
)
.pipe(concat('app.js'))
.pipe(gulp.dest('build/js'));
});
I expected to got content of common/services/service2.js, app/src/services/service1.js, app/src/services/service3.js in dest/app.js.
But instead I've got content of all files.
I tried to change cwd or base of gulp.src, but it has no effect.
I know that I can write this stream to tmp directory, and after that get files from it, but it seems not really like gulp-style solution. So how can I overwrite files with same file names in streams?
Ok, i can't find any existing solution for that, so I write my own gulp plugin: gulp-unique-files.
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.