I have a gulp task that looks like this, just the src part:
gulp.src(
[
'site/bricks/global/global.scss',
'site/bricks/**/*.scss',
'!site/bricks/global/domain*.scss',
'site/bricks/global/domain.mydomain.com.scss'
])
I expect it to do this:
Load global.scss first (works)
Load the rest of the scss files (works)
Exclude all but domain (works)
Include one of my domains back (does not work)
So for some reason I can't add a domain back to the list. Any ideas?
It looks like that is expected behavior because all negation globs run last! See gulp.src negation order issues.
You have a few options though:
1.. Use gulp4.0 - supposed to be fixed there.
2.. gulp-add-src add that last file back in.
3.. merge2 create two separate streams and then merge them.
Related
I have the following scenario:
I have a remote server that every week gets loaded with 2 files, these files have the following name format:
"FINAL_NAME06Apr16.txt" and
"FINAL_NAME_F106Apr16.txt"
The part in bold is fixed everytime, but the date changes, now, I need to pick, copy to another directory and rename these files. but I'm not sure about how to pick the name of the files to variables to operate with them as I need to put different name to each file.
How can I proceed? I' pretty sure it has to be done with naming a variable with an expression, but I don't know how to do that part.
I think I need some function to calculate the rest of the filename, I believe maybe some approach could be to first rename the part "FINAL_NAME_F1" and then rename the "FINAL_NAME" since some wildcards will pick both if don't do it that way?
Cheers.
You can calculate the date but why go through that complexity?
A Foreach (File) Loop Container, FELC, will handle this just fine. Add two of them to your control flow.
The first one will use a file mask of FINAL_NAME_F1*.txt. Inside that FELC, use a File System task to copy/move/rename the file to your new location.
That first FELC will run, find the target file and move it. It will then look for the next file, find none and go on to the next task.
Create a second FELC but this one will operate on FINAL_NAME*.txt It's crucial that the first FELC run first as this file mask will match both FINAL_NAME_f1-2019-01-01.txt and FINAL_NAME-2019-01-01.txt. By ordering our operations as such, we can reduce the complexity of the logic required.
Sample answer with a FELC to show where to plumb the various bits
I have a set of pages that are pretty similair, only a few attributes differ. In the collection docs it says I should create a single document for every item, like this:
_my_collection/
└── some_doc.md
└── more_doc.md
but that is not very convinient, I would rather create a single yaml-file with all the content in it:
my_collection.yaml
my_collection:
some_doc:
attribute_1: foo
attribute_2: bar
more_doc:
attribute_1: foo
attribute_2: bar
Is this at all possible?
I ended up using a really neat extension called data_page_generator
it can make pages out of yaml and csv and works out of the box.
UPDATED FOLLOWING QUESTION CLARIFICATION:
Not if you want to output pages. The file is the trigger to build a page. Except, as you point out, with a plugin/extension - which will not work on github.
Yes, if you are just referencing the values. Use something like:
{{site.myCollection.collectionFile.some_doc.attribute_1}}
Although this is probably better done as a data file inside your _data folder with something like:
{{site.data.myDataFile.some_doc.attribute_1}}
You can loop through values too in a file too - though be aware about how hash and arrays differ when you structure your file.
I'm very new to Gulp, trying to figure out how to exclude more than one file from a glob... for instance this works for a single file:
return gulp.src(['assets/js/src/!(app)*.js'])
But is it possible / what would the syntax be for excluding multiple files? E.g. return gulp.src(['assets/js/src/!(app,test)*.js']) but obviously this doesn't work...
EDIT - I am later adding back in the files app.js & test.js so they are added at the end of the minified file.
e.g. (this works for a single file only:) return gulp.src(['assets/js/src/!(app)*.js', 'assets/js/src/app.js'])
I am looking for a solution to add multiple files back in at the end so I can control the order of the minified file. Also, it's important that I can use a glob to catch all files that will be added in future so I don't want to list them explicitly.
In glob the OR pattern is defined like {A,B}. So, this should work:
gulp.src(['assets/js/src/*.js', '!assets/js/src/*{app,test}*.js'])
[You added some crucial information to your original post that completely changes the answer! You should edit your post with the new condition. So, with thanks to #dloeda glob negation:
Now you might try gulp-filter
const gulp = require('gulp');
// const uglify = require('gulp-uglify');
const filter = require('gulp-filter');
gulp.task('default', () => {
// Create filter instance inside task function
const f = filter(['assets/js/src/*.js', '!assets/js/src/*{app,test}*.js'], {restore: true});
return gulp.src('src/**/*.js')
// Filter a subset of the files
.pipe(f)
// Run them through a plugin
// .pipe(uglify())
// Bring back the previously filtered out files (optional)
.pipe(f.restore)
.pipe(gulp.dest('dist'));
});
However, it is not clear to me from the gulp-filter documentation that the f.restore adds the filtered files at the end of the stream or back in their original location in the src stream. If you find that it doesn't put it at the end, let me know and it could be modified to do so by another method.
Also see Contra's answer to adding to src if you are using gulp4.0 it is very easy to add to the src.
Alternatively, gulp-add-src looks very promising and I just discovered it so you could try this alternative code:
var addsrc = require('gulp-add-src');
gulp.task('build', function () {
// start with excluding app.js and test.js
return gulp.src(['assets/js/src/*.js', '!assets/js/src/*{app,test}*.js'])
// .pipe(whatever)
.pipe(addsrc.append('assets/js/src/app.js')) // append app.js to the end of the stream
.pipe(uglify()) // we minify everything
.pipe(gulp.dest('dist')); // and write to dist
});
I am attempting to concat a number of js files within a nested directory structure to a single file in a different location. They have to be concatenated in a specific order and I cannot find a way of changing the default order in which gulp's glob search retrieves nested files. I have tried various glob patterns to no avail.
My directory structure is as follows:
components
- componentA
- controllers
- controllerA1.js
- controllerA2.js
- services
- serviceA1.js
- configA.js
- moduleA.js
- componentB
- controllers
- controllerB1.js
- controllerB2.js
- services
- serviceB1.js
- configB.js
- moduleB.js
I want the files to concatenate to a single file in the following order:
configA.js
moduleA.js
controllerA1.js
controllerA2.js
serviceA1.js
configB.js
moduleB.js
controllerB1.js
controllerB2.js
serviceB.js
So that gulp iterates into each component and iterates down through as far as it can go before moving onto the next component and doing the same.
Instead it concatenates in the following order:
configA.js
moduleA.js
configB.js
moduleB.js
controllerA1.js
controllerA2.js
serviceA1.js
controllerB1.js
controllerB2.js
serviceB1.js
In other words it goes into a top level directory, iterates through each of the top level files in that directory and then jumps to the next top level directory and does the same, before returning to the first top level directory and iterating through the next level down etc etc.
I've tried a couple of different methods which have each presented problems.
I have tried using the gulp-recursive-folder plugin to customise the iteration order as follows:
gulp.task('generateTree', recursivefolder({
base: './components',
exclude: [ // exclude the debug modules from thus build
//'debug-modules'
]
}, function(folderFound){
//This will loop over all folders inside pathToFolder main and recursively on the children folders, secondary
//With folderFound.name gets the folderName
//With folderFound.path gets all folder path found
//With folderFound.pathTarget gets the relative path beginning from options.pathFolder
return gulp.src(folderFound.path + "/**/*.js")
.pipe($.concat("app.js"))
.pipe(gulp.dest('./build/assets/js/'));
}));
This iterates in the order I want but I believe it is writing the first top level dir as one stream and then writing the second dir as another stream so that the second stream overwrites the first. So I am left with only the following files being concatenated:
configB.js
moduleB.js
controllerB1.js
controllerB2.js
serviceB.js
So I've also tried using the add-stream plugin to recursively add to the same stream before writing to file. I won't bore anyone with the details but basically I can't get this to work as desired either. Can anyone recommend a post/tutorial/plugin? Thanks.
gulp.src() respects the ordering of globs that are passed to it and emits files in the same order. That means if you explicitly pass a glob for each component to gulp.src() it will first emit the files for the first component, then for the second component and so on:
gulp.task('default', function() {
return gulp.src([
'components/componentA/**/*.js',
'components/componentB/**/*.js'
])
.pipe($.concat('app.js'))
.pipe(gulp.dest('./build/assets/js/'));
});
Obviously you don't want to maintain that array manually. What you want to do is generate the array based on the components that are available in your project. You can use the glob module for that:
var glob = require('glob');
gulp.task('default', function() {
return gulp.src(glob.sync('components/*').map(c => c + '/**/*.js'))
.pipe($.concat('app.js'))
.pipe(gulp.dest('./build/assets/js/'));
});
In Laravel 5 I am trying to create two different css files for my frontend site and backend site (cms). The source files are in two different directories.
The default value for assets in
first the backend
elixir.config.assetsDir = 'resources/backend/';
elixir(function (mix) {
mix.less('backend.less');
});
Second the frontend
elixir.config.assetsDir = 'resources/frontend/';
elixir(function (mix) {
mix.less('frontend.less');
});
Both are in the same gulpfile.js.
These are the directories (Laravel 5)
resources
backend
less
backend.less
frontend
less
frontend.less
Only the frontend file is compiled to public/css/frontend.css.
I also tried
mix.less('frontend.less', null, 'resources/frontend/');
though this is working for mixing script files it is not working for mixing less files.
**Update 28-3-2015 **
There seems to be no solution for my problem. When I do:
elixir.config.assetsDir = 'resources/frontend/';
mix.less('frontend.less');
elixir.config.assetsDir = 'resources/backend/';
mix.less('backend.less');
Only the last one (backend) is executed. When I place the last two lines in comments the first one (frontend )is executed. It's Ok for now because the backend styles should not change very often but it would be very nice to mix multiple less files from multiple resource folders to multiple destination folders.
Try:
elixir(function(mix) {
mix.less([
'frontend/frontend.less',
'backend/backend.less'
], null, './resources');
});
Instead of your variant:
elixir(function(mix) {
elixir.config.assetsDir = 'resources/frontend/';
mix.less('frontend.less');
elixir.config.assetsDir = 'resources/backend/';
mix.less('backend.less');
});
Try this code:
elixir.config.assetsDir = 'resources/frontend/';
elixir(function(mix) {
mix.less('frontend.less');
});
elixir.config.assetsDir = 'resources/backend/';
elixir(function(mix) {
mix.less('backend.less');
});
I have been playing around with this for a couple days and the best option I've found so far is as follows.
First leave your resources files in the default location, so for less files look in resources/assets/less. Then to separate the files into your front and back end resources add sub folders in the specific resource folder like so,
resources/assets/less/frontend/frontend.less
resources/assets/less/backend/backend.less
Now call each one like so..
mix.less('frontend/frontend.less', 'public/css/frontend/frontend.css');
mix.less('backend/backend.less', 'public/css/backend/backend.css');
The second parameter provided to each mix.less can point to wherever you want it to.
You can't split at the highest level directly in the resource root, but it still allows some separation, and everything compiled in one gulp.
I have found the following to work:
elixir(function (mix) {
mix
.less(['app.less'], 'public/css/app.css')
.less(['bootstrap.less'], 'public/css/bootstrap.css');
});
The key things to notice:
provide the file name in the destination, i.e. writing public/css/app.css instead of public/css/
chain the .less calls instead of making two separate mix.less() calls
Works for me with laravel-elixir version 3.4.2