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.
Related
I recently installed gulp 4 [from 3.9.1] and I'm having an issue getting my globs to work as they used to.
I have a whole directory [less some other sub-directories and files] that I want to transfer.
Here's the relevant code:
var path_in_str = 'my_input_dir/';
var path_out_str = 'my_output_dir/';
return gulp.src([path_in_str+'**', path_in_str+'.*', '!'+path_in_str+'node_modules', '!'+path_in_str+'node_modules/**', '!'+path_in_str+'*.json'], {dot: true})
.pipe(gulp.dest(path_out_str));
Basically, I'm trying to prevent the node_modules folder from being transferred, and I also want to prevent all .json files in the home folder from being transferred as well.
What is happening is that the node_modules directory only [no content] is being transferred. Also, all the .json files are being transferred.
How can I tweak this to fix for Gulp 4's way of handling globs [as it appears to have changed slightly]?
I couldn't get this to work with native gulp, so I thought I'd try the node glob package, and this option seems to work best for the use-case.
First you would need to install it like so:
npm install glob --save-dev
Then reference it in your gulp gile:
var gp_glob = require('glob');
And finally, use it as the glob filter:
var input_list_arr = gp_glob.sync(path_in_str+'**', {ignore: [path_in_str+'node_modules/**', path_in_str+'*.json'], dot: true});
return gulp.src(input_list_arr, {base: path_in_str})
.pipe(gulp.dest(path_out_str));
Take note that we're using the ignore option instead of ! notation to filter the file/directory paths. Also note that the base option is specified when passing the filtered list into gulp.src.
This worked for me as intended. Hope it helps.
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
I'm trying to use gulp to copy one file to the same directory with a dfferent name - the file with a different name exists already. In Unix this is simply cp ./data/file.json.bak ./data/file.json In gulp it seems much more tricky (I'm on a Windows system).
I've tried:
gulp.task('restore-json',function(){
return gulp.src('./data/file.json.bak')
.pipe(gulp.dest('./data/file.json',{overwrite:true}));
});
If the file exists, I get a EEXIST error. If it doesn't, it creates file.json as a directory.
I'm assuming this problem is because gulp uses globbing and effectively it's treating src and dest as paths. Do you know the most efficient way I can do this? I suppose a workaround would be to copy the file to a tmp directory and then rename and copy using glob wildcards, but is that the right way?
The argument that you pass to gulp.dest() is not a file name. It is the name of the directory that you want all files in your stream to be written to. See the docs.
If you want to rename a file, use the gulp-rename plugin:
var rename = require('gulp-rename');
gulp.task('restore-json',function(){
return gulp.src('./data/file.json.bak')
.pipe(rename({extname:''}))
.pipe(gulp.dest('./data/'));
});
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 :)
Say I have these folders:
./
|
folder1/
|---file1.js
|---file2.js
folder2/
|---file1.js
|---file2.js
I want to run a task with gulp.src('./*/.js'), and I want them to be output as the following:
./
|
folder1/
|---file1.js
|---file2.js
|---file1.min.js
|---file2.min.js
folder2/
|---file1.js
|---file2.js
|---file1.min.js
|---file2.min.js
This really is something that you can solve by reading any one of a number of gulp articles already out there. Google for gulp tutorial and start reading articles.
By default, the relative source path for an input file is preserved through to the output file in gulp. You don't have to do anything special. If you want something similar to what you've got, you need to use a JS minifier, such as the gulp-uglify plugin, and the gulp-rename plugin.
var gulp = require('gulp'),
uglify = require('gulp-uglify'),
rename = require('gulp-rename');
gulp.task('scripts', function() {
return gulp.src('src/**/*.js')
.pipe(uglify())
.pipe(rename({extname: '.min.js'}))
.pipe(gulp.dest('dest/'));
});
The relative path is based on the first glob in the string, in the example above, it's the **, so the relative path would be any folders after src/. This means a file at src/foo/bar.js would be saved as dest/foo/bar.min.js, because the relative path is foo/.