Grunt js not opening in browser on server command - gruntjs

When I do a 'grunt serve' in my terminal it just sits and watches. it never opens my browser. I'm not sure what I am missing.
Take a look at this and tell me what I am doing wrong:
module.exports = function(grunt) {
// Project configuration.
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
uglify: {
options: {
banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
},
build: {
src: 'src/<%= pkg.name %>.js',
dest: 'build/<%= pkg.name %>.min.js'
},
my_target: {
files: {
'js/min/main.min.js': ['js/main.js'],
'js/min/libs.min.js': ['bower_components/jquery/dist/jquery.min.js','bower_components/bootstrap/dist/js/bootstrap.min.js']
}
}
},
compass: {
dist: {
options: {
config: 'config.rb', // css_dir = 'dev/css'
sassDir: 'sass',
cssDir: 'css',
}
}
},
watch: {
all: {
files: '**/*',
options: {
livereload: true
},
}
},
connect: {
server: {
options: {
port: 8000,
hostname: 'localhost',
}
}
}
});
// Load the plugin that provides the "uglify" task.
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-compass');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-connect');
grunt.loadNpmTasks('grunt-serve');
// Default task(s).
grunt.registerTask('build', ['uglify','compass']);
grunt.registerTask('server', [
'uglify',
'compass',
'watch',
'connect'
]);
};

Related

Grunt watch livereload over MAMP Pro virtual host and ssl returns error net::ERR_CONNECTION_CLOSED

Gruntfile:
module.exports = function(grunt) {
// Project configuration.
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
sass: {
dist: {
files: {
'build/css/build.css' : 'sass/main.scss',
},
},
},
concat: {
options: {
separator: ';',
},
dist: {
src: ['js/jquery-getquerystring.min.js','node_modules/featherlight/release/featherlight.min.js', 'js/main.js'],
dest: 'build/js/build.js',
},
},
concat_css: {
all: {
src: ['node_modules/featherlight/release/featherlight.min.css', 'build/css/build.css'],
dest: 'build/css/build.css',
}
},
watch: {
sass: {
files: ['sass/**/*.scss'],
tasks: ['sass', 'concat_css'],
options: {
livereload : 35729,
}
},
js: {
files: ['js/**/*.js'],
tasks: ['concat'],
options: {
livereload : 35729,
}
},
php: {
files: ['**/*.php'],
options: {
livereload : 35729,
}
},
options: {
style: 'expanded',
compass: true,
livereload : {
port: '37925',
host: 'mysite.dev',
key: grunt.file.read('/absolute/path/to/mysite.key'),
cert: grunt.file.read('/absolute/path/to/mysite.crt'),
},
},
},
});
grunt.loadNpmTasks('grunt-contrib-sass');
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-concat-css');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.registerTask('default', ['sass', 'concat', 'concat_css', 'watch']);
};
Just before my closing body tag I have:
<script src="https://mysite.dev:35729/livereload.js"></script>
Going to https://mysite.dev works without any issues but looking at the Console tab in Chrome 58 I get the error: GET https://mysite.dev:35729/livereload.js net::ERR_CONNECTION_CLOSED. However if go to the url https://mysite.dev:35729/livereload.js I see the code for livereload.js
I use MAMP Pro 4.1.1 to manage my local Wordpress development if that helps. Any help appreciated. Please let me know if I need to provide any other information. Thanks.
After much trial and error I finally got it working:
module.exports = function(grunt) {
// Project configuration.
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
sass: {
dist: {
files: {
'build/css/build.css' : 'sass/main.scss',
},
},
},
concat: {
options: {
separator: ';',
},
dist: {
src: ['js/jquery-getquerystring.min.js','node_modules/featherlight/release/featherlight.min.js', 'js/main.js'],
dest: 'build/js/build.js',
},
},
concat_css: {
all: {
src: ['node_modules/featherlight/release/featherlight.min.css', 'build/css/build.css'],
dest: 'build/css/build.css',
}
},
watch: {
sass: {
files: ['sass/**/*.scss'],
tasks: ['sass', 'concat_css']
},
js: {
files: ['js/**/*.js'],
tasks: ['concat']
},
php: {
files: ['**/*.php']
},
options: {
style: 'expanded',
livereload : {
port: 1337,
host: 'mysite.dev',
key: grunt.file.read('/absolute/path/to/mysite.key'),
cert: grunt.file.read('/absolute/path/to/mysite.crt'),
},
},
},
});
grunt.loadNpmTasks('grunt-contrib-sass');
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-concat-css');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.registerTask('default', ['sass', 'concat', 'concat_css', 'watch']);
};
And just above the closing body tag:
<script src="//mysite.dev:1337/livereload.js"></script>

Grunt: convert sass to css after file changes (watch)

