I am trying to get my index.html at the root of my app (app/index.html) running with grunt from I file I inherited.
My grunt file is as follows:
module.exports = function(grunt) {
// 1. All configuration goes here
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
sass_directory_import: {
your_target: {
files: {
src: ['css/sass/parts/_all.scss']
},
},
},
connect: {
server: {
options: {
port: 9000,
hostname: 'localhost',
base: ['./'],
keepalive: true,
open: {
target: 'http://localhost:9000'
}
}
}
},
sass: {
dist: {
options: {
loadPath: require('node-bourbon').includePaths,
sourceMap: true
},
files: {
'css/style.css' : 'css/sass/style.scss',
'css/style-ie.css' : 'css/sass/style-ie.scss'
}
},
},
watch: {
sass: {
files: 'css/sass/**/*.scss',
tasks: ['sass_directory_import','sass']
}
}
});
// 3. Where we tell Grunt we plan to use this plug-in.
grunt.loadNpmTasks('grunt-sass');
grunt.loadNpmTasks('grunt-contrib-cssmin');
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-sass-directory-import');
grunt.loadNpmTasks('grunt-contrib-connect');
// 4. Where we tell Grunt what to do when we type "grunt" into the terminal.
grunt.registerTask('default',['watch', 'connect:server']);
grunt.registerTask('build',['sass', 'uglify']);
};
I want index to appear under the port: http://localhost:9000 but when I run the default watch task, only get the sass files being watched for changes and nothing else. How do I get grunt to run the file under the given port? I have only used Gulp before and am not finding grunt very easy to work with. Is there a grunt server/connect task that does not have to be installed?
Related
For some reason running grunt from the terminal doesn't work. When I run grunt dev and open http://localhost:8000/ it works, but when I just use grunt it says This site can’t be reached. localhost refused to connect.
Any ideas what I am missing?
'use strict';
var path = require('path');
var lrSnippet = require('grunt-contrib-livereload/lib/utils').livereloadSnippet;
var folderMount = function folderMount(connect, point) {
return connect.static(path.resolve(point));
};
module.exports = function (grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
clean: {
build: {
src: [".sass-cache"]
}
}, // end clean
sass: {
dist: {
options: {
style: 'expanded',
noCache: true
},
files: {
'app/production/css/style.css': 'app/scss/style.scss'
}
}
}, // end sass
cssmin: {
target: {
files: [{
expand: true,
cwd: 'app/production/css',
src: ['*.css', '!*.min.css'],
dest: 'app/production/css',
ext: '.min.css'
}]
}
}, //end cssmin
connect: {
server: {
options: {
port: 8000
}
}
}, // end connect
uglify: {
options: {
mangle: false
},
my_target: {
files: {
'app/production/js/app.min.js': ['app/js/module.js', 'app/js/config.js', 'app/js/factory.js', 'app/js/filter.js', 'app/js/PotatoAppController.js']
}
}
}, // end js minify
watch: { // this is a watcher, to run this in terminal write: grunt watch
options: {
dateFormat: function(time) {
grunt.log.writeln('The watch finished in ' + time + 'ms at' + (new Date()).toString());
grunt.log.writeln('Waiting for new changes ...');
},
livereload: true
},
css: {
files: 'app/scss/style.scss',
tasks: ['sass', 'cssmin']
},
jsmin: {
files: 'app/js/*.js',
tasks: ['uglify']
},
html: {
files: ['app/views/**/*.html'],
options: {
livereload: true
}
}
} // end watch
});
grunt.loadNpmTasks('grunt-contrib-watch'); // Load the plugin that provides the "watch" task.
grunt.loadNpmTasks('grunt-contrib-cssmin'); // Load the plugin that provides the "cssmin" task.
grunt.loadNpmTasks('grunt-contrib-sass'); // Load the plugin that provides the "sass" task.
grunt.loadNpmTasks('grunt-contrib-uglify'); // Load the plugin that provides the "uglify" task.
grunt.loadNpmTasks('grunt-contrib-livereload'); // Load the plugin that provides the "livereload" task.
grunt.loadNpmTasks('grunt-contrib-connect'); // Load the plugin that provides the "connect" task.
grunt.loadNpmTasks('grunt-contrib-clean'); // Load the plugin that provides the "clean" task.
grunt.registerTask('default', ['watch']); // this is the default command, use in terminal 'grunt'
grunt.registerTask('dev', ['connect', 'sass', 'cssmin', 'uglify', 'clean', 'watch']); // use 'grunt dev' for development
};
Once you execute 'grunt', 'default' command will be executed.
In your case, only 'watch' task is executed.
grunt.registerTask('default', ['watch']);
If you want to reach 'localhost', you need to run 'connect' module.
'watch' task is just watching file changes. not launch web-server.
'connect' is for launching web-server.
Thanks.
I can't get Grunt's browser sync to update my changes. I have not use Grunt much so I am a bit new to this. Maybe some of you know what could be wrong?
I am using XAMPP and runs a wordpress site at:
http://localhost:10080/wp_demo2/
(I use port 10080 to avoid conflict with Skype)
Here is my gruntfile.js (updated)
var root = './htdocs/wp_demo2/wp-content/themes/isak/';
module.exports = function (grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
sass: {
options: {
style: 'expanded',
precision: 5
},
all: {
files: {
'css/output.css': 'scss/input.scss'
}
}
},
watch: {
files: 'scss/**/*.scss',
tasks: ['sass']
},
browserSync: {
dev: {
bsFiles:
{
src: [root+'css/output.css', root + '**/*.php']
},
options: {
watchTask: true,
proxy: "localhost:10080/wp_demo2"
}
}
}
});
grunt.loadNpmTasks('grunt-contrib-sass');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-browser-sync');
grunt.registerTask('default', ['browserSync', 'watch']);
};
files inside Browsersync's options is a local path, not a URL. I would set port in the path and move the routes to the files outside options.
// ...
browserSync: {
dev: {
bsFiles: {
src: ['css/output.css', '**/*.php']
},
options: {
watchTask: true,
proxy: 'localhost:10080/wp_demo2'
}
}
}
// ...
grunt.registerTask('dev', ['sass', 'browserSync', 'watch']);
Browsersync should update when output.css is modified.
Your Gruntfile.js should be located in . path.
**/* means "search in all folders".
I am working on a site that uses SCSS. We have grunt watching those files to convert them to css but each time we make a change we have to tab over to the css file and upload. Maybe not a big deal but over time on different projects it adds up.
I would like the watch process to run ftpush once it see's a change but the only times I've got it to work it stays on ftpush which means we have to exit grunt then run it again. It would be helpful if after the upload os complete(or a specific time passes) it resumes the watch task.
module.exports = function (grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
sass: {
options: {
loadPath: ['bower_components/foundation/scss'],
sourceMap: true
},
dist: {
options: {
style: 'expanded'
},
files: {
'assets/css/app.css': 'assets/scss/app.scss'
}
}
},
ftpush: {
build: {
auth: {
host: 'OUR HOST',
port: 21,
authKey: 'key1'
},
src: '../vhc-master',
dest: '/var/www/html/vhc/dev/wp-content-themes/vhc-master'
}
},
watch: {
scripts: {
files: ['Gruntfile.js'],
tasks: ['ftpush'],
options: {
interrupt: true,
reload: true
}
},
sass: {
files: 'assets/scss/*.scss',
tasks: ['sass']
}
}
});
grunt.loadNpmTasks('grunt-sass');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-ftpush');
grunt.registerTask('build', ['sass']);
grunt.registerTask('deploy', ['ftpush']);
grunt.registerTask('default', ['build','watch']);
}
I'm trying to get grunt-browser-sync to inject any css changes into an open browser when a file is updated/changed. But for some reason, I can seem to get it to work and grunt is not giving me any errors to let me know it's not working.
I'm currently using MAMP since it's a Wordpress based project.
Here's my Gruntfile.js:
module.exports = function(grunt) {
// Project configuration.
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
uglify: {
build: {
src: '_/js/libs/*.js', //input
dest: '_/js/functions.min.js' //output
}
},
sass: {
dist: {
options: {
loadPath: require('node-bourbon').includePaths,
loadPath: require('node-neat').includePaths,
style: 'compressed'
},
files: {
'style.css': 'scss/style.scss'
}
}
},
autoprefixer: {
dist: {
files: {
'style.css': 'style.css'
}
}
},
browserSync: {
dev: {
bsFiles: {
src : 'style.css'
},
options: {
watchTask: true
}
}
},
watch: {
options: {
livereload: true
},
js: {
files: ["_/js/libs/*.js"],
tasks: ["ugilify"],
},
sass: {
files: ["scss/*.scss"],
tasks: ["sass", "autoprefixer", "browserSync"],
},
php: {
files: ['*.php']
},
}
});
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-sass');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-autoprefixer');
grunt.loadNpmTasks('grunt-browser-sync');
// Default task(s).
grunt.registerTask('default', ['uglify', 'sass', 'browserSync', 'watch', 'autoprefixer']);
};
and here's the output when I save/update a file:
Running "watch" task
Waiting...
>> File "scss/global.scss" changed.
Running "sass:dist" (sass) task
File style.css created.
Running "autoprefixer:dist" (autoprefixer) task
File style.css created.
Running "browserSync:dev" (browserSync) task
Done, without errors.
Completed in 1.478s at Wed May 07 2014 18:47:40 GMT-0500 (CDT) - Waiting...
But then I have to physically refresh the browser to see the changes.
I'm not sure if I am missing something within the grunt file or what.
The only version of grunt-browser-sync that works for me with this code is 1.9.1. So, un-install your current version and
npm install grunt-browser-sync#1.9.1 --save-dev
I encountered the same issue and have opened an issue here
Github grunt-browser-sync repo with issues 58
I am trying to set up a workflow using grunt, to help with development of my jekyll site.
Found this great TUT which basically goes through how to install it in your workflow.
However, I get these errors when I run the 'grunt' command.
**[BS] Warning: Multiple External IP addresses found**
**[BS] If you have problems, you may need to manually set the 'host' option**
**[BS] Server running. Use this URL: http://192.168.1.5:3005**
[BS] Serving files from: /Users/antonioortiz/Sites/newaortiz/_site
**[BS] Not watching any files...**
[BS] Browser Connected! (Chrome, version: 33.0.1750.146)
Obviously the ones I bolded are most glaring, as NO css is being generated in my 'assets/css
Below is my Gruntfile. Thank you in advance.
module.exports = function(grunt) {
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-jekyll');
grunt.loadNpmTasks('grunt-contrib-compass');
grunt.loadNpmTasks('grunt-contrib-sass');
grunt.loadNpmTasks('grunt-browser-sync');
// All configuration goes here
grunt.initConfig({
jekyll: {
build: {
dest: '_site'
}
},
sass: {
dist: {
files: {
'assets/css/*.css': 'assets/sass/*.scss'
}
}
},
compass: {
dev: {
options: {
config: 'config.rb'
} //options
} // dist
}, //compass
watch: {
sass: {
files: 'assets/**/*.scss',
tasks: ['sass']
},
jekyll: {
files: ['_layouts/*.html', '_includes/*.md', 'assets/css/*.css'],
tasks: ['jekyll']
}
},
compass: {
files: ['assets/sass/*.scss'],
tasks: ['compass:dev']
}, // sass
browser_sync: {
files: {
src: ['_site/assets/css/*.css']
},
options: {
watchTask: true,
ghostMode: {
clicks: true,
scroll: true,
links: true,
forms: true
},
server: {
baseDir: '_site'
}
}
}
});
// Custom tasks
grunt.registerTask('build', ['sass', 'jekyll']);
grunt.registerTask('default', ['build', 'browser_sync', 'watch']);
};