We Keep Coding

grunt sftp-deploy authKey ftppass

I receive this errors via grunt-sftp-deploy --verbose
I'm just started with grunt, just need to upload the watch css generated via sass to a certain point on a server.
Registering "grunt-sftp-deploy" local Npm module tasks.
Reading
***************\public\grunt\node_modules\grunt-sftp-deploy\package.json...OK
Parsing
***************\grunt\node_modules\grunt-sftp-deploy\package.json...OK
Loading "sftp-deploy.js" tasks...OK
+ sftp-deploy
Loading "Gruntfile.js" tasks...OK
+ default
Running tasks: sftp-deploy
Running "sftp-deploy" task
Running "sftp-deploy:build" (sftp-deploy) task
Verifying property sftp-deploy.build exists in config...OK
Files: ../css -> /server/path
**Warning: .ftppass seems to be missing or incomplete Used --force, continuing.**
>> Concurrency : 4
Connection :: connect
**>> Error: Timed out while waiting for handshake
Fatal error: Connection :: error**
So then the gruntfile.js looks like that
module.exports = function (grunt) {
// load all grunt tasks
require('matchdep').filterDev('grunt-*').forEach(grunt.loadNpmTasks);
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
'sftp-deploy': {
build: {
auth: {
host: 'XXX.XXX.XXX.XXX',
port: 22,
authKey: 'key1'
},
cache: 'sftpCache.json',
src: '../css',
dest: '/server/path',
exclusions: [
],
serverSep: '/',
concurrency: 4,
progress: true
}
},
sass: {
dist: {
options: {
style: 'expanded',
noCache: true
},
files: [{
expand: true,
cwd: '../sass/pages',
src: ["**/*.scss"],
dest: '../css',
ext: ".css"
}]
}
},
watch: {
options: {
nospawn: true,
nocache: true,
livereload: true
},
sass: {
files: ['../sass/**/*.scss'],
tasks: ['sass']
},
sftp: {
files: ['../css/**/*.css'],
tasks: ['sftp-deploy']
}
}
});
grunt.loadNpmTasks('grunt-sftp-deploy');
grunt.registerTask('default', ['watch']);
};
Sass is right but i can't find why is not uploading the file to the server.
Then my question is:
What i'm missing?
Which is the path in where is supposed to be the .ftppass.json?
Right now is the same place as the gruntfile.js but i'm having problems with it as well and i'm suspecting that is not right. but there is no room to set up the .ftppass.json in the sftp-deploy gruntfile.js settings.
How do i set up the path correctly?
.ftppass.json
{
"key1": {
"username": "username",
"password": "pass"
}
}

It is just .ftppass WITHOUT the .json in the end. Placing it in the same directory as your Gruntfile.js will do it

Grunt + Browser sync: no CSS injection or ghost mode

I'm encountering some confusing issues with getting the browser sync plugin for Grunt to work properly. I have thoroughly read the docs and followed examples but there are a couple of things that won't work:
1) I'm not getting any CSS injection. I know I am running the plugin alongside a watch task, but I have watchTask: true set and my terminal is showing that bS is identifying the change to my CSS, it's just not reloading the browser.
2) None of the ghost mode options seem to work for me. I have set them all to true but, much like the livereload feature, I'm not able to make it work.
Here is my current Gruntfile:
'use strict';
module.exports = function (grunt) {
grunt.initConfig({
watch: {
less : {
files: ['static/css/less/*.less'],
tasks: ['less']
},
html : {
files: ['*.html']
},
js : {
files: ['static/js/*.js']
}
},
less: {
development: {
options: {
paths: ["css"],
compress: true,
yuicompress: true,
optimization: 2
},
files: {
"static/css/styles.css": "static/css/less/styles.less"
}
}
},
browserSync: {
default_options: {
bsFiles: {
src: [
"static/css/*.css",
"*.html"
]
},
options: {
watchTask: true,
server: {
baseDir: "./"
},
ghostMode: {
clicks: true,
forms: true,
scroll: true
}
}
}
}
});
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-less');
grunt.loadNpmTasks('grunt-browser-sync');
// Launch BrowserSync + watch task
grunt.registerTask('default', ['browserSync', 'watch']);
};
Any help would be really appreciated