so this is my gruntfile.js:
module.exports = function(grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
folders: {
'dist': 'dist',
'app': 'app'
},
// configure jshint to validate js files -----------------------------------
jshint: {
options: {
reporter: require('jshint-stylish'),
ignores: [
'Grunfile.js',
'app/assets/lib/**/*'
]
},
all: [
'app/**/**/*.js',
]
},
// configure uglify to minify js files -------------------------------------
uglify: {
options: {
banner: '/*\n <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> \n*/\n'
},
build: {
files: {
'dist/js/app.min.js': 'app/js/main.js'
}
}
},
// compile sass stylesheets to css -----------------------------------------
sass: {
dist: {
options: {
style: 'expanded'
},
files: {
'app/assets/css/main.css': 'app/assets/sass/main.sass',
'app/assets/css/variables.css': 'app/assets/sass/variables.sass',
'app/assets/css/typography.css': 'app/assets/sass/typography.sass',
'app/assets/css/reset.css': 'app/assets/sass/reset.sass'
}
}
},
// starting an express server ----------------------------------------------
express: {
dev: {
options: {
port: 9000,
hostname: '0.0.0.0',
bases: ['app'],
livereload: true
}
}
},
// configure watch to auto update ------------------------------------------
watch: {
sass: {
files: ['**/*.{scss,sass}'],
tasks: ['sass'],
options: {
livereload: true
}
},
reload: {
options: {
livereload: true
},
files: ['app/**/*'],
},
}
});
grunt.loadNpmTasks('grunt-contrib-jshint');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-sass');
grunt.loadNpmTasks('grunt-contrib-cssmin');
grunt.loadNpmTasks('grunt-express');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.registerTask('default', ['jshint', 'uglify', 'sass', 'express', 'watch:reload']);
};
My problem:
When I start grunt, it checks for my sass files and automatically convert it to css files. Check. But if i start grunt and then edit a sass file, it recognizes the changes but dont convert the sass to css after it again.
Does anybody see the mistake?
Cheers!
Found the "problem": Had to register the task 'watch' instead of 'watch:reload'!
Cheers

grunt doesnot reload server on watch livereload

I have been trying to reload the server if the any of the file changes. I can watch the files which has been changed but it does not reload my server.
GruntFile.js
module.exports = function(grunt){
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
jshint: {
all:{
src:'**/*.js',
}
},
concat: {
options: {
banner: '(function() {',
footer: '})();'
},
releaseLocalHybrid: {
src: ['config/config.local.js','lib/fuse.js','src/model.js','src/templates/hybrid.js','src/controller/hybrid.js'],
dest: 'dist/widgets.js'
}
},
uglify: {
options: {
banner: '/*! <%= pkg.name %> <%= grunt.template.today("dd-mm-yyyy") %> */\n'
},
releaseLocalHybrid: {
files: {
'widgets.js': ['<%= concat.releaseLocalHybrid.dest %>']
}
}
},
connect:
{
server:
{
options:
{
hostname: 'localhost',
port: 8082,
base: {
path:'.',
options: {
index:'index.html',
maxAge: 300000
},
},
livereload: true
}
}
},
watch: {
options: {
livereload: true
},
concat: {
files: 'config/*.js',
tasks: 'jshint',
options:
{
spawn:false
},
},
}
});
grunt.loadNpmTasks('grunt-contrib-connect');
grunt.loadNpmTasks('grunt-contrib-jshint');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.registerTask('default', [ 'concat:releaseLocalHybrid','uglify:releaseLocalHybrid','connect', 'watch']);
grunt.registerTask('server', ['concat:releaseLocalHybrid','uglify:releaseLocalHybrid','connect','watch']);
};
Any suggestion or help will be grateful.
I was watching all the files in watch so jshint:all keeps watching and doesnot livereload but if i watch releaseLocalHybrid it worked. Thanks every one.
You need to specify a port for livereload. I have been using livereload options as :
watch: {
less: {
files : ['less/**/*.less']
},
css: {
files: ['css/*.css'],
options: {
livereload: {
port: 35750
}
}
}
}

Grunt concat not working during watch task

