I have a simple project I am trying to work with.
doctype html
html(lang="en")
include ./inc/head.jade
body
include ./inc/various.jade
include ./inc/types.jade
include ./inc/of.jade
include ./inc/things.jade
using this commmand to watch
jade -w index.jade
I would expect any change to 'things.jade' would trigger a refresh to 'index.jade'. It does not. What am I missing? I don't want to call the watch command each time I need a refresh on index.jade.
Desired workflow:
save change in things.jade > triggers refresh to index.jade
Current problem:
save change in things.jade > switch to terminal > control+c to
kill the watch on index.jade > jade -w index.html
I have just seen your question now, I hope you got it fixed.
It seems you require 'liveReload' to watch for changes when you save a file then to reload your browser.
If you are using a task runner for example 'gulp' is would strongly recommend using 'gulp-connect' It runs a local web server using 'LiveReload'
Using this technique you will not have to call the watch command each time you need a refresh on index.jade
Related
I am using Cypress for end to end testing, and I would like to be able to see all run test suites, in the browser, even after they are run. Currently, after each test suite is completed (test which are stored in separate files), the browser reloads and I cannot see previously run tests, and after the final test suite, the browser closes. Is there an option to change this behavior so that I can run all test files, have all the results visible in the browser and that the browser doesn't close at the end?
I am currently running tests using this command: ./node_modules/.bin/cypress run --headed --spec 'cypress/integration/tests/*'
where /tests is the folder where I currently have my files.
I have added --no-exit but in this case cypress doesn't move to the next test file and only the first one runs.
A workaround solution could be to generate reports with Mochawsome, for each Test Spec, and then merge and view those rendered reports. The reports will contain the results from the tests, test bodies, any errors that occurred and some other bits of information.
If you read through the page in the link it shows you how to generate individual reports then combine them together, and then render them as HTML. These can then be viewed in the browser.
This command can be used to install what's needed npm install --save-dev mochawesome mochawesome-merge mochawesome-report-generator
and then add the Reporter configuration to the cypress.json:
{
"reporter": "mochawesome",
"reporterOptions": {
"reportDir": "cypress/results",
"overwrite": false,
"html": false,
"json": true
}
}
Keep in mind that it may not give you the level of detail that is contained in the Cypress Dashboard in the browser, for example, what was yielded from a request.
Cypress has a lot of possible command with a lot of possible config too.
Read this.
And if you use npm just run like this :
npm run cypress:open
and in your package.json :
"scripts": {
"cypress:open": "cypress open"
}
I have a Laravel project and as you know when you deploy your app everything in your public directory should be copied over to your htdocs or public_html directory to hide your application's code.
I am using webpack to build my react code and everything else and each time I change my javascript webpack does what I want, it sees I make a change and then it builds it.
However I want to add one additional command after it builds and that is to copy everything from the public directory into the correct directory in htdocs/public_html.
So far I read up on this question here Run command after webpack build
It works and I can get the echo to work but I'm not sure why cp isn't working. Echo works but how do I know what shell commands I can use?
I tried 'cp' and even 'copy-item' which is powershell, but none are working.
This is my plugin so far, I figured I needed to change the directory to be safe
before copying anything over but again, nothing is working.
mix.webpackConfig(webpack => {
return {
plugins: [
new WebpackShellPlugin({
onBuildStart: ['echo "Starting Build ..."'],
onBuildEnd: ["cd 'E:\\xammp\\apps\\FactorioCalculator'",
"cp '.\\public\\*' '..\\..\\htdocs\\FactorioCalculator\\' -f -r"]
})
]
};
});
You could always use the copyDirectory mix method. Just put something like the following at the bottom of your webpack.mix.js file:
mix.copyDirectory('public', '../../htdocs/FactorioCalculator/')
You might have to change your path to ..\\..\\htdocs\\FactorioCalculator\\ as per the path in your question (I only have my mac with me so I'm unable to test on my other machine).
To answer you original question, if you want to execute a command each time webpack finishes building you can use the mix.then() which takes a closure.
When running Selenium tests remotely with PHPUnit and Firefox, onChange events are not fired as they are when a user is operating the browser.
The solution to this seems to be to set the focusmanager.testmode option to true in Firefox's preferences (i.e. about:config), as suggested in a Selenium bug report.
However all the examples are using Selenium directly, while I am using PHPUnit which has its own API hiding the Selenium internals. I can't figure out how to set this Firefox option using PHPUnit, so I'm hoping someone else can tell me how this can be done!
(No, I can't go into about:config and set it myself manually because the tests create a new clean browser profile each time the tests are run, so any manual config changes are lost.)
Thanks to the Selenium developers I have a solution!
Short version
Put this in your test so that it gets called in the setUp() function:
// Firefox mini-profile that sets focusmanager.testmode=true in about:config
define('FIREFOX_PROFILE',
'UEsDBAoAAAAAADqAxkSBK46tKgAAACoAAAAIABwAcHJlZnMuanNVVAkAA1BZkVM6WZFTdXgLAAEE
6AMAAARkAAAAdXNlcl9wcmVmKCJmb2N1c21hbmFnZXIudGVzdG1vZGUiLCB0cnVlKTsKUEsBAh4D
CgAAAAAAOoDGRIErjq0qAAAAKgAAAAgAGAAAAAAAAQAAAKSBAAAAAHByZWZzLmpzVVQFAANQWZFT
dXgLAAEE6AMAAARkAAAAUEsFBgAAAAABAAEATgAAAGwAAAAAAA==');
protected function setUp()
{
$this->setDesiredCapabilities(Array('firefox_profile' => FIREFOX_PROFILE));
}
This sets focusmanager.testmode to true.
Long version
You need to create your own mini Firefox profile with the preferences you want set, and pass it along at the start of your tests. Here's how to do it:
Create a new folder and put the files you want in the Firefox profile in there. This can be anything (bookmarks, extensions, a copy of your own profile, etc.) but all we need here is a file called prefs.js which stores our about:config settings.
Create prefs.js in this folder with the following content:
user_pref("focusmanager.testmode", true);
Zip up the folder (prefs.js should be in the root of the archive), and base64 encode it.
If you're using Linux, you can do it all like this:
mkdir firefox-profile
cd firefox-profile
echo 'user_pref("focusmanager.testmode", true);' >> prefs.js
zip -r ../firefox-profile.zip *
base64 < ../firefox-profile.zip
Then take the base64 value and set it as the "firefox_profile" capability as per the short version above.
Trying to add new helpers to docpad.coffee I'd like to debug these.
Having setup node inspector as outlined in http://docpad.org/docs/debug I expected the console to show logs when used with e.g.
getOutDir: (inPath) ->
console.log('inPath')
How to set breakpoints to helper methods in docpad.coffee?
How to log from docpad.coffee?
The instructions on docpad.org for node-inspector are incorrect (they are being worked on). You can't just run docpad-debug because that runs the globally installed version of docpad which confuses the debugger. Instead run the local copy of docpad-debug from your node-modules folder:
./node_modules/.bin/docpad-debug run
How to log from docpad.coffee?
docpad.log("info", "... your log info here ...")
Other log levels are "warn" and "error".
Is there a way to configure SASS FileWatcher so it builds a Minified CSS?
I currently configured SASS + YUI Compressor to accomplish this but I would like to do this with pure SASS if possible.
Here are the screenshots of both configurations:
SASS
YUI Compressor CSS
Thanks in advance.
Probably the fastest way to achieve this is to use the compressed option, mentioned in the previous comments, as an argument. The quickest way to configure this in PHPStorm is as follows:
Go to File > Settings
Inside Project Settings select File Watchers
You should already have an SCSS watcher created here (if you have the SCSS watch plugin enabled, PHPStorm prompts you to create a watcher when opening a new .scss file.) Otherwise, enable it (more info about that in this section of the official documentation,) and then create the new watcher pressing the "+" symbol.
Double click the watcher name to access its configuration.
In the Arguments line make sure to add the --style compressed argument
Click OK and you're done
This image shows how that configuration should look:
From that point on, your .css output files will be compressed.
The correct answer is --style=compressed
menu File -> Settings -> Tools - File watchers
add scss and in argument add --style=compressed
If you are using sassc under Linux (Arch) you could use as Arguments:
-t compressed -m auto $FileNameWithoutExtension$.scss $FileNameWithoutExtension$.min.css
For me, --style compressed, --style compressed and --style=compressed don't work.
I had to add the option -x as an argument.
Like here:
If you want more details this post the following post is where I found this solution: https://stackoverflow.com/a/25579991/9861577.