Grunt: viewing multiple files, compilation only changed - interruptions in working with sheets?

Question

I am new to Grunt and Javascript / Coffeescript in general.

We use Grunt in a fairly large project with hundreds of files. coffee. Since Grunt compiles all cookies (although only one file has been changed), my initial question was how to get Grunt to compile only one modified file. Using stackoverflow, I was able to answer this question, thanks to everyone :)

But now it seems that the implemented solution disrupts the work with the furnace. When I start with the "grunt server" and display my page in the browser, everything looks great. Then I change one .coffee file and save it. The file compiles (I checked), but my browser never restarts. Only when manually restarting the browser is a new changed code displayed.

So the question is: why cookies don't work anymore?

I don't know if this matters, but the Gruntfile was created using yoman in an older version (with a rough estimate). I updated package.json and Gruntfile to newer specifications using grunt-contrib-watch and buildin livereload. Without grunt.event.on everything works fine.

Sources (partially):

 grunt.initConfig({ watch: { coffee: { files: ['<%= yeoman.app %>/coffeescripts/**/*.coffee'], tasks: ['coffee:app'], options: { nospawn: true }, }, compass: { files: ['<%= yeoman.app %>/styles/**/*.{scss,sass}'], tasks: ['compass'] }, templates: { files: ['<%= yeoman.app %>/templates/**/*.tpl'], tasks: ['handlebars'] }, livereload: { options: { livereload: LIVERELOAD_PORT }, files: [ '<%= yeoman.app %>/*.html', '<%= yeoman.tmp %>/styles/**/*.css', '<%= yeoman.tmp %>/scripts/**/*.js', '<%= yeoman.tmp %>/spec/**/*.js', '<%= yeoman.app %>/img/{,*/}*.{png,jpg,jpeg,webp}', ] } }, coffee: { app: { expand: true, cwd: '<%= yeoman.app %>/coffeescripts', src: '**/*.coffee', dest: '<%= yeoman.tmp %>/scripts', ext: '.js', options: { runtime: 'inline', sourceMap: true }, } } } }); grunt.event.on('watch', function(action, filepath) { filepath = filepath.replace(grunt.config('coffee.app.cwd')+'/', '' ); grunt.config('coffee.app.src', [filepath]); }); grunt.registerTask('server', function (target) { if (target === 'dist') { return grunt.task.run(['build', 'open', 'connect:dist:keepalive']); } grunt.task.run([ 'clean:server', 'coffee', 'compass:server', 'symlink:bower', 'connect:livereload', 'handlebars', 'notify:watch', 'watch' ]); }); 

grunt-contrib-watch is used with version v0.4.4 , connect-livereload with version 0.2.0

Answer 1

My decision:

 grunt.initConfig({ pkg: grunt.file.readJSON('package.json'), cssmin: { dist: { expand: true, cwd: 'app', src: ['**/*.css'], dest: 'WebContent' } }, uglify: { options: { mangle: false }, dist: { expand: true, cwd: 'app/js', src: ['**/*.js'], dest: 'WebContent/js' } }, htmlmin: { options: { collapseWhitespace: true }, dist: { expand: true, cwd: 'app', src: ['**/*.html'], dest: 'WebContent' } }, watch: { options: { spawn: false }, cssmin: { files: 'app/css/**/*.css', tasks: ['cssmin'] }, uglify: { files: 'app/js/**/*.js', tasks: ['uglify'] }, htmlmin: { files: 'app/**/*.html', tasks: ['htmlmin'] } }, }); // Faz com que seja salvo somente o arquivo que foi alterado grunt.event.on('watch', function(action, filepath) { var tasks = ['cssmin', 'uglify', 'htmlmin']; for (var i=0, len=tasks.length; i < tasks.length; i++) { var taskName = tasks[i]; if (grunt.file.isMatch(grunt.config('watch.'+ taskName +'.files'), filepath)) { var cwd = new String(grunt.config(taskName + '.dist.cwd')).split('/').join('\\') + '\\'; //inverte as barras e adiciona uma "\" no final var pathWithoutCwd = filepath.replace(cwd, ''); //obtem somente o path sem o cwd grunt.config(taskName + '.dist.src', pathWithoutCwd); //configura a task } } }); grunt.loadNpmTasks('grunt-contrib-watch'); grunt.loadNpmTasks('grunt-contrib-cssmin'); grunt.loadNpmTasks('grunt-contrib-uglify'); grunt.loadNpmTasks('grunt-contrib-htmlmin'); // Tarefas padrão grunt.registerTask('default', ['cssmin', 'uglify', 'htmlmin']); }; 

Answer 2

I think grunt-concurrent is what you are looking for.

Here is my approach. (Note that it is written in a coffee script, but you should easily adapt it).

 watch: compass: files: ['private/compass/**/*.scss'] tasks: ['compass:dist'] options: livereload: true coffee: options: livereload: 34567 files: ['private/coffee/**/*/.coffee'] tasks: ['coffee:dist'] ci: options: livereload: 34568 files: ['application/views/**/*.php', 'application/controllers/**/*.php'] concurrent: options: logConcurrentOutput: true dev: ['watch:compass', 'watch:coffee', 'watch:ci']