How to ignore one file in a grunt-watch task? - gruntjs

'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.

Related

Grunt - nodemon + watch

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']);
};

FoundationPress: want to add task to Gruntfile.js

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 Watch - Verifiying property

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.

Grunt Warning: Task "default" Not Found

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
}
}

Grunt outputs an empty .js-file after concatting

The output of the Gruntfile is an empty file in public/assets/app.js. The Sass-part works fine, but the JS-part doesn't.
//Gruntfile
module.exports = function(grunt) {
//Initializing the configuration object
grunt.initConfig({
// Task configuration
sass: {
dist: {
options: {
style: 'compressed'
},
files: {
'./public/assets/app.css': './app/assets/scss/style.scss'
},
noCache: true
}
},
concat: {
options: {
separator: ';',
},
dist: {
src: [
'./app/bower/jquery/jquery.js',
'./app/assets/js/script.js'
],
dest: './public/assets/app.js',
},
},
uglify: {
options: {
mangle: false
},
dist: {
files: {
'./public/assets/app.js': './public/assets/app.js',
}
},
},
jshint: {
all: ['Gruntfile.js', './public/assets/app.js']
},
watch: {
js: {
files: [
'./app/assets/bower/*.js',
'./app/assets/js/*.js'
],
tasks: ['jshint', 'concat', 'uglify'],
options: {
livereload: false
}
},
sass: {
files: ['./app/assets/scss/*.scss'],
tasks: ['sass'],
options: {
livereload: false
}
}
}
});
// Plugin loading
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-sass');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-jshint');
// Task definition
grunt.registerTask('default', ['sass', 'jshint', 'concat', 'uglify', 'watch']);
};
But I can't find out what is wrong. Even JShint isn't showing errors.
Structure looks like this: https://www.dropbox.com/s/y0t2tu0asotz0ex/Screenshot%202013-12-20%2020.49.54.png
Taking another look at your Gruntfile and directory structure, I think you have the folders specified incorrectly, You specify the source as being ./app/..., but if your Gruntfile is in that directory (app), then you would have to be running your grunt tasks from there, meaning it would be looking for app/app/... (because it's relative to the current directory). Try this:
concat: {
options: {
separator: ';',
},
dist: {
src: [
'bower/jquery/jquery.js',
'assets/js/script.js'
],
dest: 'public/assets/app.js',
},
},
My solution is set correct filepath: Scripts/libs/Timer.js - correct, /Scripts/libs/Timer.js - empty file
Scripts is a folder into my project.
Project/Scripts/libs/Timer.js - full path.
when I set this path:
Scripts/libs/Timer.js - file isn't empty, when /Scripts/libs/Timer.js - file is empty.
concat: {
options:{
// define a string to put between each file in the concatenated output
separator: '\n;'
},
own_scripts: {
//project-files
src: [
"Scripts/application/app.js",
"Scripts/application/Controllers/*.js",
"Scripts/application/Directives/*.js",
"Scripts/application/Filters/*.js",
"Scripts/application/Services/*.js"
],
dest: 'dist/scripts-concat.js'
}
maybe you should do this:
dist: {
src: [
'app/bower/jquery/jquery.js',
'app/assets/js/script.js'
],
dest: 'public/assets/app.js',
},

Resources