If I run 'grunt concat' it compiles my JS files as per the Grunt file (line 82). However, it doesn't concatenate when I'm doing 'grunt watch' (line 107).
From what I can see, my file is ok but I'm fairly new to grunt so would love to see if you guys can see an issue.
Here is my full Grunt file...
// All scripts to be included in project go here
var _SCRIPTS = [
'js/prefixfree.js',
'js/jquery-1-10-2.js',
'js/ie-detect.js',
'js/application.js'
];
var _PORT = 7777;
module.exports = function(grunt) {
// load all grunt tasks
require('matchdep').filterDev('grunt-*').forEach(grunt.loadNpmTasks);
// Project configuration.
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
connect: {
server: {
options: {
port: _PORT,
base: 'prototype'
}
}
},
htmlvalidation: {
options: {
},
files: {
src: ['prototype/*.php']
},
},
jshint: {
beforeconcat: _SCRIPTS,
afterconcat: ['js/main.js']
},
csslint: {
check: {
src: ['css/*.css']
},
strict: {
options: {
import: 2
},
src: ['css/*.css']
},
lax: {
options: {
import: false
},
src: ['css/*.css']
}
},
compass: {
dev: {
options: {
config: 'config.rb',
force: false
}
}
},
uglify: {
options: {
banner: '/*! <%= pkg.name %> <%= grunt.template.today("dd-mm-yyyy") %> */\n'
},
dist: {
files: {
'js/main.js': ['js/main.js']
}
}
},
concat: {
options: {
stripBanners: true,
banner: '/*! <%= pkg.name %> - v<%= pkg.version %> - ' +
'<%= grunt.template.today("yyyy-mm-dd") %> */',
},
dist: {
src: _SCRIPTS,
dest: 'js/main.js',
nonull: true
},
},
cssmin: {
add_banner: {
options: {
banner: '/* <%= pkg.name %> - v<%= pkg.version %> - ' +
'<%= grunt.template.today("yyyy-mm-dd") %> */',
},
files: {
'css/style.css': ['css/style.css']
}
}
},
watch: {
concat: {
files: ['js/**/*.js', '!js/main.js'],
tasks: 'concat',
options: {
spawn: false,
},
},
sass: {
files: ['sass/**/*.scss'],
tasks: ['compass:dev'],
options: {
spawn: false,
},
},
/* watch and see if our javascript files change, or new packages are installed */
/* watch our files for change, reload */
livereload: {
files: ['*.html', 'css/*.css', 'img/*', 'js/*.js'],
options: {
livereload: true
}
},
}
});
// Default task (Watch)
grunt.registerTask('default', ['watch']);
// grunt.registerTask('default', [ 'preprocess:dev', 'watch']);
// Watch with localhost (For Static Templates)
grunt.registerTask('watch_with_server', [ 'connect:server', 'watch']);
// TESTING
// Run all tests
grunt.registerTask('allTests', [ 'jshint:beforeconcat', 'concat', 'jshint:afterconcat', 'cssLint', 'htmlvalidation']);
// JS Testing
grunt.registerTask('jsHint', ['jshint:beforeconcat', 'concat', 'jshint:afterconcat']);
// CSS Testing csslint
grunt.registerTask('cssLint', ['csslint:check']);
grunt.registerTask('cssLintLax', ['csslint:lax']);
grunt.registerTask('cssLintStrict', ['csslint:strict']);
// HTML Vaidation
grunt.registerTask('htmlTest', [ 'htmlvalidation']);
grunt.registerTask('printenv', function () { console.log(process.env); });
// Concat and uglify js and minify css for release
grunt.registerTask('release', [ 'concat:dist', 'uglify', 'cssmin']);
};
Many thanks
I managed to get it working by moving 'livereload' above 'concat' in the watch task. No idea why this would make a difference but it's working!
If anyone has any insight on why this would affect it I'd love to know.
add this and see:
livereload: {
files: ['*.html', 'css/*.css', 'img/*', 'js/*.js'],
options: {
livereload: true
}
},
options: {
livereload: true
},
files: '<%= options.watch.files %>',//might have to change this line
tasks: ['default', 'notify:watch']

Grunt livereload not working

I'm quite new to grunt, and I'm trying to enable livereload.
The problem is that I can't seem to get it working.
Gruntfile.js:
module.exports = function(grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
uglify: {
options: {
banner: '/*! <%= pkg.name %> - v<%= pkg.version %> - ' +
'<%= grunt.template.today("yyyy-mm-dd") %> */'
},
my_target: {
files: {
'dest/complete.min.js': ['scripts/*.js']
}
}
},
jshint: {
files: ['gruntfile.js', 'srcipts/*.js'],
options: {
// options here to override JSHint defaults
globals: {
jQuery: true,
console: true,
module: true,
document: true
}
}
},
livereload : {
options : {
base : '/',
},
files : ['/**/*']
},
});
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-jshint');
grunt.loadNpmTasks('grunt-contrib-livereload');
grunt.registerTask('default', ['jshint', 'uglify','livereload']);
};
package.json:
{
"name": "my-app",
"version": "0.0.0",
"devDependencies": {
"grunt": "~0.4.1",
"grunt-contrib-uglify": "~0.2.0",
"grunt-contrib-jshint": "~0.6.0",
"grunt-contrib-livereload": "0.1.2",
"matchdep": "~0.1.2"
}
}
I don't get any errors,
I've tried: "grunt" and "grunt livereaload-start".
When going to my website via localhost - it won't connect.
And viewing the website via the file:// protocol will not reload when changes are made to css files.
Thanks in advance.
Live reloading has been moved to the watch task. Please see: https://github.com/gruntjs/grunt-contrib-watch#live-reloading
grunt.initConfig({
watch: {
livereload: {
options: { livereload: true },
files: ['dist/**/*'],
},
},
});

Resources