Grunt Watch not creating files on save - gruntjs

The tasks in my grunt file are running without errors but the files i'm asking it to create aren't being compiled. They are created if I simple run 'grunt' but if I use 'grunt watch' and save a file it doesn't update.
Particularly I am working on file 'script/src/latestNews.js' so on save this should concat with others to create 'script/dist/main.js', which it does. But it does not then go on to create 'dist/build.min.js' like it should.
module.exports = function (grunt) {
// Project configuration.
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
uglify: {
options: {
mangle: false
},
target: {
files: {
'script/dist/main.min.js':'script/dist/main.js'
}
},
build: {
files: {
'script/dist/build.min.js':'script/dist/build.min.js'
}
}
},
concat: {
options: {
stripBanners: true,
banner: '/*! <%= pkg.name %> - v<%= pkg.version %> - ' +
'<%= grunt.template.today("yyyy-mm-dd") %> */',
},
srcJS: {
src: ['script/src/menu.js',
'script/src/custom_plugins.js',
'script/src/banner.js',
'script/src/latestNews.js',
'script/src/officers.js',
'script/src/eventsCalendar.js',
'script/src/combinedSocialMedia.js',
'script/src/haveYourSay.js',
'script/src/photoGallery.js',
'script/src/countdown.js'
],
dest: 'script/dist/main.js'
},
css: {
src: ['style/libs/bootstrap.min.css',
'style/libs/bootstrap-theme.min.css',
'style/src/css/*'],
dest: 'style/dist/build.min.css'
},
build: {
src: ['script/libs/jquery.easing.min.js',
'script/dist/main.js',
'script/libs/bootstrap.min.js',
'script/libs/velocity.min.js',
'script/libs/date.js',
'script/libs/jquery.timeago.js',
'script/libs/owl.carousel.min.js'
],
dest: 'script/dist/build.min.js'
}
},
jshint: {
main: 'script/dist/main.js'
},
watch: {
js: {
files: 'script/src/*',
tasks: ['concat:srcJS', 'uglify:target', 'jshint:main', 'copy:js']
},
css: {
files: 'style/src/css/*',
tasks: ['copy:css']
},
less: {
files: 'style/src/less/*',
tasks: ['less', 'copy:css']
},
html: {
files: '*.html',
tasks: ['validation', 'bootlint']
}
},
clean: {
js: [
'script/dist/main.min.js',
'dist/build.min.js',
'dist/build.min.css'
]
},
copy: {
css: {
files: [
{ expand: true, 'src' : 'style/src/css/main.css',
'dest' : 'style/dist/', flatten: true,
rename: function(dest, src) {
return dest + src.replace('main','build.min');
}
},
{ expand: true, 'src' : 'style/dist/build.min.css',
'dest' : 'dist/', flatten: true },
]
},
js: {
files: [
{ expand: true, 'src' : 'script/dist/build.min.js',
'dest' : 'dist/', flatten: true }
]
}
},
validation: {
options: {
reset: grunt.option('reset') || false,
stoponerror: true,
relaxerror: ['Bad value X-UA-Compatible for attribute http-equiv on element meta.'] //ignores these errors
},
files: {
src: ['homepage.html']
}
},
bootlint: {
options: {
stoponerror: false,
relaxerror: ['E001', 'E003', 'E031', 'W001', 'W002', 'W003', 'W005', 'W007', 'W009', 'E013']
},
files: ['homepage.html'],
},
less: {
build: {
options: {
paths: ["style/src/less"],
cleancss: true,
compress: true
},
files: {
"style/src/css/main.css": "style/src/less/main.less"
}
}
}
});
// Load the plugin that provides the "uglify" task.
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-jshint');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-copy');
grunt.loadNpmTasks('grunt-contrib-clean');
grunt.loadNpmTasks('grunt-contrib-less');
grunt.loadNpmTasks('grunt-html-validation');
grunt.loadNpmTasks('grunt-bootlint');
// Default task(s).
//grunt.registerTask('default', ['concat:srcJS','concat:css','uglify','jshint:main']);
grunt.registerTask('default', [
'validation',
'bootlint',
'concat:srcJS',
'jshint:main',
'uglify:target',
'clean',
'concat:build',
'uglify:build',
'less',
'copy'
]);
};

