I am using grunt and I'm trying to get the watch/livereload task to run on my local server (MAMP) but with no success.
I'm calling the task based on HTML5 Boilerplate grunt files (https://github.com/h5bp/html5boilerplate.com/blob/master/Gruntfile.js, https://github.com/h5bp/html5boilerplate.com/blob/master/package.json).
I have also tried implementing Tiny-lr (https://github.com/mklabs/tiny-lr) without success either.
My connect and watch options right now are this
connect: {
options: {
hostname: 'localhost',
livereload: 35729,
port: 8888
},
livereload: {
options: {
base: '../',
open: true
}
},
},
watch: {
files: '<%= settings.dir.src %>/**',
less: {
files: ['src/less/*.less'],
tasks: ['less'],
},
options: {
livereload: '<%= connect.options.livereload %>'
},
scripts: {
files: ['<%= settings.dir.src %>/js/*.js', 'css/**/*.scss' ],
tasks: 'default',
options: {
spawn: false,
}
}
}
And here I declare the dev task:
// development task
grunt.registerTask('dev', [
'connect:livereload',
'watch'
]);
When I run 'grunt dev' my browser opens at http://127.0.0.1:8888/ and displays only this: Cannot GET /
I need my browser to open http://localhost:8888/ctrl/ (ctrl being the name of the folder project on MAMP, could be anything), I thought that changing the "base" option was the way to go but nope, it is not, and I cannot add "/ctrl" to host name either, nor to the port.
Any ideas?
Thank you
Here is a link to my whole code: https://github.com/zolitariuz/ctrl
i think you are misunderstanding 2 tasks in grunt,
the connect task is used to create a http server spawned by node js, so no php nor mysql support, you DON'T want to run you WP site thru that.
the watch task is looking for changes in files on YOUR computer, launching the according task after a file change, then trigger the live reload.
you should remove connect completely after you copied the live reload object in your watch task.
the you should run your local lamp stack for running wp then start the watch task for file changes.
on the wp side you should enqueue the live reload script, or use a browser extension that will inject it for you.
Related
I've just installed Firefox Dev Edition, and I don't know how to tell browsersync to start with it when I launch it.
I know there is the browser option in which I can specify "firefox", but how can I differenciate one FF installation from one other ?
The issue would be the same if I had various regular FF installed (eg a 3.5, a 48.x and a 50.x).
I can always open manually the right FF and load the page after browsersync started, but I would like it to do it manually (and not to be opened in my regular non-dev FF).
In fact, it was quite easy: if you put the absolute path to an executable file in the browser option, it takes it smoothly.
So options should be something like :
{ port: 9000,
server: {
baseDir: [...
],
routes: {
'/bower_components': 'bower_components',
'/node_modules': 'node_modules',
'/temp': 'temp'
}
},
logLevel: 'info',
notify: true,
browser: 'C:\\Program Files (x86)\\Firefox Developer Edition\\firefox.exe',
reloadDelay: 0 //1000
}
I'm running a webpack server on virtual box with Ubuntu 15.10 using vagrant over mac OSX.
The webpack config is pretty clean:
var HtmlWebpackPlugin = require('html-webpack-plugin');
var path = require('path');
var webpack = require('webpack');
var MINIFY = process.env.MINIFY === true;
var FRONTEND_ROOT = './static'
var SRC_PATCH = FRONTEND_ROOT + '/scripts';
var BUILD_PATH = './dist';
module.exports = {
entry: SRC_PATCH + '/main.js',
devtool: 'source-map',
output: {
path: BUILD_PATH,
filename: 'bundle.js'
},
resolve: {
extensions: ['', '.js', '.jsx'],
modulesDirectories: [SRC_PATCH, 'node_modules']
},
plugins: [
new HtmlWebpackPlugin({
filename: 'index.html',
template: path.resolve(FRONTEND_ROOT, 'index-template.html'),
minify: MINIFY
})
],
module: {
loaders: [
{
test: /\.jsx|js$/,
exclude: /node_modules/,
loader: 'babel-loader'
}
]
},
eslint: {
configFile: './.eslintrc'
}
};
Webpack was run on VM by
vagrant#vagrant-ubuntu-wily-64:/vagrant$ webpack-dev-server --port 8080 --devtool eval --progress --colors --hot --content-base dist
And when I edit a file from OSX it doesn't reload, but if I edit the same file from VM it'll reload.
What is the problem? How can I fix it?
I've solved my problem with vagrant rsync-auto
https://docs.vagrantup.com/v2/cli/rsync-auto.html
I'd added the line config.vm.synced_folder ".", "/vagrant", type: "rsync", rsync_auto: true, rsync_exclude: ".git/" to my Vagrantfile, and run vagrant rsync-auto under a separate tab.
This is answered under another question:
https://stackoverflow.com/a/34937378/5114
If you add the --watch-poll option it changes the way webpack looks for file changes.
webpack-dev-server --watch-poll --port 8080 --devtool eval --progress --colors --hot --content-base dist
This makes webpack poll for changes to the files every N milliseconds. Polling works in the Vagrant shared directories when the normal method doesn't because it doesn't look for mtime or other filesystem attributes, just reads the files on an interval. It's slower and uses more cpu/memory, so don't use polling unless you have to.
https://webpack.github.io/docs/cli.html#watch
Long story short: no any changes made to the files on the host system (MacOS) are propagated as events to the guest box synced_folder.
So features relying on filesystem events like Webpack's "hot reload" (webpack-hot-middleware), nodemon's --watch option and so forth won't work.
The underlying reason is, VirtualBox has decided not to implement inotify.
Quote:
The reason is that the host and the guest might have different file systems and vboxsf would have to implement a generic protocol to forward that information from the host to the guest. And this would have to work between many different host/guest combinations. Therefore marking this ticket as "won't fix", sorry.
The workaround is to use rsync as desribed in this answer from Maxim Shepelin.
the first thing you need to see is if in the console where you're running the server, the recompiled process is happening or not. If' not the answer is in the SyncFolder line that #maxim-schepelin said above. If is recompiling and the web page is not reloading maybe the webPack solution.
Edit
Another reason for the folder sync not working the righ way could be this https://github.com/guard/listen/wiki/Increasing-the-amount-of-inotify-watchers
I am using protractor 1.3.1 and running iedriverserver.exe 2.43.0.0 with IE11 installed (windows).
This is my spec:
describe('quick test IE driver', function () {
it('should go to ng homepage', function () {
browser.driver.get('https://angularjs.org/');
var title =element(by.css('h1')).getText();
expect(title).toBe('HTML enhanced for web apps!');
});
});
And this is my protractor.conf.js:
exports.config = {
// The address of a running selenium server.
//seleniumAddress: 'http://localhost:4444/wd/hub',
capabilities: {
'browserName': 'internet explorer',
'platform': 'ANY',
'version': '11'
},
// Spec patterns are relative to the current working directly when
// protractor is called.
specs: ['main.spec.js'],
// Options to be passed to Jasmine-node.
jasmineNodeOpts: {
showColors: true,
defaultTimeoutInterval: 30000,
isVerbose:true,
includeStackTrace:true
}
};
getting this error though, any ideas for a solution:
UnknownError: The path to the driver executable must be set by the webdriver.ie.driver system property;
Update web manager for IE
First step is to update the ie webdriver using webdriver manager.Open command prompt and run the command given below
webdriver-manager update --ie
Go to npm location In this step move to the NPM_LOCATION(folder where npm is installed at your system. Move to the following path "NPM_LOCATION\node_modules\protractor\selenium" At this location check that IEDriverServer.exe is present or not.
Change for IE in conf.js
// conf.js exports.config = { seleniumAddress: 'http://localhost:4444/wd/hub', specs: ['specs.js'], capabilities: {
'browserName': 'internet explorer' // conf for internet explorer } }
// spec.js describe('Protractor Demo App', function() { it('should have a title', function() {
browser.get('http://juliemr.github.io/protractor-demo/');
expect(browser.getTitle()).toEqual('Super Calculator'); }); });
Now run protractor conf.js
Note: Make sure you restart server by -->webdriver-manager start
taken from: http://protractorsupport.blogspot.com/2015/05/use-protractor-with-internet-explorer.html
According to the protractor config doc, the config value "seleniumArgs" is deprecated.
So, to have a single answer with all the info, here are the simplified steps:
Install Protactor globally:
npm install -g protractor
Run webdriver-manager update --ie to update the Selenium drivers that Protactor uses. Be aware if you are running the global webdriver-manager or the local webdriver-manager (i.e ./node_modules./bin/webdriver-manager update help); they will unzip the drivers at separate locations; only the local will unzip in [Project dir]
Take a look at the log of the previous command. It must show that the drivers were unzipped at a particular folder. Go to that folder and locate the IEDriverServer. In my case it was: "[Project dir]\node_modules\protractor\node_modules\webdriver-manager\selenium\IEDriverServer_x64_X.XX.X.exe. You will need to give the relative path to this file in the next step.
Inside your conf.js file, add the following keys & values. Note the use of localSeleniumStandaloneOpts, which means you should remove the property seleniumAddress if you have it:
multiCapabilities : [
{
'browserName' : 'chrome'
}, {
'browserName' : 'internet explorer'
}
],
localSeleniumStandaloneOpts : {
jvmArgs : ["-Dwebdriver.ie.driver=<RELATIVE PATH TO IE DRIVER>"] // e.g: "node_modules/protractor/node_modules/webdriver-manager/selenium/IEDriverServer_x64_X.XX.X.exe"
},
That was all I needed to do. I don't start the server beforehand, I simply run protactor conf.js. Easier now, I guess.
Download the IEDriverServer.exe
Please specify the same in your config file
seleniumArgs: ['-Dwebdriver.ie.driver=<path to IEDriverServer.exe>']
I was looking around this question for few hours, the best way seems to be:
1) download
webdriver-manager --ie update
This should download the driver from the google.. selenium ... release folder and place it directly in the good place in your npm local repository.
2) setup in config.js file of your tests:
...
multiCapabilities: [
//{
// browserName: 'chrome',
// version: 'ANY'
//},
//{
// browserName: 'firefox',
// version: 'ANY'
//},
{
browserName: 'internet explorer',
version: 'ANY'
},
],
// For some IE functions you may need to specify defaultTimeoutInterval
...
3) setup IE:
follow this post
http://jimevansmusic.blogspot.fr/2012/08/youre-doing-it-wrong-protected-mode-and.html
PS: about the "protected mode" setup of IE, it's important to have the same setup for all zones. I prefer to have protected mode 'on' for all zone
4) patch the registry
as described here: http://heliumhq.com/docs/internet_explorer
[HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Internet Explorer\MAIN\FeatureControl\FEATURE_BFCACHE]
"iexplore.exe"=dword:00000000
5) IE 11 update break the way the system work:
My lastest issue was "the server did not provide any stack trace ...." this is due to an update of the 17th of Dec 2014. Uninstall it and then it's good.
https://code.google.com/p/selenium/issues/detail?id=3390
crazy path to make it running. It cannot be like this for a long run, please comment my post with your experiences/feedbacks.
Richard
Here is my config file:
exports.config = {
seleniumAddress: 'http://127.0.0.1:4444/wd/hub',
capabilities: {
'browserName': 'internet explorer',
},
framework: 'jasmine',
// Spec patterns are relative to the current working directory when
// protractor is called.
specs: ['your_spec_file.js'],
};
The steps to run in IE :
Need two terminals in Visual Studio Code,
In the first terminal, Run command "webdriver-manager start" to start selenium server.
In the second terminal, Run your js config file as :
Protractor conffile_name.js
This will successfully start Internet explorer.
Thanks
For a project I am using SASS 3.2.19 and Compass 0.12.5 combined with the last version of Grunt.
My file structure looks like this :
styles/
css/
page1.css
page2.css
page3.css
...
sass/
page1.scss
page2.scss
page3.scss
...
generics/
_general.scss
_menu.scss
_ie.scss
...
partials/
_sectionBegin.scss
_sectionClients.scss
...
In each pages{number}.scss file I import the scss blocks I actually need like this :
#import "generics/general"; // inside this file _ie.scss is imported
#import "generics/menu";
#import "partials/sectionBegins";
#import "partials/sectionClients";
.additionalStyles {
background: url(/example/example-cover.jpg) no-repeat;
}
And finally, here is my Gruntfile.js :
compass: {
dev: {
options: {
sassDir: ['styles/sass'],
cssDir: ['styles/css'],
outputStyle: 'expanded',
noLineComments: true,
environment: 'development'
}
},
...
grunt.registerTask('default', ['compass:dev' , 'watch']);
So, what I am doing here is setting Grunt to watch the sass/ repository. As soon as it detects some changes the page.css will be overwrite.
Well, this project structure actually works perfectly when there are only a few pages but now that I have more than 40 pages the compilation time is taking approximately 1min.
Indeed supposed that I edit a .scss file which is used by all the pages, all the pages will have to be overwritten.
So, what I am missing here ? How can I improve my project file structure and do you have some good examples of a gruntfile conf in a similar scenario ?
We also have a Sass project with a lot of partials. We still haven't figured out what to do when modifying a partial that is used by a lot of .scss files; there really isn't a way to get around having to compile all of them (eventually, when you deploy; sometimes you're only working on one page and really do only need one to compile in the short term). You could set up grunt tasks to compile each of your pages individually so you at least have something to run when you only need to compile a single .scss file.
The best thing to do in your case might be to think outside the box here...what if that partial WASN'T required by a lot of .scss files? What if it was only imported into one main.scss file that compiled into a minified main.css that was included on every page of your project (as the first script on the page, so its styles would get overwritten by any more specific page styles)? We have one script that includes our generic styles for things like buttons, forms, panels...stuff that's on pretty much every page, and isn't too large a burden to load in on pages that don't have a form or a button, especially if minified.
For the cases where modifying a partial only needs to prompt compilation of a few Sass files, we have figured out a solution using the Gruntfile. You can use grunt-contrib-watch to run different tasks depending on where a change was detected. For example, we have the following 2 tasks set up for grunt-contrib-sass:
sass: {
dev_mainstyles: {
options: {
sourcemap: true,
trace: true,
style: 'expanded',
compass: true,
lineNumbers: true
},
files: {
'...css/main.css': '...sass/main.scss',
},
},
dev_customerstyles: {
options: {
sourcemap: true,
trace: true,
style: 'expanded',
compass: true,
lineNumbers: true
},
files: [{
expand: true,
cwd: '.../sass/',
src: ['customers/**/*.scss'],
dest: '.../css/',
ext: '.css'
}],
},
}
I have set up the following tasks for grunt-contrib-watch:
watch: {
sassmain: {
files: ['.../sass/*.scss'],
tasks: ['sass:dev_mainstyles'],
},
sasscustomers: {
files: ['.../sass/customers/**/*.scss'],
tasks: ['sass:dev_customerstyles'],
},
}
By listing both files and directories you can get as specific as you need to and hopefully you'll be able to set up watch tasks that only compile what is needed whenever something changes! Good luck!
We're still looking for suggestions on how to make this whole process even faster, by the way, this is by no means a definitive answer, it's just some tricks we've figured out so far.
Here is my Gruntfile.js
watch: {
options: { livereload: true },
compass: {
files: ['assets/sass/*.{scss,sass}'],
tasks: ['compass']
},
// js: {
// files: '<%= jshint.all %>',
// tasks: ['jshint', 'uglify']
// },
livereload: {
// files: ['*.html', '*.php', 'assets/stylesheets/**/*.{css}']
files: ['*.html', '*.php', 'assets/stylesheets/custom.css']
}
},
// compass and scss
compass: {
dist: {
options: {
config: 'config.rb',
force: true
}
}
},
and this is output from grunt watch :
Done, without errors.
... Reload assets/sass/custom.scss ...
... Reload assets/stylesheets/custom.css ...
Completed in 11.033s at Fri Dec 06 2013 14:20:48 GMT+0100 (CET) - Waiting...
OK
>> File "assets/stylesheets/custom.css" changed.
>> File "assets/sass/custom.scss" changed.
Running "compass:dist" (compass) task
overwrite assets/stylesheets/custom.css (0.701s)
identical assets/stylesheets/app.css (3.452s)
Compilation took 4.158s
Done, without errors.
... Reload assets/sass/custom.scss ...
... Reload assets/stylesheets/custom.css ...
Completed in 10.719s at Fri Dec 06 2013 14:21:53 GMT+0100 (CET) - Waiting...
..so, why is livereload taking so much time for refreshing the page,
10secs to preview any change in my .scss file, also how it would be
possible not to refresh page completely but only inject .css changes
in page?
..another thing i would like to know is how to avoid that
compilation lag on app.css, which took almost 4 secs, and it is not
even changed?
I am using livereload browser extension with this configuration.
Thanks.
1a: to speed things up in a watch task try the option spawn:false. This might make things unstable, but it's worth a try. If it seems ok go for it. It might cause you problems later though if you add a lot of different tasks to the watch task. But you can worry about that then and disable it potentially.
1b:
First of all don't enable livereload on for the compass task. (you have it globally, take in only in the css) Because of this it will trigger a livereload event for the scss file as well. But since the livereload client doesn't know this file then it will reload the whole page. Make sure the only reported file is the compiled css.
Secondly the watch task will trigger livereload for previously changed files as well. This is a known but, I believe it is fixed in master, but no published yet.
https://github.com/gruntjs/grunt-contrib-watch/issues/205
2:
Well it have to compile it to compare it, then it just reports that it is identical.
To only inject .css changes:
watch: {
compass: {
files: ['assets/sass/*.{scss,sass}'],
tasks: ['compass']
},
livereload: {
files: ['assets/stylesheets/*.css'],
options: { livereload: true }
}
}
Unfortunately, I am also getting slow and similar compilation times (it must be compass).