Error running grunt-responsive-images task - node.js

I'm trying to set up grunt with grunt-responsive-images, and getting the following error:
Warning: Could not execute GraphicsMagick/ImageMagick: gm "identify" "-ping" "-format" "%m:%T:%s" "assets/_img/bgAbout.jpg" this most likely means the gm/convert binaries can't be found
The npm and ImageMagick are both installed, have also tried GraphicsMagick (with default engine) to no avail.
I've verified all my versions of node/grunt/packages and I'm on Windows 10 if that's helpful info.
relevant bits from gruntfile.js:
responsive_images: {
dev: {
options: {
engine: 'im'
},
files: [{
expand: true,
src: ['**/*.{gif,jpg,png}'],
cwd: 'assets/_img/',
dest: 'assets/test/'
}]
}
},
grunt.loadNpmTasks('grunt-responsive-images');
grunt.registerTask('default', ['responsive_images']);
All relevant help I've found points to ImageMagick/GraphicsMagick not being installed, but it is. What could be hindering the communication between the task and IM?

Ugh. foiled by Windows UAC! Ran cmd as administrator, and it worked like a charm. Why did it take so long for my basic customer support troubleshooting reflexes of yore to kick in?

Related

grunt ngtemplates task 100% cpu

The grunt task ngtemplates runs indefinitely (almost an hour and not finished) with 100% cpu utilisation. If i comment this task, then the build finishes.
And the build task with ngtemplates runs and completes OK on another machine.
Any ideas/clues are much appreciated.
Node version: 0.10.29
grunt-cli: v0.1.13
grunt: v0.4.5
ngtemplates: {
app: {
cwd: '<%= yeoman.app %>',
src: ['views/{,*/}*.html', 'views/inbox/{,*/}*.html' , 'scripts/directives/*.html'],
dest: 'scripts/templates.js',
options: {
usemin: 'scripts/scripts.js', // <~~ This came from the <!-- build:js --> block
htmlmin: {
collapseBooleanAttributes: true,
collapseWhitespace: true,
removeAttributeQuotes: true,
removeComments: true, // Only if you don't use comment directives!
removeEmptyAttributes: true,
removeRedundantAttributes: true,
removeScriptTypeAttributes: true,
removeStyleLinkTypeAttributes: true
}
}
}
}
Many thanks,
I had the same problem, I really do not know but that should be solved by removing eliminating the line about 73 .map (this.minify) from "node_modules/grunt-angular-templates/task/lib/ compiler.js"
I had a similar problem when running my build with grunt and the ngtemplates task wouldn't complete.
I can confirm that the answer above to comment out line 73 of "node_modules/grunt-angular-templates/task/lib/ compiler.js" does allow the task to complete. However, this is not likely the problem (and you lose out on the minification of the files if you comment that line).
For me, I had an HTML syntax error in one of my HTML files. I discovered this by running my files through w3's HTML validator. After I fixed the syntax error, the ngtemplates task completed for me.
Using #isidro-martinez solution you may find the real issue. My problem was an undeteced syntax error on my JS. I've been able to find it thank to temporarilly removing the line in the previouse comment:
I had the same problem, I really do not know but that should be solved by removing eliminating the line about 73 .map (this.minify) from "node_modules/grunt-angular-templates/task/lib/ compiler.js"

Why might Intern timeout with BrowserStack, but not Sauce Labs?

Edit: This has since been solved as an interesting network issue, see my comments and answer below.
Original Post:
My goal: Setup proof-of-concept tests on BrowserStack with Intern.
I went through the intern-tutorial, which all worked beutifully for me on Sauce Labs, and now I just want to learn what it takes to modify that configuration to test on BrowserStack, which keeps failing for me.
The terminal command, as per the tutorial:
./node_modules/.bin/intern-runner config=tests/intern
When running that, I get:
Listening on 0.0.0.0:9000
Starting tunnel...
BrowserStackLocal v2.2
Connecting to BrowserStack using WebSocket protocol...
Connected.
Ready
Error: connect ETIMEDOUT
at errnoException <net.js:904:11>
at Object.afterConnect [as oncomplete] <net.js:895:19>
TOTAL: tested 0 platforms, 0/0 tests failed; fatal error occurred
Environment:
OS: Mac OS X 10.9.4
Node: 0.10.29
NPM: 1.4.21
Intern: 2.0.1
Variables set in ~/.bash_profile as:
export BROWSERSTACK_USERNAME="<my_actual_username>"
export BROWSERSTACK_ACCESS_KEY="<my_actual_access_key>"
Intern configuration set in tests/intern as:
define({
proxyPort: 9000,
proxyUrl: 'http://localhost:9000/',
capabilities: {
'selenium-version': '2.41.0'
},
environments: [
{ os: "Windows", os_version: "8.1", browser: "chrome", browser_version: "34.0" }
],
maxConcurrency: 3,
tunnel: 'BrowserStackTunnel',
tunnelOptions: {
verbose: true
},
loader: {
packages: [ { name: 'app', location: 'app' } ]
},
suites: [ 'tests/hello' ],
functionalSuites: [ 'tests/functional/index' ],
excludeInstrumentation: /^(?:tests|node_modules)\//
});
As in, this is all that has been changed since the completed tutorial:
Removed all but one environment object (for simplicity), modified it to a format supported by BrowserStack.
Set the 'tunnel' property to the appropriate tunnel class.
Set tunnelOptions: { verbose: true } for debugging.
Things I've tried:
Setting BROWSERSTACK_USERNAME and BROWSERSTACK_ACCESS_KEY inline on the command line when executing the runner, just in case.
Used the configuration here (which I recognize is out of date): https://stackoverflow.com/questions/23304388/intern-js-and-browserstack
Stupidity checks, computer reboots, etc.
My environment object should be valid, as its based on one coming back from:
https://www.browserstack.com/automate/browsers.json
I feel like there's some basic thing here I'm missing about the configuration.
Can you have a look into the intern config file, which I use to run tests on browserstack. Hope it will help you solve your problem.
I have confirmed via A/B testing on different networks and with the same configuration, that this is due to the fact that Verizon Wireless blocks WebSocket connections, which has been reported elsewhere (see my comments on the original question).
This can be very tricky to diagnose. I hope it helps someone in the future!