It looks like the array of tasks that are run by your watch:js task is simply missing a couple of critical tasks. Specifically you are not running the concat:build and uglify:build tasks.
Your current array of tasks:
['concat:srcJS', 'uglify:target', 'jshint:main', 'copy:js']
Complete/fixed array of tasks:
['concat:srcJS', 'uglify:target', 'jshint:main', 'concat:build', 'uglify:build', 'copy:js']
Replacing your current array with the fix that I supplied should solve your issue.

Related

Could not find an option named "sourcemap" - Grunt watch

Grunt is running and detecting the change but the compilation is not happening due to the error "Could not find an option named "sourcemap"
Ruby was not installed since it was required before, I installed it.
Updated all the node packages inside the package.json file. SCSS/CSS files are in the correct path as fas as I know, not sure what could be the issue.
ui = {
'grunt' :
{
'js_files' :
[
'web/webroot/_ui/responsive/theme-blue/razer/js/jquery-ui-1.11.2.custom.min.js'
]
}
}
//'use strict';
module.exports = function (grunt) {
// Project configuration.
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
//Compile Sass
sass: {
options: {
sourcemap: 'none'
},
compile: {
files: {
'web/webroot/_ui/responsive/theme-blue/razer/stylesheets/main.css': 'web/webroot/_ui/responsive/theme-blue/razer/sass/main.scss',
'web/webroot/_ui/responsive/theme-blue/razer/stylesheets/main.home.css': 'web/webroot/_ui/responsive/theme-blue/razer/sass/main.home.scss',
'web/webroot/_ui/responsive/theme-blue/razer/stylesheets/main.branding.css': 'web/webroot/_ui/responsive/theme-blue/razer/sass/main.branding.scss',
'web/webroot/_ui/responsive/theme-blue/razer/stylesheets/main.whitepdp.css': 'web/webroot/_ui/responsive/theme-blue/razer/sass/main.whitepdp.scss'
}
}
},
//Minify css
cssmin: {
target: {
files: [
{
src: [
'web/webroot/_ui/responsive/theme-blue/razer/stylesheets/main.css',
'web/webroot/_ui/responsive/theme-blue/razer/stylesheets/owl.carousel.min.css',
'web/webroot/_ui/responsive/theme-blue/razer/stylesheets/owl.theme.default.min.css',
'web/webroot/_ui/responsive/theme-blue/razer/stylesheets/simplebar.css',
'web/webroot/_ui/responsive/theme-blue/razer/stylesheets/styles.css'
],
dest: 'web/webroot/_ui/responsive/theme-blue/razer/stylesheets/mainmin.css'
},
{
src: [
'web/webroot/_ui/responsive/theme-blue/razer/stylesheets/main.home.css',
'web/webroot/_ui/responsive/theme-blue/razer/stylesheets/owl.carousel.min.css',
'web/webroot/_ui/responsive/theme-blue/razer/stylesheets/owl.theme.default.min.css',
'web/webroot/_ui/responsive/theme-blue/razer/stylesheets/simplebar.css',
'web/webroot/_ui/responsive/theme-blue/razer/stylesheets/styles.css'
],
dest: 'web/webroot/_ui/responsive/theme-blue/razer/stylesheets/mainmin.home.css'
},
{
src: [
'web/webroot/_ui/responsive/theme-blue/razer/stylesheets/main.branding.css',
'web/webroot/_ui/responsive/theme-blue/razer/stylesheets/owl.carousel.min.css',
'web/webroot/_ui/responsive/theme-blue/razer/stylesheets/owl.theme.default.min.css',
'web/webroot/_ui/responsive/theme-blue/razer/stylesheets/simplebar.css',
'web/webroot/_ui/responsive/theme-blue/razer/stylesheets/styles.css'
],
dest: 'web/webroot/_ui/responsive/theme-blue/razer/stylesheets/mainmin.branding.css'
},
{
src: [
'web/webroot/_ui/responsive/theme-blue/razer/stylesheets/main.whitepdp.css',
'web/webroot/_ui/responsive/theme-blue/razer/stylesheets/owl.carousel.min.css',
'web/webroot/_ui/responsive/theme-blue/razer/stylesheets/owl.theme.default.min.css',
'web/webroot/_ui/responsive/theme-blue/razer/stylesheets/simplebar.css',
'web/webroot/_ui/responsive/theme-blue/razer/stylesheets/styles.css'
],
dest: 'web/webroot/_ui/responsive/theme-blue/razer/stylesheets/mainmin.whitepdp.css'
}
]
}
},
imagemin: { // Task
dynamic: { // Another target
files: [{
expand: true, // Enable dynamic expansion
cwd: 'web/webroot/_ui/responsive/theme-blue/razer/images/', // Src matches are relative to this path
src: ['**/*.{png,jpg,gif}'], // Actual patterns to match
dest: 'web/webroot/_ui/responsive/theme-blue/razer/images/' // Destination path prefix
}]
}
},
//Uglify js
uglify: {
build: {
files: [{
src: ui.grunt.js_files,
dest: 'web/webroot/_ui/responsive/theme-blue/razer/js/combined.js'
}],
files: [{
src: [
'web/webroot/_ui/responsive/common/js/jquery-2.1.1.min.js'
],
dest: 'web/webroot/_ui/responsive/theme-blue/razer/js/combined_lib.js'
}],
files: [{
src: [
'web/webroot/_ui/responsive/common/js/jquery-2.1.1.min.js'
],
dest: 'web/webroot/_ui/responsive/theme-blue/razer/js/combined_lib.js'
}]
},
debug: {
options: {
beautify: false,
mangle: false,
compress: true
},
files: [{
src: ui.grunt.js_files,
dest: 'web/webroot/_ui/responsive/theme-blue/razer/js/combined.js'
}]
}
},
watch: {
css: {
files: ['**/*.scss', '**/*.css'],
tasks: ['sass', 'cssmin']
},
build: {
files: ['web/webroot/_ui/responsive/theme-blue/razer/js/*.js', 'web/webroot/_ui/responsive/common/js/*.js', 'web/webroot/_ui/responsive/theme-blue/razer/js/plugin/*.js'], // which files to watch
tasks: ['uglify:build'],
options: {
nospawn: true
}
},
debug: {
files: ['web/webroot/_ui/responsive/theme-blue/razer/js/*.js', 'web/webroot/_ui/responsive/common/js/*.js'], // which files to watch
tasks: ['uglify:debug'],
options: {
nospawn: true
}
}
}
});
// Plugins
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-sass');
grunt.loadNpmTasks('grunt-contrib-cssmin');
grunt.loadNpmTasks('grunt-contrib-uglify');
//grunt.loadNpmTasks('grunt-contrib-imagemin');
grunt.registerTask('build', ['watch']);
grunt.registerTask('default', ['sass', 'cssmin', 'uglify']);
grunt.registerTask('debug', ['uglify:debug', 'watch:debug']);
grunt.registerTask('lib', ['uglify:lib']);
};
I am experiencing the same issue. I recently switched machines and upgraded to OS Catalina (not sure if this is related to the error).
A (temporary) solution that worked for me is to edit Gruntfile.js and remove the 'sourcemap' option:
before:
options: {
style: 'compressed',
sourcemap: true
},
after:
options: {
style: 'compressed'
},
most likely you have an old sass engine
just do gem install sass or sudo gem install sass

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

