I am new to Grunt and am having trouble with the watch feature. I only have a couple tasks, both of which work fine when I put them into the CLI directly. Watch, however, doesn't. Any issues with this Gruntfile?
module.exports = function(grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
watch: {
files: '<%= uglify.build.src %>',
tasks: 'uglify',
},
uglify: {
build: {
src: ['wp-content/themes/custom/js/live/*.js', 'wp-content/themes/custom/js/waypoints/*.js', 'wp-content/themes/custom/js/*.js'],
dest: 'wp-content/themes/custom/js/test.js'
}
},
jshint: {
src: ['Gruntfile.js', 'wp-content/themes/custom/js/*.js'],
options: {
curly: true,
eqeqeq: true,
immed: true,
latedef: true,
newcap: true,
noarg: true,
sub: true,
undef: true,
boss: true,
eqnull: true,
browser: true,
globals: {
require: true,
define: true,
requirejs: true,
describe: true,
expect: true,
it: true
}
}
}
});
// Load tasks
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-jshint');
grunt.loadNpmTasks('grunt-contrib-watch');
// Default task
grunt.registerTask('default', 'uglify');
};
I am seeing you didnt register any watch task.
Just put your default task to watch, or create a specific task when you want to watch.
grunt.registerTask("default", ["express","watch"]);
for example, or
grunt.registerTask("watchmeTaskName", "watch");
Related
I've been spending the latter part of my day learning about how to create my own gruntfile and add the various tasks I want to it. All has gone well so far but I'm trying to add the live reload feature in grunt-contrib-watch and running into some problems.
My localhost is listening to port 9080 so after reading through the documentation https://github.com/gruntjs/grunt-contrib-watch#optionslivereload
I figured this would make sense?
module.exports = function(grunt) {
require('jit-grunt')(grunt);
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
concat: {
options: {
separator: ';'
},
dist: {
src: ['*.js', 'scripts/**/*.js'],
dest: 'dist/<%= pkg.name %>.js'
}
},
uglify: {
options: {
banner: '/*! <%= pkg.name %> <%= grunt.template.today("dd-mm-yyyy") %> */\n'
},
dist: {
files: {
'dist/<%= pkg.name %>.min.js': ['<%= concat.dist.dest %>']
}
}
},
jshint: {
files: ['gruntfile.js', '*.js', 'scripts/**/*.js'],
options: {
// options here to override JSHint defaults
globals: {
jQuery: true,
console: true,
module: true,
document: true
}
}
},
less: {
development: {
options: {
compress: true,
yuicompress: true,
optimization: 2
},
files: {
"css/main.css": "less/*.less" // destination file and source file
}
}
},
watch: {
files: ['<%= jshint.files %>', 'less/**/*.less', '*.html', 'templates/**/*.html', 'data/**/*.json'],
tasks: ['jshint', 'less'],
options: {
livereload: {
host: 'localhost',
port: 9080
}
}
},
});
grunt.registerTask('default', ['jshint', 'concat', 'uglify', 'less', 'watch']);
};
I'm getting this error every time I try to save
Reloading watch config...
Running "watch" task
Waiting...
Fatal error: listen EACCES 127.0.0.1:9080
Can anyone shed any light on this?
Thanks
The error was being caused by WAMPServer, I didn't realise that watch creates it's own localhost.
Now I've just got to try and figure out how to get my site to appear on screen.
At the moment all that's being displayed is
{"tinylr":"Welcome","version":"0.2.1"}
I have a grunt project and I am using sass and jade together. I want to have a task for sass when developing where the style would be expanded for troubleshooting and a task for when I 'finish' the project and then the style would be compressed. I am new to grunt and don't know how to do it.
My gruntfile
module.exports = function(grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
jade: {
compile: {
options: {
pretty: true,
nospawn: false
},
files: {
'index.html' : 'src/index.jade'
}
}
},
sass: {
dist: {
options: {
style: 'expanded',
nospawn: false
},
files: {
'build/css/app.css' : 'src/sass/app.sass'
}
}
},
watch: {
jade: {
files: 'src/**/*.jade',
tasks: ['jade']
},
css: {
files: 'src/sass/**/*.sass',
tasks: ['sass']
},
options: {
livereload: true,
nospawn: false
}
},
connect: {
server: {
options: {
port: 9000,
base: '.',
hostname: '0.0.0.0',
protocol: 'http',
livereload: true,
open: true
}
}
}
});
grunt.loadNpmTasks('grunt-contrib-jade');
grunt.loadNpmTasks('grunt-contrib-sass');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-connect');
grunt.registerTask('default', ['connect', 'watch']);
};
To get compressed css instead of expanded, you would first need to make another sass-task (so within sass:{}), call it finish: for instance and change the compression setting.
It should look something like this:
finish: {
options: {
style: 'compressed',
nospawn: false
},
files: {
'build/css/app.css' : 'src/sass/app.sass'
}
}
Then after grunt.registerTask('default', ['connect', 'watch']);
you can add another task, ie finish that should like:
grunt.registerTask('finish', ['sass:finish']);
To run it you would type grunt finish on the command line.
Looks like it's not re-copying my files when I click save anywhere on my development files (so I want to re-copy onto the Production folder immediately). Here is the part from my Gruntfile.js.
Location of this file: /development/Gruntfile.js
Where I want to copy some files: /production
[...]
copy: {
watch: {
options: {
livereload: true
},
files: [
{expand: true, src: ['css/*'], dest: '../production/', filter: 'isFile'},
{expand: true, src: ['js/*'], dest: '../production/', filter: 'isFile'},
{expand: true, src: ['js/vendor/*'], dest: '../production/', filter: 'isFile'},
{expand: true, src: ['images/**'], dest: '../production/'},
{expand: true, src: ['public/**'], dest: '../production/'},
{expand: true, src: ['.htaccess', '404.html', 'apple-touch-icon-precomposed.png', 'crossdomain.xml', 'favicon.ico', 'humans.txt', 'index.html', 'index.php', 'LICENSE.md', 'README.md', 'robots.txt'], dest: '../production/'}
]
}
},
php: {
watch: {
options: {
livereload: true,
bin: 'C:/php/php.exe',
ini: 'C:/php/php.ini',
base: '../production',
port: 8000
}
}
},
watch: {
options: {
livereload: true
},
site: {
files: ['*.html', '*.php', 'public/*.html', 'public/*.php'],
tasks: ['php'],
options: {
spawn: false
}
}
}
[...]
grunt.loadNpmTasks('grunt-contrib-copy');
grunt.loadNpmTasks('grunt-php');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.registerTask('default', ['uglify', 'replace', 'stylus', 'cssmin', 'copy:watch', 'php:watch', 'watch']);
I always need to restart the script, to re-send the files into "production" folder.
Thank You for your help!
UPDATE
I made an alter solution: everything happening in development folder, and if I want I can push to the production folder with command line. This way I see the final product in local PHP webserver in the development folder, not production.
grunt.registerTask('default', ['uglify', 'replace', 'stylus', 'cssmin', 'php:watch', 'watch']);
grunt.registerTask('copytoproduction', ['copy']);
PC Specs:
Windows 7 Enterprise x64
I'm running grunt.js on a project and recently started receiving an error when attempting to run 'grunt watch'.
Grunt worked fine yesterday but today I started seeing:
Running "watch" task
Waiting...Fatal error: listen EACCES
I read another question here: Cloud 9 and Grunt.js
that lead me to remove 'options: {livereload: true}' from Gruntfile.js
running watch again works as intended. Is there a way to reconfigure grunt or livereload to get livereload working with Grunt again?
Also, just running the command 'grunt' runs all of the tasks without errors.
Thanks.
Edit: Gruntfile.js follows:
module.exports = function(grunt) {
grunt.initConfig({
jshint: {
all: ['js/src/*.js']
},
uglify: {
options: {
mangle: {
except: ['jQuery']
},
preserveComments: 'none'
},
'js/main.min.js': ['js/tmp/debug.js']
},
compass: {
options: {
config: '.compass.rb',
sassDir: 'sass',
cssDir: '.'
},
my_target: {
}
},
cmq: {
my_target: {
files: { 'tmp': ['style.css'] }
}
},
cssmin: {
minify: {
keepSpecialComments: 0,
expand: true,
cwd: 'tmp/',
src: ['style.css'],
dest: '.',
ext: '.css'
}
},
imagemin: {
png: {
options: {
optimizationLevel: 7
},
files: [{
expand: true,
cwd: 'img',
src: ['**/*.png'],
dest: 'img',
ext: '.min.png'
}]
},
jpg: {
options: {
progressive: true
},
files: [{
expand: true,
cwd: 'img',
src: ['**/*.jpg'],
dest: 'img',
ext: '.min.jpg'
}]
},
gif: {
options: {
progressive: true
},
files: [{
expand: true,
cwd: 'img',
src: ['**/*.gif'],
dest: 'img',
ext: '.min.gif'
}]
}
},
clean: ["tmp"],
watch: {
scripts: {
files: 'js/src/*.js',
tasks: ['jshint', 'concat', 'uglify', 'clean'],
options: { livereload: true }
},
css: {
files: 'sass/*.scss',
tasks: ['compass', 'cmq', 'cssmin', 'clean'],
options: { livereload: true }
}
},
concat: {
debug: {
src: ['js/src/**/*.js'],
dest: 'js/tmp/debug.js'
}
},
});
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-jshint');
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-compass');
grunt.loadNpmTasks('grunt-combine-media-queries');
grunt.loadNpmTasks('grunt-contrib-cssmin');
grunt.loadNpmTasks('grunt-contrib-clean');
grunt.loadNpmTasks('grunt-contrib-imagemin');
grunt.registerTask('default', ['jshint', 'concat', 'uglify', 'compass', 'cmq', 'cssmin', 'clean']);
}
It appears you have 2 live reload servers configured to spawn on the same default port. Instead of specifying livereload: true twice in your watch config, just configure it once:
watch: {
options: { livereload: true },
scripts: {
files: 'js/src/*.js',
tasks: ['jshint', 'concat', 'uglify', 'clean'],
},
css: {
files: 'sass/*.scss',
tasks: ['compass', 'cmq', 'cssmin', 'clean'],
},
},
Then it will only spawn 1 live reload server.
Another option is to create a watch target specifically for live reload and watch your destination files:
watch: {
scripts: {
files: 'js/src/*.js',
tasks: ['jshint', 'concat', 'uglify', 'clean'],
},
css: {
files: 'sass/*.scss',
tasks: ['compass', 'cmq', 'cssmin', 'clean'],
},
lr: {
options: { livereload: true },
files: ['js/*.js', 'css/*.css'],
},
},
In my never ending brilliance, I had fireapp running on a separate project. fireapp has the option to enable livereload.
Inititally when I asked the question it was because I had two calls within Gruntfile.js as Kyle correctly surmised. This solution didn't work for me because I still had two separate versions of livereload running with fireapp watching a separate project.
Kyle's second option did the trick.
Thanks!
You don't have permission to make some changes .
Go to project folder.
Open terminal in project folder & execute following command .
sudo chmod -R a+rwx ./
I just started using Grunt and I already may have a problem. So, here is what my Gruntfile.js looks like :
module.exports = function (grunt) {
grunt.initConfig({
// Ability to access the package.json informations
pkg: grunt.file.readJSON('package.json'),
// SASS compilation
sass: {
dist: {
options: {
style: 'compressed'
},
expand: true,
cwd: './sass/',
src: 'main.scss',
dest: './css/',
ext: '.css'
},
dev: {
options: {
style: 'expanded',
debugInfo: true,
lineNumbers: true
},
expand: true,
cwd: './sass/',
src: 'main.scss',
dest: './css/',
ext: '.css'
}
}
});
};
And when I run grunt sass:dev, it always returns me Warning: Task "sass:dev" not found. Use --force to continue.
As I'm starting with it, I took a look at the doc and can't find where I may have gone wrong... And yes, dependencies are correctly installed.
You need to make sure the task is registered, after the initConfig section.
module.exports = function (grunt) {
grunt.initConfig({
// ...
});
grunt.loadNpmTasks('grunt-contrib-sass');
};