I'm pretty new to YAML and I feel like I missing something or making my own life harder than it should be.
I'm using Gulp to run a bunch of tasks to minify CSS/JS and lint my code, but for the final build I need to modify a YAML file that contains some configuration values.
This is part of my YAML file:
- adx_name: RedirectUri
adx_sitesettingid: 3745e5fe-2b95-eb11-b1ac-000d3a2cd507
adx_value: https://example.com/signin
The YAML file contains a bunch of config but I just need to change the adx_value where adx_name = RedirectUri.
I don't seem to be able to find any Gulp plugins that work with YAML directly, other than those that are able to read YAML or append to YAML files. What I need to be able to do it edit the file and write new values at the correct location in the file.
You can do this pretty easily with gulp-replace.
gulp.task('yaml-replace', function () {
return gulp.src('./test.yaml')
.pipe(replace(/(?<=adx_name:\s)(RedirectUri)/g, 'myReplacement')) // positive lookbehind
.pipe(gulp.dest('./yaml'));
});
The replace function can take a string or regex and replace with a string or function.
Result:
- adx_name: myReplacement
adx_sitesettingid: 3745e5fe-2b95-eb11-b1ac-000d3a2cd507
adx_value: https://example.com/signin
Related
On my page, I want to use i18next and Vue.js to display translated text. For that, I want to use YAML files for better maintainability. Here on Stackoverflow, I found this old question, where #steve-hynding posted a way to configure webpack to pre-compile the YAML files into JSON. However, the syntax he used (with the rule array) doesn't work in my case, because we're using chainWebpack. I tried to rewrite the rule, but it doesn't do anything at all.
chainWebpack: config => {
config.module
.rule('yaml')
.test(/.\.yaml$/)
.use('file-loader')
.loader('file-loader')
.options({
name: '[path][name].json',
context: 'src'
})
.end()
.use('yaml-loader')
.loader('yaml-loader')
.end();
}
How can I make webpack extract the *.yaml files from a specified folder, compile it into JSON and put it into a specified folder in the public dir?
I'm using gulp compileHandlebars to compile my handlebars templates and create a page using json data and that's working great... Problem is I want to nest my handlebars templates in subdirectories but when I do this the batch process cant find the templates anymore after I add: **/*.handlebars to the batch path. See below:
gulp.task('compileHandlebars', function () {
delete require.cache[require.resolve('./src/layout.json')]
var buildSettings = require('./src/layout.json');
var templateData = buildSettings,
options = {
batch : ['./src/assets/templates/**/*.handlebars']
}
gulp.src('./src/index.handlebars')
.pipe(handlebars(templateData, options))
.pipe(rename('index.html'))
.pipe(cleanhtml())
.pipe(gulp.dest('./dist'))
.pipe(livereload());
});
The docs on npm say that batch requires an array of file paths but the example shows an array with a directory path. Your example is using blob syntax which won't work. It doesn't look like that batch will recursively look into sub-directories either... so I think you will have to make an array that includes a parent directory path for each handlebars file.
Its a bummer, I know. But you could probably automate the process of retrieving the handlebar file paths using gulp-filenames and slice off the filename from each path to get an array of directories.
I'm trying to write a yeoman generator and at one point I need to copy the files/folders of a github repo to the current working directory, eg:
this.remote('owner', 'repo', function (err, remote) {
remote.directory('.', '.');
});
However I want to ignore some of the files in this repo, is it possible to do so? I found the function responsible for this but it doesn't seem to be a clear way to do it, there's a process function that you can pass but I'm not sure if you can "cancel" a file being copied if it matches a certain pattern.
From the mem-fs-editor docs:
For a globified from, you can optionally pass in an
options.globOptions object to change its pattern matching behavior.
See the options here:
Example:
this.fs.copy("<from path>/**", "<to path>",
{
globOptions: {
ignore: [
globs to ignore...
]
}
}
);
You should rely on the this.fs object rather than the old depreciated files methods.
Helper methods on this.fs support glob patterns, so ignoring some files become trivial.
You can learn more about Yeoman file system here: http://yeoman.io/authoring/file-system.html
I encountered an issue trying to copy a set of files and when calling .dest('some folder') the entire folder structure was lost.
I searched and found an answer suggesting that I should provide {base:'.'} as an option on my call to gulp.src(...) to resolve this issue.
The documentation for gulp.src options only says that its options are:
Options to pass to node-glob through glob-stream.
Looking into node-glob documentation for its options base is not listed there at all.
And the glob-stream options documentation only states that
"the Default is everything before a glob starts (see glob-parent)"
So no much help here either.
So, what effect does the base option passed to gulp.src have on the viny6l files in the created stream and how does it effect the gulp.dest command ?
(You're not looking at the official gulp documentation. http://github.com/arvindr21/gulp is just some guy's fork of the gulpjs github repo. The official repo is http://github.com/gulpjs/gulp/ where the base option is indeed documented.)
To answer your question:
If you don't specify the base option yourself, then everything before the first glob in your gulp.src() paths is automatically used as the base option and ommitted when writing to the destination folder.
Say you have the following files:
some/path/example/app/js/app.js
some/path/example/vendor/js/vendor.js
some/path/example/vendor/lib/js/lib.js
And this is your Gulpfile.js:
gulp.src('some/path/**/js/*.js')
.pipe(gulp.dest('output'));
In this case everything before the ** is automatically used as your base option. So the above is essentially equivalent to this:
gulp.src('some/path/**/js/*.js', {base:'some/path/'})
.pipe(gulp.dest('output'));
What this means is that some/path/ is stripped from the path of every file that matches the pattern in gulp.src(). The resulting structure in the output folder looks like this:
output/example/app/js/app.js
output/example/vendor/js/vendor.js
output/example/vendor/lib/js/lib.js
So a certain part of the directory structure of your source files is indeed lost. How much of your directory structure you lose depends on where the first glob in your gulp.src() pattern is.
If you want to avoid this you have to explicitly specify the base option:
gulp.src('some/path/**/js/*.js', {base:'.'})
.pipe(gulp.dest('output'));
Now some/path/ will not be stripped from your file paths, resulting in the following folder structure in output:
output/some/path/example/app/js/app.js
output/some/path/example/vendor/js/vendor.js
output/some/path/example/vendor/lib/js/lib.js
EDIT: If you pass an array of patterns to gulp.src() there's no way to specify a different base option for each of the array elements. This for example won't work:
gulp.src(
['source1/examples/**/*.html',
'source2/examples/**/*.html'],
{ base: ['source1/', // Doesn't work.
'source2/']} // Needs to be a string.
).pipe(gulp.dest('dist'));
Instead you have to follow the "Using multiple sources in one task" recipe. This lets you merge two streams each of which can receive its own base option:
var merge = require('merge-stream');
gulp.task('default', function() {
merge(gulp.src('source1/examples/**/*.html', {base: 'source1/'}),
gulp.src('source2/examples/**/*.html', {base: 'source2/'}))
.pipe(gulp.dest('dist'));
});
I know it's a basic question, but I couldn't find a proper answer.
Is there a way of storing a list of my project's source files in a JSON file and load it on gulpfile.js? For example, instead of doing:
gulp.src(['a.js', 'b.js'])
Do something like:
var sources = some_load_file_func('sources.json');
gulp.src(sources.js_files))
A gulpfile is just node, and in node you can simply use require on JSON files, like so:
var sources = require('sources.json');
Now sources will be an object (or whatever is in your JSON file).