live reload with grunt and typescript on windows

I am trying to get grunt to reload the browser when it compiles the typescript. It is correctly watching the files and compiling them but I can not figure out how to reload the browser. I tried setting livereload: true in various places with no luck. I left the various livereload sections I tried below. i tried them one at a time and all together.
module.exports = function (grunt) {
grunt.loadNpmTasks('grunt-typescript');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-livereload');
grunt.loadNpmTasks('grunt-contrib-connect');
grunt.loadNpmTasks('grunt-open');
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
connect: {
server: {
options: {
port: 8181,
livereload: true,
}
}
},
typescript: {
base: {
src: ['js/src/**/*.ts'],
dest: 'js/main.js',
options: {
module: 'amd',
target: 'es5',
livereload: true
}
}
},
watch: {
files: 'js/src/**/*.ts',
tasks: ['typescript'],
options: {
livereload: true,
}
},
open: {
dev: {
path: 'http://localhost:8181/index.html',
app: 'chrome'
}
}
});
grunt.registerTask('default', ['typescript', 'connect', 'open', 'watch']);
};

Make sure that you're following the instructions for including the live reload script as documented here. An example would be to include this script at the end of the body (assuming the default port):
<script src="//localhost:35729/livereload.js"></script>

grunt watch & connect

I am kinda new to grunt and want to use it with Jekyll and some LESS-compiling.
My problem now is, I already have fully functioning LESS-comipiling with live reload and watch task and can build my jekyll site through grunt, but how do I run something like the jekyll serve or grunt-connect and grunt watch simultaneously?
I want a grunt task that provides the watching of my LESS-files etc, builds the jekyll site and then runs a small web server with grunt-connect or whatever.
My Gruntfile.js so far:
'use strict';
module.exports = function (grunt) {
grunt.initConfig({
jshint: {
options: {
jshintrc: '.jshintrc'
},
all: [
'Gruntfile.js',
'js/*.js',
'!js/scripts.min.js'
]
},
less: {
dist: {
files: {
'css/styles.min.css': [
'less/app.less'
]
},
options: {
compress: true,
// LESS source map
// To enable, set sourceMap to true and update sourceMapRootpath based on your install
sourceMap: false,
sourceMapFilename: 'css/styles.min.css.map',
sourceMapRootpath: '/'
}
},
dev: {
files: {
'css/styles.min.css': [
'less/app.less'
]
},
options: {
compress: false,
// LESS source map
// To enable, set sourceMap to true and update sourceMapRootpath based on your install
sourceMap: true,
sourceMapFilename: 'css/styles.min.css.map',
sourceMapRootpath: '/'
}
}
},
uglify: {
dist: {
files: {
'js/scripts.min.js': [
'vendor/bootstrap/js/transition.js',
'vendor/bootstrap/js/alert.js',
'vendor/bootstrap/js/button.js',
'vendor/bootstrap/js/carousel.js',
'vendor/bootstrap/js/collapse.js',
'vendor/bootstrap/js/dropdown.js',
'vendor/bootstrap/js/modal.js',
'vendor/bootstrap/js/tooltip.js',
'vendor/bootstrap/js/popover.js',
'vendor/bootstrap/js/scrollspy.js',
'vendor/bootstrap/js/tab.js',
'vendor/bootstrap/js/affix.js',
'vendor/*.js',
'js/_*.js'
]
},
options: {
// JS source map: to enable, uncomment the lines below and update sourceMappingURL based on your install
// sourceMap: 'assets/js/scripts.min.js.map',
// sourceMappingURL: '/app/themes/roots/assets/js/scripts.min.js.map'
}
}
},
watch: {
less: {
files: [
'less/*.less',
'less/bootstrap/*.less'
],
tasks: ['less:dev']
},
js: {
files: [
'<%= jshint.all %>'
],
tasks: ['jshint', 'uglify']
},
livereload: {
// Browser live reloading
// https://github.com/gruntjs/grunt-contrib-watch#live-reloading
options: {
livereload: true
},
files: [
'_site/*'
]
}
},
clean: {
dist: [
'css/styles.min.css',
'css/styles.min.css.map',
'js/scripts.min.js',
'_site/*'
]
},
jekyll: { // Task
options: { // Universal options
bundleExec: true,
src : '<%= app %>'
},
dist: { // Target
options: { // Target options
dest: '<%= dist %>',
config: '_config.yml'
}
},
serve: { // Another target
options: {
serve: true,
drafts: true
}
}
},
connect: {
server: {
options: {
keepalive: true
}
}
}
});
// Load tasks
grunt.loadNpmTasks('grunt-contrib-clean');
grunt.loadNpmTasks('grunt-contrib-jshint');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-less');
grunt.loadNpmTasks('grunt-jekyll');
grunt.loadNpmTasks('grunt-contrib-connect');
// Register tasks
grunt.registerTask('default', [
'clean',
'less:dist',
'uglify',
'jekyll:dist'
]);
grunt.registerTask('dev', [
'watch'
]);
};