grunt-contrib-copy dies with EPERM operation not permitted "C:\Documents and Settings"

I am trying to run a simple grunt task using grunt-contrib-copy, but it dies immediately on reaching the copy task, with this message:
Running "copy:main" (copy) task
Warning: EPERM, operation not permitted 'C:\Documents and Settings' Use --force to continue
Aborted due to warnings
I am running:
Windows 7 64-bit (so C:\Documents and Settings doesn't exist)
node 0.10.28 (installed at C:\nodejs)
npm 1.4.9
grunt-cli 0.1.13
grunt 0.4.5
grunt-contrib-copy 0.5.0
I have done a full-text search for "Documents and Settings" on both C:\nodejs and my project folder (C:\Users\myusername\Documents\Programming\myprojectname, with no spaces or parentheses in there), but nothing matches.
My copy task definition is:
copy: {
main: {
files: [
{expand: true, cwd: 'src/core', src: '/**', dest: 'src/chrome/'},
{expand: true, cwd: 'src/core', src: '/**', dest: 'src/firefox/'}
]
}
},
What could be causing this error?
I fixed it. The problem was the src: '/**' properties in the original code.
I changed it to this, and now it works perfectly:
copy: {
main: {
files: [
{expand: true, cwd: 'src/core', src: '**/*', dest: 'src/chrome/'},
{expand: true, cwd: 'src/core', src: '**/*', dest: 'src/firefox/'}
]
}
},
The /** src property was breaking it, and **/* works correctly. I'm pretty new to Grunt, so I didn't realize the former syntax was a problem; I somehow got the impression it would be treated as a relative path.
I searched high and low for an answer to this before posting my question. The Grunt docs have a good explanation of Grunt's globbing patterns (*, **, etc.), but it doesn't mention leading slashes being a problem. So, I figured I would leave this up for anyone else who runs into this kind of problem. I hope it helps someone else.

Understanding the mean stack and integrating uglify.js and stylus

I'm just getting started with the MEAN stack (https://github.com/linnovate/mean), so I'm pretty sure my question is going to look very basic to an expert, so my apologies in advance!
While I think it would be a gread addition to what this stack already has to offer, I cannot manage to integrate Uglify.js and stylus
Also someone already asked this, but it would make sense to me to use Jade template for both server and public views, at least for a matter of standardization.
I have tried playing with the grunt file and server.js, renaming some files, but all I managed to achieve so far, is break the original project...
Thanks in advance!
EDIT: Just found a fork of this project which has just added support for jade templates for public views: https://github.com/tutley/mean
This post explains how to integrate Stylus pre-processing to the MEAN stack: http://to-s.tk/integrate-stylus-to-the-mean-stack/
Short version:
Move public/css to a new assets/stylesheets and rename all the .css files to .styl
Install grunt-contrib-stylus through npm's package.json, as both a dev and runtime dependency.
-Configure stylus compilation in your Gruntfile
// ...
grunt.initConfig({
// ...
watch: {
// ...
stylus: {
files: ['assets/stylesheets/**/*.styl'],
tasks: ['stylus']
},
// ...
},
// ...
stylus: {
compile: {
options: {
paths: ['assets/stylesheets/**']
},
files: [{
dest: 'public/css/',
cwd: 'assets/stylesheets/',
src: '*.styl',
ext: '.css',
expand: true
}]
}
},
// ...
});
//...
//Load NPM tasks
// ...
grunt.loadNpmTasks('grunt-contrib-stylus');
// ...
Import views stylus files (or any substylus) in common.styl using #require statements
Remove references to views or other substylesheets in head.jade.
Then all assets/stylesheets/*.styl files should be automatically compiled into public/css/*.css, as long as grunt is running. To trigger a compile without relying on watch, you can run grunt stylus.

watch doesn't refresh the page on file change (express site)

It would be nice to have the browser automatically reload the page when I change a project file. I have this node-express site with the server being defined in 'server.js'
However, I've tried different grunt configurations, but none of them caused the browser to reload on a file change although the 'watch' task prints a message that the file changed!
Here is the relevant grunt configuration:
watch: {
all: {
files: 'views/index.ejs', // for now only watch this file!
options: {
livereload: true
}
}
},
express: {
options: {
background: true,
error: function(err, result, code) {},
fallback: function() {},
port: 3000
delay: 0,
output: ".+",
debug: false
},
dev: {
options: {
script: './server.js',
node_env: 'development',
livereload: true
}
}
}
....
grunt.registerTask('server', [
'express:dev',
'open',
'watch'
])
};
And to run the task I do
$> grunt server
Can someone explain what is wrong with this configuration ?
thnx
You need to install the livereload browser plugin from http://livereload.com/
I am trying to use grunt livereload to reload css changes on my node.js pages. I am getting closer to solve my problem which is similar to yours. So from what i know so far and please correct me if i'm wrong you dont need to install "livereload browser plugin" right? I used grunt alone without node.js and i could just use livereload without installing "livereload browser plugin" i just had to add a line in my .html (the problem i run into with node is how to reload .ejs and i found this page/question on the way solving it) : so i dont know if installing the livereload thing is another way to do the script part or if this is the case like i mentioned in my problem if i want to live reload .ejs i have to install the plugin.

Resources