Just started using Yeoman Angular generator, but when I run grunt server command, it always opens IE. Tried changes in GruntFile.js
autoprefixer: {
options: {
browsers: ['last 1 version', 'Chrome']
}
But it gives error
Any clues how to get it working?
Simply in your Gruntfile.js you can add an app parameter:
open: {
server: {
url: 'http://localhost:XXXXXXXX',
app: 'Google Chrome'
}
},
This will work.
For reference check this link https://github.com/GabLeRoux/grunt-open/commit/6f2c7069767e58160ec96aaaa8fa20ed210ba183
If you are still having problems, the following should work:
livereload: {
options: {
open: {
appName: "google-chrome"
},
Related
My case is similar to case from other question
"I use protractor to test my angular app. When I manually launch protractor it works properly and tests everything but the trouble comes when I try to launch it through grunt.
When I launch my grunt task for testing, protractor finds the conf file (it displays the right number of specs to test) but just open the chrome driver for less than a seconds on a weird "data;" url, close it right away and marks all the tests as "passed"."
grunt-cli v1.2.0
grunt v0.4.5
node v6.4.0
protractor 4.0.4
module.exports = function () {
return {
protractor: {
options: {
// Location of your protractor config file
configFile: "test/protractor.conf.js",
noColor: false,
},
e2e: {
options: {
// Stops Grunt process if a test fails
keepAlive: false
}
},
continuous: {
options: {
keepAlive: true
}
}
}
}
};
This is my config for grunt
Not have a direct answer to your question, but here is what we have set up that works for us.
Here are the relevant dependencies (note that we had to "fork" grunt-protractor-runner to bump the protractor dependency):
"grunt-protractor-runner": "git+https://github.com/alecxe/grunt-protractor-runner.git",
"protractor": "^4.0.0",
Here is the relevant part of grunt config:
protractor: {
options: {
keepAlive: true,
noColor: false
},
remote: {
options: {
configFile: "test/e2e/config/remote.conf.js"
}
},
local: {
options: {
configFile: "test/e2e/config/local.conf.js"
}
}
},
And, we run our tests through grunt e2e:local and grunt e2e:remote.
Also, make sure to have the latest chromedriver downloaded via webdriver-manager update.
I'm developing a small HTML/JS/SASS project without an backend/server and I'm trying to get Livereloading to work.
In my grunt.initConfig I have:
options: {
livereload: true,
},
But in Chrome I can't activate the Liverload plugin on a local html file.
file:///C:/Users/alucardu/Documents/Visual%20Studio%202015/Projects/JS-demo/JS-demo/index.html
Is this possible to do or do I need to run a server?
Apparently Grunt has something for this called connect > https://github.com/gruntjs/grunt-contrib-connect
When I installed it I added this to my gruntFile:
connect: {
server: {
options: {
open: true,
keepalive: true,
hostname: 'localhost',
port: 8080,
base: ''
}
}
},
And now I can run a local static server :)
I know there are some quite similar questions, but I can't get it to work.
I'm using grunt, including connect, less and watch. Everything works, except for the livecompiling of the .css with less and watch. Like this, I always have to restart grunt etc.
This is my code:
module.exports = function(grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
connect: {
server: {
options: {
port: 8000,
hostname: 'localhost',
base: 'public',
keepalive: true
}
}
},
less: {
development: {
options: {
compress: true,
yuicompress: true,
optimization: 2
},
files: {
"public/style/style.css": "public/style/main.less"
}
}
},
watch: {
files: ['**/*'],
tasks: ['less', 'connect'],
styles: {
files: ['public/style/main.less'], //which files to watch
tasks: ['less'],
options: {
livereload: true
}
}
}
});
grunt.loadNpmTasks('grunt-contrib-connect');
grunt.loadNpmTasks('grunt-contrib-less');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.registerTask('default', ['less','connect','watch']);
};
Please let me know if more information is needed.
You have to add the livereload snippet in your html file to get it works:
<script>
document.write('<script src="http://' + (location.host || 'localhost').split(':')[0] + ':35729/livereload.js?snipver=1"><\/script>')
</script>
35729 is the port of your livereload server.
To further information see the documentation. Also you should read how to enable livereload in your html.
In addition to Mario's answer, I tried around a little.
I found the solution like this:
I ran watch alone, without less or connect and I noticed that it left something in the console, which I did not see in the console when I had it running in combination with connect and less. Next thing I noticed was the "Waiting forever..." in connect's entry in the console. Like this, nothing happenend, because it waited forever. The consequence of this was that watch could not be executed. That also explains why I never watch's entry in the console.
So the solution was this:
I had to delete "keepalive:true" from connect in the Gruntfile.
I have done some searching but have not been able to find a solution to my issue - I would like to have my page livereload after the main.css file is updated by converting bootstrap.less, all done through grunt tasks and grunt serve.
Code I have tried so far:
In Gruntfile.js
grunt.initConfig({
less: {
development: {
options: {
paths: ["bower_components/bootstrap/less"]
},
files: {
"app/styles/main.css": "bower_components/bootstrap/less/bootstrap.less"
}
},
watch: {
styles: {
files: ['app/styles/{,*/}*.css'],
options:{
livereload: true,
}
},
less: {
files:['bower_components/bootstrap/less/{,*/}*.less'],
tasks: ['less']
},
When running grunt serve and then editing any .less file the bootstrap.less successfully compiles into main.css. The issue I'm having is I have to kill my grunt serve instance and start up another one for any of the css changes to take effect (however, changes to the HTML appear as expected with no need to refresh the page/kill server)
Some notes:
Even after compiling the bootstrap.less file and opening the main.css file and "editing" it manually the livereload does not work even though my console shows "app\styles\main.css" changed and then shows "Live reloading app\styles\main.css..." (it says it completed in 0.000s which does not seem correct)
I do have the "livereload" extension installed for both Chrome and Firefox and neither appear to help the situation
My bootstrap.less file is composed of all #imports (when researching it seemed like this may cause an issue)
I'm working with:
"grunt": "~0.4.1",
"grunt-contrib-watch": "~0.6.1",
"load-grunt-tasks": "~0.4.0",
"grunt-contrib-less": "^0.11.0"
For reference here are my grunt server settings:
connect: {
options: {
port: 9000,
open: true,
livereload: 35729,
// Change this to '0.0.0.0' to access the server from outside
hostname: 'localhost'
},
livereload: {
options: {
middleware: function(connect) {
return [
connect.static('.tmp'),
connect().use('/bower_components', connect.static('./bower_components')),
connect.static(config.app)
];
}
}
},
test: {
options: {
open: false,
port: 9001,
middleware: function(connect) {
return [
connect.static('.tmp'),
connect.static('test'),
connect().use('/bower_components', connect.static('./bower_components')),
connect.static(config.app)
];
}
}
},
dist: {
options: {
base: '<%= config.dist %>',
livereload: false
}
}
},
Also, this is my first post/question - feel free to let me know if I should be doing anything differently.
Thanks!
I'm new to Node.js and Grunt... I'm attempting to use Node.js and Grunt on a Windows server to watch my main.less file and do a standard compile and concatinate. I'm able to do this while the command prompt is open, but I need this to run as a daemon while not logged into the server since the .less files get deployed from our CMS that sits in the cloud.
I found promising documentation in Grunt-Forever, but it requires you to point to an application, while I just want to perform the grunt watch task.
Someone else asked a similar question 9 months ago, but nobody gave an answer:
Grunt.js Watch Forever
I tried this from the command line:
FWIW, you can do forever /usr/local/bin/grunt --base . watch to use forever with grunt watch atm.
But, I got errors.
Here is my gruntfile:
module.exports = function(grunt) {
grunt.registerTask('watch', [ 'watch' ]);
grunt.initConfig({
concat: {
js: {
src: [
'js/global.js','js/googlemap.js'
],
dest: 'js/main.min.js'
},
},
uglify: {
options: {
mangle: false
},
js: {
files: {
'js/main.min.js': ['js/main.min.js']
}
}
},
less: {
style: {
files: {
"css/style.css": "less/main.less"
}
}
},
watch: {
js: {
files: ['js/global.js','js/googlemap.js'],
tasks: ['concat:js', 'uglify:js']
},
css: {
files: ['less/*.less'],
tasks: ['less:style']
}
}
});
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-less');
grunt.loadNpmTasks('grunt-contrib-watch');
};
Any help is much appreciated!
Use node to call grunt, use PM2 to run and manage node.
Try running the grunt watch task with nohup. Since you mentioned "Windows server" you can check this answer about nohup equivalent in Windows. Then you will have the grunt task running even when you log out of the server.