Grunt - plugin output -> other plugin input - gruntjs

I found a plugin (https://github.com/wcandillon/grunt-swagger-js-codegen), which uses a configuration like:
'swagger-js-codegen': {
options: {
apis: [
{
swagger: 'swagger/auth.json',
moduleName: 'custom.dao',
className: 'AuthDao',
fileName: 'auth.dao.js',
angularjs: true
},
{
swagger: 'swagger/init.json',
moduleName: 'custom.dao',
className: 'InitDao',
fileName: 'init.dao.js',
angularjs: true
},
...
],
dest: 'src/'
}
}
but I don't want to add an object for every file.
I wrote a custom plugin, which can read all json fileName from swagger directory, but I don't know, how can I add it to swagger-js-codegen?
Thanks a very lot!

Related

Using Dynamic Vue Component in VitePress

I am starting a vue 3 component library which uses a component with a dynamic template.
The dynamic template requires the use of vue/dist/vue.esm-bundler.js. The vue 3 component compiles using vite as long as the following alias fpr
"vue" is included in the vite.config.ts file:
export default defineConfig({
plugins: [vue()],
define: {
global: {},
},
resolve: {
alias: {
"#": fileURLToPath(new URL("./src", import.meta.url)),
'vue': 'vue/dist/vue.esm-bundler.js',
'./runtimeConfig': './runtimeConfig.browser',
},
},
});
However, the same component is used in the vitepress documentation for this library and does not compile. I have added the same alias to the vitepress configuration file:
const path = require('path')
module.exports = {
title: '',
description: '',
themeConfig: {
repo: '',
sidebar: [
{
text: 'Introduction',
items: [
{ text: 'What is My Lib?', link: '/' },
],
}, {
text: 'Components',
items: [
{ text: 'B-Markdown', link: '/components/b-markdown/desc' },
],
}
],
},
vite: {
resolve: {
alias: {
'vue': 'vue/dist/vue.esm-bundler.js'
}
},
}
}
I also tried switching the alias to use
'vue': path.resolve(__dirname, '../../node_modules/vue/dist/vue.esm-bundler.js'),
When compiling the vitepress documentation using either of these vue alias lines, I obtain the following error:
runtime-core.esm-bundler.js:38 [Vue warn]: Component provided template option but runtime compilation is not supported in this build of Vue. Configure your bundler to alias "vue" to "vue/dist/vue.esm-bundler.js".
at <Anonymous content="Test content." imgFolder="" class="toastui-editor-contents" ... >
at <VRuntimeTemplate class="toastui-editor-contents" style= {max-width: '900px', margin: 'auto'} template="<div><p>Test content.</p>\n</div>" >
at <BMarkdown content="Test content." >
at <Basic>
at <DemoContainer>
at <Components/bMarkdown/desc.md>
at <VitePressContent class="vp-doc _components_b-markdown_desc" >
at <VPDoc key=3 >
at <VPContent>
at <Layout>
at <VitePressApp>
Is this a problem with vitepress not registering the alias?

Flash of unstyled content in Gatsby when using global style sheet

I am working on a gatsby project where everything is working fine, except for when I load any page of the website as there is a flash of unstyled content for like a second. The issue persists in all the pages and my research on fixing this issue revealed this to be a persisting issue when working with styled-components. My project does not use styled components as there is one global style sheet that is shared across the project as the style sheet is loaded in the gatsby-browser.js.
code in the config below. Can anyone assist me here?
require('dotenv').config({
path: `.env.${process.env.NODE_ENV}`
});
module.exports = {
siteMetadata: {
title: 'name of site',
siteUrl: `https://lffff.com`,
description: `some description.`,
author: 'name',
image: 'image link'
},
pathPrefix: '/v2',
plugins: [
'gatsby-transformer-sharp',
'gatsby-plugin-react-helmet',
`gatsby-plugin-sharp`,
`gatsby-transformer-sharp`,
{
resolve: `gatsby-source-filesystem`,
options: {
name: `images`,
path: `${__dirname}/src/images/`
}
},
{
resolve: 'gatsby-source-contentful',
options: {
spaceId: process.env.CONTENTFUL_SPACE_ID,
accessToken: process.env.CONTENTFUL_ACCESS_TOKEN
}
},
{
resolve: 'gatsby-plugin-react-svg',
options: {
rule: {
include: /assets/
}
}
},
{
resolve: `gatsby-plugin-manifest`,
options: {
name: `GatsbyJS`,
short_name: `GatsbyJS`,
start_url: `/`,
display: `standalone`,
icon: 'src/images/5f8e0f3ace9452d1a7fbe65b_LP_Logo_Square.png'
}
}
]
};
this is what is in gatsby-browser.js
import './src/styles/globalStyles.css';
You are using prefixed paths at:
pathPrefix: '/v2',
In development (gatsby develop) paths don't need to be prefixed, however, during the build and server process (gatsby build && gatsby server) it's a needed specification
If you are building a path manually, you can use withPrefix helper function that prepends your path prefix in production.
Change your build and serve commands to:
gatsby build --prefix-paths
And:
gatsby serve --prefix-paths
If you are not using the pathPrefix, just remove it from your configuration and keep your commands as at the beginning.

Create matching file names in Grunt

I've got several projects that each use an identical Gruntfile to run tasks and put the output in their own dist folder. Folder setup:
MyProjects
- Project1
- src
- dist
- Project2
- src
- dist
.....
I can't figure out how to run Grunt at the top level (MyProjects) and still have the output generated in the correct dist folder dynamically.
Is there a way I can have Grunt put the output in the correct dist folder without having to hard code it into the Gruntfile? Something like:
dist: {
files: {
// destination : source js
'<% ProjectName %>/dist/app.js': '<% ProjectName %>/src/app.js'
},
Thanks
module.exports = function (grunt) {
require('load-grunt-tasks')(grunt);
// Project configuration.
grunt.initConfig({
watch: {
scripts: {
files: ['src/**/*.js'],
tasks: ['browserify', 'file_append', 'concat'],
options: {
spawn: false
}
},
sass: {
files: "src/scss/*.scss",
tasks: ['sass', 'file_append', 'concat']
}
},
sass: {
dist: {
options: {
style: 'expanded'
},
files: {
// destination // source file
"format/css/styles.css": "src/scss/styles.scss"
}
},
options: {
sourcemap: "none",
style: "compact",
noCache: true
}
},
file_append: {
default_options: {
files: [
// Development build
{
append: "",
prepend: "",
input: "format/app.js",
output: "format/dev.app.js"
},
{
append: "</style>`)",
prepend: "document.body.insertAdjacentHTML('afterbegin', `\n<style>\n",
input: "format/css/styles.css",
output: "format/css/dev.styles.html"
},
// Production build
{
append: "</script>",
prepend: "<script>\n",
input: "format/app.js",
output: "format/prod.app.html"
},
{
append: "</style>",
prepend: "<style>\n",
input: "format/css/styles.css",
output: "format/css/prod.styles.html"
}
]
}
},
concat: {
options: {
seperator: '\n'
},
// Development build
dev: {
src: ['format/dev.app.js', 'format/css/dev.styles.html'],
dest: 'dev/dev.app.js'
},
// Production build
prod: {
src: ['format/prod.app.html', 'format/css/prod.styles.html'],
dest: 'dist/prod.app.html'
}
},
browserify: {
dist: {
files: {
// destination for transpiled js : source js
'format/app.js': 'src/app.js'
},
options: {
transform: [
[
'babelify', {
presets: "es2015",
comments: false,
plugins: "transform-object-rest-spread"
}
]
],
browserifyOptions: {
debug: false
}
}
}
}
});
grunt.registerTask('default', [
'sass',
'browserify:dist',
'file_append',
'concat',
'watch'
]);
};
There's a couple ways you can tackle this.
One option is to overload the arguments you pass to the task & include the folder name you wish to target.
grunt sass:dist:Project1
The additional argument is accessible via lodash templates which are a part of the GruntJS framework, and allows the configuration to be set at the time the task is ran:
sass: {
dist: {
options: {
style: 'expanded'
},
files: {
// destination // source file
"MyProjects/<%= grunt.task.current.args[0] %>/format/css/styles.css": "MyProjects/<%= grunt.task.current.args[0] %>/src/scss/styles.scss"
}
},
options: {
sourcemap: "none",
style: "compact",
noCache: true
}
}
This approach works in the context of the function that's executing, but it wouldn't continue to pass the args to the next task. To do that, we need to add a custom task which will set a configuration object before executing the task list:
grunt.registerTask("build", (project) => {
const buildConfig = { project };
grunt.config.set("build", buildConfig);
grunt.task.run([
'sass',
'browserify:dist',
'file_append',
'concat',
'watch'
]);
});
Now when we run grunt build:Project1, your custom task build will run and set the property we passed in the grunt config object. We can then reference that value in our other grunt config objects using lodash like we did for the first option. To access config values with lodash templates, we just have to provide the config pointer in json notation:
files: {
"MyProjects/<%= build.project %>/format/css/styles.css": "MyProjects/<%= build.project %>/src/scss/styles.scss"
}
Grunt compiles the configs required for a task at the time they're run & will process the lodash templates then, allowing you to inject your project name into a task. Since we stored the value in the config object, the value will persist through until grunt completes and exits.

Gatsby/Wordpress - .env credentials not working

I am working with the gatsby-source-wordpress plugin
If I hard code my API keys/secret into my Gatsby.config, everything works fine, but I want to add these as .env variables so that I can .gitignore for deployment, and this is where things are breaking.
At the root of my directory, I have a .env file which looks like this
CLIENT_SECRET=10987654321
CLIENT_ID=123456
USER=secret#secret.com
PASS=mypassword1
I'm then try to access these in gatsby.config, like this
require('dotenv').config({
path: `.env.${process.env.NODE_ENV}`
});
module.exports = {
siteMetadata: {
title: 'Gatsby Default Starter',
},
plugins: [
{
resolve: 'gatsby-source-wordpress',
options: {
baseUrl: 'myurl.com',
protocol: 'http',
hostingWPCOM: true,
useACF: false,
auth: {
wpcom_app_clientSecret: `${process.env.CLIENT_SECRET}`,
wpcom_app_clientId: `${process.env.CLIENT_ID}`,
wpcom_user: `${process.env.USER}`,
wpcom_pass: `${process.env.PASS}`,
},
},
},
{
resolve: `gatsby-plugin-emotion`,
},
'gatsby-plugin-react-helmet',
{
resolve: `gatsby-plugin-manifest`,
options: {
name: 'gatsby-starter-default',
short_name: 'starter',
start_url: '/',
background_color: '#663399',
theme_color: '#663399',
display: 'minimal-ui',
icon: 'src/images/gatsby-icon.png', // This path is
relative to the root of the site.
},
},
'gatsby-plugin-offline',
],
}
which is returning the following errors when I run either gatsby develop or gatsby build
source and transform nodesThe server response was "400 Bad Request"
source and transform nodesThe server response was "403 Forbidden"
Inner exception message : "User cannot access this private blog."
No routes to fetch. Ending.
So, the issue is the .env variables don't seem to be pulling through properly, but I can't see a reason why they wouldn't be? Is there anything I've missed in setting this up?
Gatsby doesn't know which plugin you mean (see How to use) and your overall syntax is wrong. The plugins is an array for example.
module.exports = {
plugins: [
{
resolve: "gatsby-source-wordpress",
options: {
auth: {
wpcom_app_clientSecret: process.env.CLIENT_SECRET,
wpcom_app_clientId: process.env.CLIENT_ID,
wpcom_user: process.env.USER,
wpcom_pass: process.env.PASS,
}
}
}
]
}
This should work assuming that you also define the other necessary fields mentioned in the README.

webpack 2 historyApiFallback is not working, 404 not found

I just use simple grunt-webpack and it is not working.
Always get 404. I need to use the Angular 2 router I can see webpack-dev-server is not working, not serving.
In the config I tried:
output: {
path: root(folder.build.dist.root),
publicPath: '/',
filename: '[name].js',
chunkFilename: '[id].chunk.js'
},
devServer: {
historyApiFallback: {
index: '/index.html'
},
stats: true,
inline: true,
progress: true
}
Yes, a fixed it!
I was using grunt-webpack, so the config devServer not working.
I had to add the devServer config with grunt like this:
"webpack-dev-server": {
options: {
webpack: webpackConfigDev,
},
'cory-run': webpackConfigDev.devServer
},

Resources