I'm attempting to seperate my grunt file so I can process two separate chunks of code, everything seems to work apart from the watch task.
I get the following error which loops out until it exceeds the call stack
Waiting...Verifying property watch.app.files exists in config...ERROR
>> Unable to process task.
Warning: Required config property "watch.app.files" missing.
It seems it doesn't like my watch task being split into two. I've look around and it doesn't seem to be an issue for other people.
My gruntfile looks like this:
module.exports = function(grunt) {
// 1. All configuration goes here
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
concat: {
app: {
src: [
'themes/site_themes/app/scripts/build/libs/!(html5shiv|respond).js',
'themes/site_themes/app/scripts/build/modules/*.js'
],
dest: 'themes/site_themes/app/scripts/production/app.min.js'
},
marketing: {
src: [
'themes/site_themes/marketing/scripts/build/libs/!(html5shiv|respond).js',
'themes/site_themes/marketing/scripts/build/modules/*.js'
],
dest: 'themes/site_themes/marketing/scripts/production/app.min.js'
}
},
uglify: {
app: {
files: {
'themes/site_themes/app/scripts/production/app.min.js': ['themes/site_themes/app/scripts/production/app.min.js'],
'themes/site_themes/app/scripts/production/html5shiv.min.js': ['themes/site_themes/app/scripts/build/libs/html5shiv.js'],
'themes/site_themes/app/scripts/production/respond.min.js': ['themes/site_themes/app/scripts/build/libs/respond.js'],
}
},
marketing: {
files: {
'themes/site_themes/marketing/scripts/production/app.min.js': ['themes/site_themes/marketing/scripts/production/app.min.js'],
'themes/site_themes/marketing/scripts/production/html5shiv.min.js': ['themes/site_themes/marketing/scripts/build/libs/html5shiv.js'],
'themes/site_themes/marketing/scripts/production/respond.min.js': ['themes/site_themes/marketing/scripts/build/libs/respond.js'],
}
}
},
jshint: {
app: {
all: ['themes/site_themes/app/scripts/build/modules/!(analytics).js', 'themes/site_themes/app/scripts/build/app.js'],
},
marketing: {
all: ['themes/site_themes/marketing/scripts/build/modules/!(analytics).js', 'themes/site_themes/marketing/scripts/build/app.js'],
}
},
sass: {
app: {
options: {
style: 'compressed'
},
files: {
'themes/site_themes/app/styles/production/style.min.css':'themes/site_themes/app/styles/build/style.scss'
}
},
marketing: {
options: {
style: 'compressed'
},
files: {
'themes/site_themes/marketing/styles/production/style.min.css':'themes/site_themes/marketing/styles/build/style.scss'
}
}
},
autoprefixer: {
options: {
browsers: ['last 2 versions', 'ie >= 8']
},
app: {
no_dest: {
src: 'themes/site_themes/app/styles/production/style.min.css',
}
},
marketing: {
no_dest: {
src: 'themes/site_themes/marketing/styles/production/style.min.css',
}
}
},
watch: {
app: {
jshint: {
files: ['themes/site_themes/app/scripts/build/modules/!(analytics).js', 'themes/site_themes/app/scripts/build/app.js'],
tasks: 'jshint:app'
},
scripts: {
files: ['themes/site_themes/app/scripts/build/*/*.js'],
tasks: ['concat:app', 'uglify:app'],
options: {
spawn: false,
},
},
css: {
files: ['themes/site_themes/app/styles/build/*.scss', 'themes/site_themes/app/styles/build/inuit/*/*.scss', 'themes/site_themes/app/styles/build/theme/*/*.scss'],
tasks: ['sass:app', 'autoprefixer:app'],
options: {
livereload: true,
spawn: false,
}
}
},
marketing: {
jshint: {
files: ['themes/site_themes/marketing/scripts/build/modules/!(analytics).js', 'themes/site_themes/marketing/scripts/build/app.js'],
tasks: 'jshint:marketing'
},
scripts: {
files: ['themes/site_themes/marketing/scripts/build/*/*.js'],
tasks: ['concat:marketing', 'uglify:marketing'],
options: {
spawn: false,
},
},
css: {
files: ['themes/site_themes/marketing/styles/build/*.scss', 'themes/site_themes/marketing/styles/build/inuit/*/*.scss', 'themes/site_themes/marketing/styles/build/theme/*/*.scss'],
tasks: ['sass:marketing', 'autoprefixer:marketing'],
options: {
livereload: true,
spawn: false,
}
}
}
}
});
// 3. Where we tell Grunt we plan to use this plug-in.
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-sass');
grunt.loadNpmTasks('grunt-autoprefixer');
grunt.loadNpmTasks('grunt-contrib-jshint');
grunt.loadNpmTasks('grunt-contrib-watch');
// 4. Where we tell Grunt what to do when we type "grunt" into the terminal.
grunt.registerTask('default', ['concat:app', 'uglify:app', 'jshint:app', 'sass:app', 'autoprefixer:app', 'watch:app']);
grunt.registerTask('marketing', ['concat:marketing', 'uglify:marketing', 'jshint:marketing', 'sass:marketing', 'autoprefixer:marketing', 'watch:marketing']);
};
Just found this. Looks like nested targets aren't supported by watch.
I'll try find another way to to this and post if I do.
Related
i'm new to grunt so i'm guessing i'm doing something simple really wrong. I'm using angular-client-side-auth for my single page app and i wanted to add grunt-contrib-sass and grunt-contrib-watch into Gruntfile.js. Here's the problem, when i start the server using nodemon, the watch never run. I tried concurrent, but no luck.
Here's my Gruntfile.js:
module.exports = function(grunt) {
// Load tasks
grunt.loadNpmTasks('grunt-concurrent');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-sass');
grunt.loadNpmTasks('grunt-contrib-cssmin');
grunt.loadNpmTasks('grunt-mocha-test');
grunt.loadNpmTasks('grunt-env');
grunt.loadNpmTasks('grunt-nodemon');
grunt.loadNpmTasks('grunt-contrib-clean');
//require('load-grunt-tasks')(grunt); // npm install --save-dev load-grunt-tasks
grunt.initConfig({
mochaTest: {
test: {
options: {
reporter: 'spec'
},
src: ['server/tests/**/*.js']
}
},
env : {
options : {
//Shared Options Hash
},
dev : {
NODE_ENV : 'development'
},
test : {
NODE_ENV : 'test'
}
},
nodemon: {
dev: {
script: 'server.js',
}
},
watch: {
//options: { nospawn: true, livereload: true },
sass: {
files: ["client/css/styles.sass"],
tasks: ['sass'],
},
cssmin: {
files: ["client/css/styles.sass"],
tasks: ['cssmin'],
}
},
sass: {
dist: {
files: {
'client/css/styles.css': 'client/css/styles.scss'
}
}
},
cssmin: {
options: {
shorthandCompacting: false,
roundingPrecision: -1
},
target: {
files: [{
expand: true,
cwd: 'client/css',
src: ['styles.css', '!*.min.css'],
dest: 'client/css',
ext: '.min.css'
}]
}
},
concurrent: {
dev: {
options: {
logConcurrentOutput: true
},
tasks: ['watch', 'nodemon:dev']
}
},
clean: ["node_modules", "client/components"]
});
grunt.registerTask('serverTests', ['env:test', 'mochaTest']);
grunt.registerTask('test', ['env:test', 'serverTests']);
grunt.registerTask('dev', ['env:dev', 'concurrent:dev']);
};
I'm using the excellent FoundationPress and want to add a task to my watch to create a single .css file out of a single .scss file. In my case, this is for CKEditor - because it needs a separate .css file for custom formatting the input area.
However, I get this output whenever I edit my .scss file:
>> File "ckeditor/nb-ckeditor.scss" changed.
Warning: Task "sassckeditor" not found. Use --force to continue.
Aborted due to warnings.
Here's my the content of Gruntfile.js (see ADD 1 and ADD 2 for what I added to the original content):
module.exports = function(grunt) {
require('time-grunt')(grunt);
grunt.initConfig(
{
pkg: grunt.file.readJSON('package.json'),
sass: {
options: {
sourceMap: true
},
dist: {
options: {
outputStyle: 'compressed'
},
files: {
'css/foundation.css': 'scss/foundation.scss'
}
}
},
/* ADD 1 BEGIN */
sassckeditor: {
options: {
sourceMap: true
},
dist: {
options: {
outputStyle: 'compressed'
},
files: {
'ckeditor/nb-ckeditor-fromsass.css': 'ckeditor/nb-ckeditor.scss'
}
}
},
/* ADD 1 END */
copy: {
scripts: {
expand: true,
cwd: 'bower_components/foundation/js/vendor/',
src: '**',
flatten: 'true',
dest: 'js/vendor/'
},
iconfonts: {
expand: true,
cwd: 'bower_components/fontawesome/',
src: ['**', '!**/less/**', '!**/css/**', '!bower.json'],
dest: 'assets/fontawesome/'
},
},
'string-replace': {
fontawesome: {
files: {
'assets/fontawesome/scss/_variables.scss': 'assets/fontawesome/scss/_variables.scss'
},
options: {
replacements: [
{
pattern: '../fonts',
replacement: '../assets/fontawesome/fonts'
}
]
}
},
},
concat: {
options: {
separator: ';',
},
dist: {
src: [
'bower_components/foundation/js/foundation/foundation.js',
'js/custom/*.js'
],
dest: 'js/foundation.js',
},
},
uglify: {
dist: {
files: {
'js/foundation.js': ['js/foundation.js']
},
options: {
preserveComments: false
}
}
},
watch: {
grunt: { files: ['Gruntfile.js'] },
sass: {
files: 'scss/**/*.scss',
tasks: ['sass'],
options: {
livereload:true,
}
},
/* ADD 2 BEGIN */
sassckeditor: {
files: 'ckeditor/*.scss',
tasks: ['sassckeditor'],
options: {
livereload:true,
}
},
/* ADD 2 END */
js: {
files: 'js/custom/**/*.js',
tasks: ['concat', 'uglify'],
options: {
livereload:true,
}
},
all: {
files: '**/*.php',
options: {
livereload:true,
}
}
}
});
grunt.loadNpmTasks('grunt-sass');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-contrib-copy');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-string-replace');
grunt.registerTask('build', ['copy', 'string-replace:fontawesome', 'sass', 'concat', 'uglify']);
grunt.registerTask('default', ['watch', 'sassckeditor']);
};
What am I doing wrong? Thanks in advance!
From reading your code it looks like the error is coming from trying to run a task by the name of 'sassckeditor' rather than sending the .scss through the 'sass' task. Here's an example of what your code should look like:
/* ADD 2 BEGIN */
sassckeditor: {
files: 'ckeditor/*.scss',
tasks: ['sass'],
options: {
livereload:true,
}
},
/* ADD 2 END */
This will keep your .scss file for the CKEditor separate from the rest of your Sass files, but will still run it thorough the proper 'sass' task that actually compiles the .scss files.
Okay, got this working by simply adding an entry for "files" in my "dist" task:
sass: {
options: {
sourceMap: true
},
dist: {
options: {
outputStyle: 'compressed'
},
files: {
'css/foundation.css': 'scss/foundation.scss',
'css/nb-ckeditor.css': 'scss/nb-ckeditor.scss' // <-- THIS
}
}
},
Grunt says waiting... but doesn't make changes to sass while watching. I have to run grunt on the command line every time I want it to run and change things. The thing I need it to update the most is the sass to css. But it's not working. Please help.
module.exports = function (grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
// package options
express: {
server: {
options: {
port: 3000,
hostname: 'localhost',
bases: 'public' // the 'public' folder for your project
}
}
},
jshint: {
options: {
jshintrc: '.jshintrc' // jshint config file
},
all: [
'Gruntfile.js',
'js/*.js'
]
},
concat: {
basic: {
src: [
'bower_components/jquery/dist/jquery.js',
'bower_components/foundation/js/foundation/foundation.js',
'dev/js/jquery.royalslider.custom.min.js',
'dev/js/royalslider.js',
'dev/js/megamenu_plugins.js',
'dev/js/megamenu.min.js',
'dev/js/megamenu.js',
'dev/js/app.js'
],
dest: 'dev/tmp/app.js'
},
extras: {
src: [
'bower_components/modernizr/modernizr.js'
],
dest: 'dev/tmp/modernizr.js'
}
},
sass: {
options: {
includePaths: ['bower_components/foundation/scss']
},
dist: {
options: {
outputStyle: 'compressed'
},
files: {
'public/build/css/app.min.css': 'dev/scss/app.scss'
}
}
},
imagemin: {
dynamic: {
files: [{
expand: true,
cwd: 'dev/img/',
src: ['**/*.{png,jpg,gif}'],
dest: 'public/build/img/'
}]
}
},
uglify: {
build: {
files: {
'public/build/js/modernizr.min.js': 'dev/tmp/modernizr.js',
'public/build/js/app.min.js': 'dev/tmp/app.js'
}
}
},
clean: {
dist: [
'tmp/**',
'public/build/img/**'
]
},
watch: {
grunt: {
files: ['Gruntfile.js']
},
css: {
files: ['scss/*.scss'],
tasks: ['newer:sass'],
options: {
spawn: false
}
},
js: {
files: [
'js/*.js'
],
tasks: ['newer:concat', 'newer:uglify'],
options: {
livereload: true,
atBegin: true
}
},
imagemin: {
files: [
'img/**'
],
tasks: ['newer:imagemin'],
options: {
livereload: true,
atBegin: true
}
}
}
});
// Load tasks
grunt.loadNpmTasks('grunt-sass');
grunt.loadNpmTasks('grunt-contrib-clean');
grunt.loadNpmTasks('grunt-contrib-jshint');
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-notify');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-imagemin');
grunt.loadNpmTasks('grunt-express');
grunt.loadNpmTasks('grunt-newer');
// Register default tasks
grunt.registerTask('build', ['sass']);
grunt.registerTask('default', ['build','watch']);
}
I am experimenting with Grunt and I am getting a Warning: Task "default" not found error when I try to run Grunt. my Gruntfile.js is
module.exports = function(grunt) {
grunt.initConfig({
concat: {
js: {
options: {
separator: ';'
},
src: [
'library/js/*.js'
],
dest: 'library/js/scripts.min.js'
},
},
uglify: {
options: {
mangle: false
},
js: {
files: {
'library/js/scripts.min.js': ['library/js/scripts.min.js']
}
}
},
less: {
style: {
files: {
"library/css/style.css": "library/less/style.less"
},
}
},
watch: {
js: {
files: ['library/js/*.js'],
tasks: ['concat:js', 'uglify:js'],
options: {
livereload: 35729
}
},
css: {
files: ['library/less/*.less'],
tasks: ['less:style'],
options {
livereload: 35729
}
},
php : {
files : ['**/*.php'],
options : {
livereload : 35729
}
}
}
});
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-less');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.registerTask('default', ['watch']);
};
This was working until I added the Livereload portions, and I think it might be a syntax error. However this is the first time I have used this and I simply don't know what is causing the problem. Any help would be greatly appreciated.
You're missing a colon for watch.css.options. Update to:
css: {
files: ['library/less/*.less'],
tasks: ['less:style'],
options: {
livereload: 35729
}
}
In case anyone finds this later to get livereload to work I had to change the watch section to
watch: {
js: {
files: ['library/js/*.js'],
tasks: ['concat:js', 'uglify:js'],
},
css: {
files: ['library/less/*.less'],
tasks: ['less:style'],
},
php : {
files: ['**/*.php'],
},
options: {
livereload: true,
spawn: false
}
}
'use strict';
module.exports = function(grunt) {
// Project Configuration
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
watch: {
jade: {
files: ['app/views/**'],
options: {
livereload: true,
},
},
js: {
files: ['!public/build.js', 'gruntfile.js', 'server.js', 'app/**/*.js', 'public/js/**', 'test/**/*.js'],
tasks: ['uglify', 'jshint'],
options: {
livereload: true,
},
},
html: {
files: ['public/views/**'],
options: {
livereload: true,
},
},
css: {
files: ['public/css/**'],
options: {
livereload: true
}
}
},
jshint: {
all: {
src: ['!public/build.js', 'gruntfile.js', 'server.js', 'app/**/*.js', 'public/js/**', 'test/**/*.js'],
options: {
jshintrc: true
}
}
},
uglify: {
options: {
mangle: false
},
dist: {
files: {
'public/build.js': ['public/js/**/*.js']
}
}
},
nodemon: {
dev: {
options: {
file: 'server.js',
args: [],
ignoredFiles: ['public/**'],
watchedExtensions: ['js'],
nodeArgs: ['--debug'],
delayTime: 1,
env: {
PORT: 3000
},
cwd: __dirname
}
}
},
concurrent: {
tasks: ['nodemon', 'watch', 'uglify'],
options: {
logConcurrentOutput: true
}
},
mochaTest: {
options: {
reporter: 'spec',
require: 'server.js'
},
src: ['test/mocha/**/*.js']
},
env: {
test: {
NODE_ENV: 'test'
}
},
karma: {
unit: {
configFile: 'test/karma/karma.conf.js'
}
}
});
//Load NPM tasks
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-jshint');
grunt.loadNpmTasks('grunt-mocha-test');
grunt.loadNpmTasks('grunt-karma');
grunt.loadNpmTasks('grunt-nodemon');
grunt.loadNpmTasks('grunt-concurrent');
grunt.loadNpmTasks('grunt-env');
//Making grunt default to force in order not to break the project.
grunt.option('force', true);
//Default task(s).
grunt.registerTask('default', ['jshint', 'concurrent']);
//Test task.
grunt.registerTask('test', ['env:test', 'mochaTest', 'karma:unit']);
};
I'm trying to exclude the public/build.js file, but it doesn't seem to be working. What am I doing wrong?
Edit:
Why do you need to exclude it from your watch? I do not see any glob pattern in your watch:js task that would look for changed in that file to begin with.
Original Answer:
Have you tried moving '!public/build.js' as the last include in your watch task?
The part of the documentation sited:
"Patterns are processed in-order, with !-prefixed matches excluding matched files from the result set"
Makes me think that the excluded file at the beginning gets added back in with the 'public/js/**' pattern.
I would try changing your js watch task to this.
js: {
files: ['gruntfile.js', 'server.js', 'app/**/*.js', 'public/js/**', 'test/**/*.js', '!public/build.js'],
tasks: ['uglify', 'jshint'],
options: {
livereload: true,
},
},
Add the ! to the beginning of the file name. !public/build.js
You could also add a jshintignore file with all the files you want to ignore inside that.