I'm building a Gruntfile.js.
I'm trying to create tasks for responding to php requests.
Other tasks include live compiling compass/sass and live-reload.
I've hit an interesting snag:
When I start grunt, I can see in the terminal that the watch tasks is running, and that the php server is running: I get messages in terminal about certain files not being in place.
Now heres the thing... a couple of seconds after I start grunt, firefox windows start opening. (I start the task without firefox running at all. I generally use chromium and chrome).
New windows keep opening. ff messages about firefox crashing sometimes pop up. I also get windows popping up telling me that my ff profile is inaccessible - which is what I'd expect if I try and run 'firefox' from the terminal while ff is already running.
They keep popping up until I stop grunt from running. They all close immediately when I stop the task, by Ctrl-c from the terminal.
What could be causing this?
Here is my gruntfile
module.exports = function (grunt){
grunt.initConfig({
compass : {
dist : {
options : {
cssDir : 'css',
sassDir : 'sass',
debugInfo : true
}
}
},
php :{
dist : {
options : {
keepalive : true,
port: 9000
}
},
watch : {
files : ['*.html', '*.php', 'js/*', 'sass/*', 'css/*'],
tasks : ['compass'],
options : {
livereload: true
}
}
},
});
grunt.loadNpmTasks('grunt-php');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-compass');
grunt.registerTask('default', ['php', 'watch']) ;
} ;
Your watch task specifies that you want to use livereload - so, that's (kind of) expected, right?
See here:
https://github.com/gruntjs/grunt-contrib-watch#optionslivereload
http://livereload.com/
Related
I'm trying to use the grunt-modernizr plugin in my project but I'm receiving the following output when I run tasks:
Running "modernizr:dist" (modernizr) task
>> Explicitly including these tests:
>> pointerevents
Looking for Modernizr references
I'm not receiving any type of error the terminal just goes back to the directory that I'm in, as if it's just giving up.
Here is my grunt file:
module.exports = function(grunt) {
grunt.initConfig ({
// Do grunt-related things in here
pkg: grunt.file.readJSON('package.json'),
modernizr: {
dist: {
"dest": "javascripts/modernizr-custom.js",
"parseFiles": true,
"customTests": [],
"devFile": "javascripts/modernizr-custom.js",
"outputFile": "javascripts/min/modernizr-custom.min.js",
"tests": [
"pointerevents",
"css/pointerevents"
],
"extensibility": [
"setClasses"
],
"uglify": false
}
},
cssmin: {
target: {
files: {
'css/min/bootstrap.min.css': ['css/bootstrap.css']
}
}
},
});
grunt.loadNpmTasks("grunt-modernizr");
grunt.loadNpmTasks('grunt-contrib-cssmin');
grunt.registerTask('default',['modernizr', 'cssmin']);
};
Output from running grunt --verbose:
Initializing
Command-line options: --verbose
Reading "gruntfile.js" Gruntfile...OK
Registering Gruntfile tasks.
Reading package.json...OK
Parsing package.json...OK
Initializing config...OK
Registering "grunt-modernizr" local Npm module tasks.
Reading /Applications/MAMP/htdocs/bootstrap-three-wordpress/wp-content/themes/brandozz/node_modules/grunt-modernizr/package.json...OK
Parsing /Applications/MAMP/htdocs/bootstrap-three-wordpress/wp-content/themes/brandozz/node_modules/grunt-modernizr/package.json...OK
Loading "modernizr.js" tasks...OK
+ modernizr
Registering "grunt-contrib-cssmin" local Npm module tasks.
Reading /Applications/MAMP/htdocs/bootstrap-three-wordpress/wp-content/themes/brandozz/node_modules/grunt-contrib-cssmin/package.json...OK
Parsing /Applications/MAMP/htdocs/bootstrap-three-wordpress/wp-content/themes/brandozz/node_modules/grunt-contrib-cssmin/package.json...OK
Loading "cssmin.js" tasks...OK
+ cssmin
Loading "gruntfile.js" tasks...OK
+ default
No tasks specified, running default tasks.
Running tasks: default
Running "default" task
Running "modernizr" task
Running "modernizr:dist" (modernizr) task
Verifying property modernizr.dist exists in config...OK
Files: -> javascripts/modernizr-custom.js
Verifying property modernizr exists in config...OK
>> Explicitly including these tests:
>> pointerevents
Looking for Modernizr references
This is something I just came across too and seems to be grunt-modernizr stopping after customizr doesn't find any files to crawl (it crawls by default).
If you add "crawl": false to your modernizr:dist task that should fix the problem.
Also, I think "extensibility": [ "setClasses" ], should be "options": [ "setClasses" ],.
To use the grunt-modernizr task to crawl your code for Modernizr references you'll have to look at the config properties for the customizr task as this is part of grunt-modernizr 's node_modules:
modernizr: {
dist: {
dest: 'bower_components/modernizr/build/modernizr.custom.js',
uglify: false,
options: [
'setClasses',
'addTest'
],
files: {
src: ['js/app/**/*.js', 'js/app/*.js']
}
}
}
devFile: doesn't seem to matter where you point at
dest: instead of outputFile, note I'm just outputting to a build directory that's not part of the package
uglify: false if you have other minifying options like bundleconfig.json
options: to bypass the default options { "setClasses", "addTest", "html5printshiv", "testProp", "fnBind" }
files: to enlist your crawlable director(y|ies), make sure you take care of the root files and/or subdirectories as well
Load the required tasks, in my case:
grunt.loadNpmTasks('grunt-contrib-clean');
grunt.loadNpmTasks('grunt-modernizr');
grunt.loadNpmTasks('grunt-contrib-copy');
Refer to the 'modernizr:dist' task => grunt.registerTask('default', ['clean', 'modernizr:dist', 'copy']);
Which results in an unminified 34kb file:
Running "clean:files" (clean) task
19 paths cleaned.
Running "modernizr:dist" (modernizr) task
Looking for Modernizr references
1 match in js/app/classes/yambo.options.js
bgpositionxy
1 match in js/app/modules/yambo.audio.js
audio
Ready to build using these settings:
setClasses, addTest
Building your customized Modernizr...OK
Success! Saved file to bower_components/modernizr/build/modernizr.custom.js
Process terminated with code 0.
Running "copy:main" (copy) task
Copied 11 files
Done, without errors.
This way there's no need to even go to the online build to add a feature test. Simply reference Modernizr throughout your js code:
window.Yambo = (function($, modernizr, ns){
ns.Audio = {
extension: (function () {
return modernizr && modernizr.audio.mp3
? 'mp3'
: modernizr.audio.ogg
? 'ogg'
: 'wav';
}())
};
return ns;
}(window.jQuery, window.Modernizr, window.Yambo || {}));
Make sure to use the correct property name for a feature detection, so customizr can pick it up and provide a test to your custom build.
This should be also possible for css but haven't been testing that for the moment.
It looks like you missed source files.
http://gruntjs.com/configuring-tasks#files-object-format
Try to include
"dist": {
"files": {
"src": ['!<%= appDir %>assets/js/bower/modernizr/**']
}
}
I am using grunt-browserify to compile my react/flux application. I've also enabled Watchify under browserify options so speed up the compile process. It compiles fine when first run, but once I change a file and it compiles again, a Maximum Call Stack Size Exceeded error appears in the browser's console and breaks the application.
It seems that Watchify is adding react/flux/other dependencies again on a recompile which causes the error. Just a theory.
Any ideas?
Grunt Task
browserify: {
dist: {
files: {
'public/dist/bundle.js': ['public/js/**/*.jsx', 'public/js/**/*.js']
},
options: {
debug: true,
bare: true,
alias: [
'./node_modules/react/dist/react-with-addons.js:react',
'./node_modules/flux/index.js:flux',
'./public/lib/react-router/react-router.js:react-router',
'./node_modules/lodash/index.js:lodash'
],
transform: [react.browserify],
watch: true,
keepAlive: true
}
}
}
Register
grunt.registerTask('compile', ['browserify']);
Did you try ignore 'public/dist/bundle.js' for watching ?
I've set up grunt successfully to watch sass and js file changes in my Gruntfile.js. The only thing its not picking up are the changes to my php files. Looking at the documentation for browser-sync for Wrodpress, i need to state options like so:
browserSync: {
files: {
src : [
'style.css',
'images/*',
'js/**/*.js',
'**/*.php'
],
},
options: {
// server: {
// host: "192.168.1.141:8888/bch",
// baseDir: "/", // "./",
// },
proxy: "localhost",
// port: 8888,
watchTask: true
}
}
I've tried the commented out options aswell as a slightly differnt sytax setup at http://www.browsersync.io/docs/grunt/ at the bottom of the page and for any option neither does the grunt-cli show any updates nor does the browser change on save. Is there an obvious component I'm missing?
For anyone fairly new to this as I am and wanted to know what i did:
browserSync: {
dev: {
options: {
proxy: "localhost:8888",
files: ['style.css', 'js/**/*.js', '**/*.php'],
watchTask: true,
}
}
}
Stating the port explicitly as per my quesiton example meant the browser sync wouldn't go to its default :3000 port for it to then run its sync magic
Although it does need a reference to the 8888 as its part of my base local URL. So instead i put it in the proxy: option and i can click through to any project from there in my htdocs folder.
Wrapping it in dev: {} to tell browser-sync i had my own server running (MAMP)
This also then stopped the annoying error of Fate Error: not running when trying to come out of the currently running 'grunt' command.
On Mac OSX Mavericks, with MAMP.
I am using grunt-protractor-runner plugin and in the protractor target I want to send the specs param containing the test to run.
In the grunt file my target looks as follows:
testIntegration:
{
options:
{
args: {
specs: ['test1.js'],
browser: 'firefox'
}
}
The protractor parent task option contains setting of the protractor config file.
When running this target I get this error:
$ grunt protractor:testIntegration
Running "protractor:testIntegration" (protractor) task
Starting selenium standalone server...
Selenium standalone server started at ...
Warning: pattern t did not match any files.
Warning: pattern e did not match any files.
Warning: pattern s did not match any files.
Warning: pattern t did not match any files.
Warning: pattern 1 did not match any files.
Warning: pattern j did not match any files.
Warning: pattern s did not match any files.
and then some more errors.
the same line works well in Protractor config file.
Tried a few other variation but no success.
What am I missing? Any ideas?
Try this configuration:
module.exports = function(grunt) {
// Project configuration
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
protractor: {
options: {
keepAlive: true,
singleRun: false,
configFile: "PROTRACTOR_CONFIG_FILE.js"
},
run_firefox: {
options: {
args: {
browser: "firefox"
}
}
}
});
// load grunt-protractor-runner
grunt.loadNpmTasks('grunt-protractor-runner');
// register tasks
grunt.registerTask('default', 'Run Protractor using Firefox',
['protractor:run_firefox']);
};
Funny, if you read every error message, it spells out "test1.js". Looks like it's not reading in the config file correctly, probably because you're not using grunt.file.readJSON('FILENAME.json')
Is it possible to specify a particular browser (besides the OS' default) in the gruntfile or at the command prompt? E.g. "grunt server firefox" or the like. My default browser is Chrome, but I want to test/develop my site in multiple browsers. I am using GruntJS within Yeoman.
Bryan
Quick Answer
In Gruntfile.js you can add an app parameter:
open: {
server: {
url: 'http://localhost:<%= connect.options.port %>',
app: 'firefox'
}
},
Pull request: https://github.com/jsoverson/grunt-open/pull/7
Commit: https://github.com/GabLeRoux/grunt-open/commit/6f2c7069767e58160ec96aaaa8fa20ed210ba183
Command Line Parameters
It is possible to pass command line parameters in the app string, such as app: "chromium-browser --incognito" - #bk11425
From the documentation of grunt connect: https://github.com/gruntjs/grunt-contrib-connect
You can use:
open: {
target: 'http://localhost:8000', // target url to open
appName: 'open', // name of the app that opens, ie: open, start, xdg-open
callback: function() {} // called when the app has opened
}
i.e. appName: 'Google Chrome'
While the answers in here helped fix my occurrence of the problem, as someone who's not very familiar with grunt, I had a hard time figuring just exactly where I was supposed to put the "open:" stanza in my Gruntfile.js. It took me about three three tries for me to find the right spot (e.g I tried directly under 'grunt.initConfig' and under 'connect: options:' to no effect)
I'm using the Gruntfile.js as generated by the standard angular yeoman generator.
I'm posting where I put it in this file just to give a little more "context" for anyone in a similar predicament.
Here is the relevant snippet of the Gruntfile.js:
// ...
The actual grunt server settings
connect: {
options: {
port: 9000,
// Change this to '0.0.0.0' to access the server from outside.
hostname: 'localhost',
livereload: 35729
},
livereload: {
options: {
//open: true, <- original line, comment out
// add this
open: {
//target: 'http://localhost:9000', <- this works too
target: 'http://localhost:<%= connect.options.port %>',
appName: 'firefox'
},
// end add
middleware: function (connect) {
return [
connect.static('.tmp'),
connect().use(
'/bower_components',
connect.static('./bower_components')
),
connect().use(
'/app/styles',
connect.static('./app/styles')
),
connect.static(appConfig.app)
];
}
}
},
test: {
//...
The grunt server task has almost nothing to do with the browser, it just starts a static server for you to connect to and preview your app. You could theoretically use any browser you want to connect to http://localhost:8080/
To clarify based on the poster's comment:
grunt-open is a different task than grunt-server: https://npmjs.org/package/grunt-open.grunt-open uses node-open which just defaults to the default open task for darwin or start for win32: https://github.com/jjrdn/node-open#how-it-works
So, to answer, whatever application you have specified to open .html files (or whatever you're opening) will open with this task.