grunt will not run on my project, which default Task?

I am trying to run grunt in order to get SASS and a few other things to compile my project (that someone else created), however I keep getting the following error:
Warning: Task "default" not found. Use --force to continue.
Aborted due to warnings.
I do not understand which "default" task it is is referring to. The grunt file I have inherited is as follows:
module.exports = function(grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
concat: {
options: {
separator: ';'
},
dev: {
src: ['www/_assets/js/vendor-concat/*.js', 'www/_assets/js/*.js', '!www/_assets/js/prototype.js', '!www/_assets/js/scripts.js', '!www/_assets/js/scripts.min.js'],
dest: 'www/_assets/js/scripts.js'
}
},
uglify: {
dist: {
files: {
'www/_assets/js/scripts.min.js': ['www/_assets/js/scripts.js']
}
}
},
jshint: {
files: ['Gruntfile.js'],
options: {
// options here to override JSHint defaults
globals: {
jQuery: true,
console: true,
module: true,
document: true
}
}
},
modernizr: {
dist: {
// [REQUIRED] Path to the build you're using for development.
"devFile" : "www/_assets/js/vendor/modernizr-2.7.1.js",
// [REQUIRED] Path to save out the built file.
"outputFile" : "www/_assets/js/vendor/modernizr-custom.js"
}
},
imageoptim: {
dev: {
src: ['www/_assets/img']
}
},
sass: {
dev: {
options: {
includePaths: ['www/_assets/scss'],
outputStyle: 'compressed',
sourceMap: true
},
files: {
'www/_assets/css/main.css' : 'www/_assets/scss/main.scss',
'www/_assets/css/main-ie8.css' : 'www/_assets/scss/main-ie8.scss'
}
}
},
assemble: {
options: {
flatten: false,
expand: true,
assets: 'www/_assets',
layout: 'default.hbs',
layoutdir: 'www/_templates/layouts',
partials: ['www/_templates/partials/*.hbs'],
data: ['www/_templates/data/*.json']
},
dev: {
files: [
{expand: true, cwd: 'www/_templates/pages/', src: '**/*.hbs', dest: 'www/', ext: '.html'}
]
}
},
watch: {
options: {
livereload: true,
spawn: false
},
css: {
files: ['www/_assets/scss/**/*.scss'],
tasks: ['sass']
},
js: {
files: ['www/_assets/js/**/*.js', '!www/_assets/js/scripts.min.js', '!www/_assets/js/scripts.js'],
tasks: ['jshint', 'concat:dev']
},
hbs: {
files: ['www/_templates/{,*/}*.hbs', 'www/_templates/{,*/*/}*.hbs', 'www/_templates/{,*/*/*/}*.hbs'],
tasks: ['assemble']
},
html: {
files: ['www/email.html']
}
},
copyto: {
prototype: {
files: [
{cwd: 'www/', src: ['**/*'], dest: 'prototype/'}
],
options: {
ignore: [
'www/_assets/scss{,/**/*}',
'www/_assets/js{,/**/*}',
'!www/_assets/js/vendor{,/**/*}',
'!www/_assets/js/scripts.min.js',
'!www/_assets/js/prototype.js',
'www/_templates{,/**/*}',
'www/z-backups{,/**/*}',
'www/_assets/css/*.map'
]
}
},
beta: {
files: [
{cwd: 'prototype/_assets/', src: ['**/*'], dest: '_beta-sln/Beta/src/SFA.as.Web.Candidate/Content/_assets/'}
],
options: {
ignore: [
'prototype/_assets/video{,/**/*}',
'prototype/_assets/js/prototype.js'
]
}
},
sprint: {
files: [
{cwd: 'prototype/', src: ['**/*'], dest: 'sprint/'}
]
},
dist: {
files: [
{cwd: 'www/', src: ['**/*'], dest: 'dist/'}
],
options: {
ignore: [
'www/_assets/scss{,/**/*}',
'www/_assets/css/*.map',
'www/_assets/video{,/**/*}',
'www/_assets/js/plugins{,/**/*}',
'www/_assets/js/interactions.js',
'www/_assets/js/scripts.js',
'www/_templates{,/**/*}',
'www/*.html',
'!www/index.html',
'www/z-backups{,/**/*}'
]
}
}
},
clean: {
prototype: {
src: [ 'prototype/' ]
},
sprint: {
src: [ 'sprint/' ]
},
dist: {
src: [ 'dist/' ]
}
},
replace: {
map: {
src: ['www/_assets/css/*.css'],
overwrite: true,
replacements: [{
from: 'sourceMappingURL=main.css.map',
to: 'Map removed'
},{
from: 'sourceMappingURL=main-ie8.css.map',
to: 'Map removed'
}]
},
scripts: {
src: ['www/apprentice/*.html', 'www/test/apprentice/*.html', 'www/trainee/*.html', 'www/employer/*.html', 'www/*.html'],
overwrite: true,
replacements: [{
from: 'scripts.js',
to: 'scripts.min.js'
}]
}
},
prettify: {
options: {
indent: 2,
wrap_line_length: 78,
brace_style: 'expand',
},
// Specify a number to padcomments
dist: {
files: [
{expand: true, cwd: 'dist/', src: ['apprentice/*.html', 'trainee/*.html', 'employer/*.html', '*.html'], dest: 'dist/', ext: '.html'}
]
},
prototype: {
files: [
{expand: true, cwd: 'prototype/', src: ['apprentice/*.html', 'trainee/*.html', 'employer/*.html', '*.html', '!pattern-library.html'], dest: 'prototype/', ext: '.html'}
]
}
},
devUpdate: {
main: {
options: {
updateType: 'report', //just report outdated packages
reportUpdated: false, //don't report already updated packages
semver: true, //use package.json semver rules when updating
packages: { //what packages to check
devDependencies: true, //only devDependencies
dependencies: false
},
packageJson: null //find package.json automatically
}
}
},
browserSync: {
dev: {
bsFiles: {
src : [
'www/_assets/css/*.css',
'www/_assets/js/scripts.js',
'www/**/*.html'
]
},
options: {
ghostMode: {
clicks: true,
scroll: true,
links: true,
forms: true
},
watchTask: true,
server: {
baseDir: "www"
}
}
}
},
connect: {
server: {
options: {
port: 7000,
base: 'www',
livereload: true,
open: true
}
}
},
uncss: {
offline: {
options: {
// csspath : 'www/_assets/css/',
// urls : ['http://localhost:/mypage', '...'], // Deprecated
timeout : 1000,
},
files: {
'www/offline/offline.css': ['www/offline/maintenance.html']
}
}
}
});
[
'assemble',
'grunt-modernizr',
'grunt-contrib-imagemin',
'grunt-imageoptim',
'grunt-contrib-uglify',
'grunt-contrib-jshint',
'grunt-sass',
'grunt-uncss',
'grunt-criticalcss',
'grunt-contrib-concat',
'grunt-text-replace',
'grunt-contrib-watch',
'grunt-copy-to',
'grunt-contrib-clean',
'grunt-contrib-compress',
'grunt-pngmin',
'grunt-browser-sync',
'grunt-dev-update',
'grunt-contrib-connect',
'grunt-prettify'
].forEach(function (task) {
grunt.loadNpmTasks(task);
});
grunt.registerTask('images', ['imageoptim']);
grunt.registerTask('modern', ['modernizr']);
grunt.registerTask('offline', ['uncss:offline']);
grunt.registerTask('dev', ['jshint', 'concat:dev', 'sass', 'assemble', 'connect', 'watch']);
grunt.registerTask('sync', ['jshint', 'concat:dev', 'sass', 'assemble', 'browserSync', 'watch']);
grunt.registerTask('proto', ['uglify:dist', 'replace:map', 'clean:prototype', 'replace:scripts', 'copyto:prototype', 'prettify:prototype']);
grunt.registerTask('sprint', ['clean:sprint', 'copyto:sprint']);
grunt.registerTask('dist', ['uglify:dist', 'replace:map', 'clean:dist', 'replace:scripts', 'copyto:dist', 'prettify:dist']);
grunt.registerTask('beta', ['copyto:beta']);
};
As I have not created this myself, I am reluctant to go ahead and break it but is there anything there which stands out? I have seen similar questions but as the grunt files need to vary it is difficult to find the correct answer for this.
Many thanks!
Since file doesn't have default task you have to either create it or run grunt with one of defined tasks:
> grunt dev
or add default task in your Gruntfile.js
grunt.registerTask('default',['dev']);
please refer to http://gruntjs.com/creating-tasks for more information

Grunt isn't making changes when watching

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

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

Resources