You need to tell connect what directory to serve up in the configuration using the "base" option, in this case it would be the static _site directory. You can also change the port to whatever you want, but you end up navigating to localhost:9009 with my example
connect: {
server: {
options: {
livereload: true,
base: '_site/',
port: 9009
}
}
}
You will also want to add a watch task for when you change your html templates. Something like this would work.
watch: {
html: {
files: ['**/*.html', '!_site/**/*.html'],
tasks: ['jekyll:dist']
}
}
Then create a "serve" task like Wallace suggested.
// Start web server
grunt.registerTask('serve', [
'jekyll:dist',
'connect:server',
'watch'
]);
Lastly run "grunt serve" in the command line and navigate to localhost with the port you specified.
As commented by #jiggy
The key change is to not set keepalive to true. Keepalive will block
all subsequent tasks from running. So long as connect is followed by
watch the server won't terminate.

I spent 2 days desperately trying every gruntfile-configuration I could find on the internet. Never worked. Then I found this https://stackoverflow.com/a/24765175/1541141.
Use grunt-contrib-connect, NOT grunt-connect. grunt-connect is blocking...
Hope it helps.

I think the heart of your solution is to create a new task or edit an existing task, like so:
// Start web server
grunt.registerTask('serve', [
'jekyll:dist',
'connect:livereload',
'watch'
]);
...which you would run with a $ grunt serve. less, jshint, uglify and connect are already included under watch.

Alternate grunt.js tasks for development/production environments

I would really love to be able to have a development grunt file and using the same file an production version of the script.
I have tried the suggestion on SO but my script will just fail when trying to call a dev/prod argument. I believe that the answer is for an older version of grunt, or maybe the plugins I am using.
module.exports = function (grunt) {
// load all grunt tasks
require('matchdep').filterDev('grunt-*').forEach(grunt.loadNpmTasks);
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
compass: {
dev: {
options: {
config: 'config.rb',
force: true,
livereload: true
}
}
},
uglify: {
build: {
src: ['docroot/js/*.js', 'docroot/components/**/*.js'],
dest: 'docroot/dis/main.min.js'
}
},
watch: {
options: {
dateFormat: function(time) {
grunt.log.writeln('The watch finished in ' + time + 'ms at' + (new Date()).toString());
grunt.log.writeln('Waiting for more changes...');
},
livereload: true
},
sass: {
files: ['docroot/sass/*.scss'],
tasks: ['compass:dev']
},
/* watch and see if our javascript files change, or new packages are installed */
js: {
files: '<%= uglify.build.src %>',
tasks: ['uglify']
},
/* watch our files for change, reload */
livereload: {
files: ['*.html', 'docroot/css/*.css', 'docroot/img/*', 'docroot/js/{main.min.js, plugins.min.js}'],
options: {
livereload: true
}
}
}
});
grunt.registerTask('default', 'watch');
};
Really, so long as I can get two version running by calling them with, for example:
grunt //local
grunt prod //live
then I can play around with the scripts and what to load.

You can also just register a task that calls an array of tasks
grunt.registerTask('prod', ['tasks1','task2']);
before your default task, that would be
$ grunt prod