Grunt-Init Conditional Prompts Template - javascript

I am getting started with grunt-init templating and trying to write conditional prompts. I've been kicking this around for a few hours, and have had no real success. It probably doesn't help that javascript isn't my strongest language.
I found this answer, but it doesn't really handle what I am trying to do: grunt-init template conditional prompts
I am trying to do something along the lines of the following:
exports.template = function(grunt, init, done) {
init.process({}, [
// Prompt for these values.
{
name: 'css',
message: 'Which CSS Preprocess are you using?',
default: 'SASS/Less/Stylus/none'
}
if (css.value == 'SASS'){
// prompt for Compass / Bourbon / None;
}
], function(err, props) {
...
Obviously this doesn't work, but I have tried going through the grunt-init source and documentation, and haven't found anything helpful.
If this isn't possible, are there other grunt project generators that CAN handle this kind of conditional logic?

For anyone wondering, it appears that to do what I am requesting, you would have to modify the grunt-init source to handle these kind of conditionals. I ended up using the yeoman generator instead.
http://yeoman.io/generators.html

Related

Is there a way to 'build' my code depending on .env variables?

I'm trying to optimize my website. I would like to create the thinnest build possible.
I have a .env file containing
REACT_APP_ENV = DEV
Here is an exemple of what I want to reduce :
if (REACT_APP_ENV === "DEV) {
// DO SOMETHING A
} else {
// DO SOMETHING B
}
I would like to reduce it to :
// DO SOMETHING A
Is there a way to create a reduced build like this ?
We already know that REACT_APP_ENV === DEV when building, so it seems possible to me that we can simplify this code.
Currently, I am using webpack with babel to build.
If you have any clues, I'd appreciate to see them.
Thank you for reading

Assistance With Setting up Gatsby and WordPress

I have worked on several web dev projects but have never actually built one from the group up (setting up all the backends was already done by the time I arrived).
Am working on building a site and I need some guidance as the process is incredibly confusing to me.
I want to use WordPress as a headless CMS (so that I can still post and manage the site from WP without editing code) and I was looking to use Gatsby.js.
I have a site on WordPress.com (call it: mysite.wordpress.com). I have created my Gatsby site, run it, nice, and installed the gatsby-source-wordpress package. Finally, I have my config file as follows:
module.exports = {
siteMetadata: {
title: `MySite`,
description: `Testing`,
author: `Me`
},
plugins: [
{
resolve: "gatsby-source-wordpress",
options: {
baseUrl: "mysite.wordpress.com",
protocol: "http",
hostingWPCOM: false,
useACF: true,
verboseOutput: true,
auth: {
htaccess_user: "xxxx#gmail.com", // My actual general WP account email
htaccess_pass: "yyyy", // My actual general WP account pass. I know this is bad practice, I will put this into a dotenv file, I just want to make sure this works
htaccess_sendImmediately: false,
},
},
},
]
}
However, this is not working and I am not sure why. When I run gatsby develop I get the following output:
ERROR #11321 PLUGIN
"gatsby-source-wordpress" threw an error while running the sourceNodes lifecycle:
Cannot convert undefined or null to object
TypeError: Cannot convert undefined or null to object
- Function.keys
- fetch.js:534 getValidRoutes
[emrose]/[gatsby-source-wordpress]/fetch.js:534:26
- fetch.js:148 fetch
[emrose]/[gatsby-source-wordpress]/fetch.js:148:23
- task_queues.js:93 processTicksAndRejections
internal/process/task_queues.js:93:5
- gatsby-node.js:87 async Object.exports.sourceNodes
[emrose]/[gatsby-source-wordpress]/gatsby-node.js:87:18
- api-runner-node.js:235 async runAPI
[emrose]/[gatsby]/dist/utils/api-runner-node.js:235:20
- api-runner-node.js:328 async module.exports
[emrose]/[gatsby]/dist/utils/api-runner-node.js:328:18
- source-nodes.js:86 async module.exports
[emrose]/[gatsby]/dist/utils/source-nodes.js:86:3
- index.js:403 async module.exports
[emrose]/[gatsby]/dist/bootstrap/index.js:403:3
- develop.js:419 async module.exports
[emrose]/[gatsby]/dist/commands/develop.js:419:7
warn The gatsby-source-wordpress plugin has generated no Gatsby nodes. Do you need it?
Despite several hours of googling and youtube'ing, I am not quite clear on how to proceed or if the site I have on my general WP account is even accessible in this format.
I have tried looking for a solution online for quite some time now without success. Keeping in mind that I do intend this site to eventually go live, any guidance on next steps would be awesome (:

Pull an HTML file into a TinyTest

TinyTest seems to be concerned only with unit testing; however, may Meteor packages have UI elements, and it would be helpful to pull in a pre-crafted HTML file that exercises a widget. For instance, we might want to transform a <table> into a grid with DataTables.net, then test if the instantiation was correct.
How can external HTML files be used in a TinyTest?
package.js:
Package.onTest(function (api) {
api.use(packageName, where);
api.use(['tinytest', 'http'], where);
// TODO we should just bring in src/test.html - but how to do that with TinyTest?
api.addFiles('src/test.html', where); // this won't magically display the HTML anywhere
api.addFiles('meteor/test.js', where);
});
test.js:
Tinytest.addAsync('Visual check', function (test, done) {
var iconsDropZone = document.createElement('div');
document.body.appendChild(iconsDropZone);
// TODO ideally we'd get src/test.html straight from this repo, but no idea how to do this from TinyTest
HTTP.get('https://rawgit.com/FortAwesome/Font-Awesome/master/src/test.html', function callback(error, result) {
if (error) {
test.fail('Error getting the icons. Do we have an Internet connection to rawgit.com?');
} else {
iconsDropZone.innerHTML = result.content;
test.ok({message: 'Test passed if the icons look OK.'});
}
done();
});
});
I personally think TinyTest is not the right tool for the job! You may get away with finding out how to include the Asset package or writing your own file loader, but you'll soon face the problem of needing to query the DOM in your tests.
Here are some options I can think of:
Option 1:
You can get access to a fully rendered page by using xolvio:webdriver. If you include this package in your onTest block, then you should have access to wdio in your TinyTest tests. I say should as I don't use TinyTest at all but I designed the webdriver package to be usable by any framework. Follow the instructions on the package readme and then do something like this:
browser.
init().
url('https://rawgit.com/FortAwesome/Font-Awesome/master/src/test.html').
getSource(function(err, source) {
// you have a fully rendered source here and can compare to what you like
}).
end();
It's a heavyweight option but might be suitable for you.
Option 2:
If you're willing to move away from TinyTest, another option is to use Jasmine. It supports client unit testing so you can load up the unit that does the visuals and isolate it with a unit test.
Option 3:
You can create a test app around your package. So you would have:
/package
/package/src
/package/example
/package/example/main.html
/package/example/tests
/package/example/tests/driver.js
And now the example directory is a Meteor app. In main.html you would use your package and under tests directory you can use the framework of your choice (jasmine/mocha/cucumber) in combination with webdriver. I like this pattern for package development as you can test the package as it is intended to be used by apps.

Force-latest with Bower programmatic API

I'm using the Bower programmatic API to install a list of libraries at once, and some of them have dependency version conflicts. I would like to use the 'force-latest' flag to default to the latest version, but I can't figure out how to make it work with the programmatic API.
The bower documentation shows this example:
var bower = require('bower');
bower.commands
.install(['jquery'], { save: true }, { /* custom config */ })
.on('end', function (installed) {
console.log(installed);
});
I hoped I could change {save: true} to {save: true, 'force-latest': true} but it didn't seem to have any effect. I can handle prompts by adding interactive: true to the config and listening for prompt events, but I would like to make it more automated.
Does anyone know how to do this or know where there is more documentation on the programmatic API? Bower just directs you to the source code for more information. I've looked at it a bit, but I'm not really making sense of it. I'll look further if no one else knows.
Thanks!
The bower programmatic API has very little documentation so you are forced to look at their source code to figure out how to interact with it. After some digging, I have found that the 'force-latest' flag is converted to camel case when used. So, your command will need to be something like this:
var bower = require('bower');
bower.commands
.install(['jquery'], { save: true, forceLatest: true }, { /* custom config */ })
.on('end', function (installed) {
console.log(installed);
});
I hope that in the near future, the guys behind bower will offer a little more documentation to this powerful tool.

Wrap code in a custom closure during build process

I'd like to wrap my code in a custom type of Closure during build process with Grunt (and uglify). This manipulation must keep the sourceMap working.
My use case is to wrap all my code inside a try/catch block to allow logging of the errors in production - without losing access to the stacktrace (unlike window.onerror). I'd probably use Raven-js 1.0 to work this out.
Anyone know how I could manage this easily?
If you just have tips that might bring a full answer, that'll be accepted too
Finally, I've found a grunt plugin (grunt-wrap) who does exactly this:
wrap: {
modules: {
src: ['assets/*.js'],
dest: 'dist/',
wrapper: ['try {', '} catch(e) { Raven.captureException(e); }']
}
}
If you're interested in raven-js. I've been with the try/catch over Raven.context as this won't create a new global closure around the code.

Categories