Конфигурирование Livereload для grunt-проекта

Question

[Иван Беленков]

Возник вопрос по таску Watch. Хочу, чтоб при запуске грант-таска dev, вотчер отслеживал изменения в исходниках, автоматически компилировал их в папку build и перезагружал страницу в браузере. Однако, получается так, что scss компилится в какой-то временный файл, а css в папке build не отслеживается, что я делаю не так?
Вот код Gruntfile:

module.exports = function( grunt ) {
	grunt.initConfig({
		concat: {
			options: {
				process: function(src, filepath) {
					return '\n//#### ' + filepath + '\n\n' + src;
				}
			},
			dist: {
				src: [	"source/js/jquery-1.8.2.min.js",
				
						// Put dependent files here
				
						"source/js/script.js"],
				dest: 'build/js/script.js'
			}
		},
		sass: {
			dist: {
				options: {
					style: 'compressed'
				},
				files: {
					'build/css/styles.css':'**/*.scss'
				}
			}
		},
		jade: {
			compile: {
				options: {
					pretty: true
				},
				files: [{
					cwd: "source",
					src: ["*.jade"],
					dest: "build",
					expand: true,
					ext: ".html",
				}]
			}
		},
		uglify: {
			dist: {
				files: {
					"build/js/script.min.js" : "build/js/script.js"
				}
			}
		},
		imagemin: {
			options: {
				cache: false
			},
			dist: {
				files: [{
					expand: true,
					cwd: 'source/img',
					src: ['**/*.{png,jpg,gif}'],
					dest: 'build/img/'
				}]
			}
		},
		watch: {
            livereload: {
                options: {
                    livereload: true
                },
                files: ['build/**/*']
            },
            src : {
                files: ['source/**/*'],
                task: ['default']
            }
		},
		connect: {
			server: {
				options: {
					port: 3000,
                    livereload: 35729,
                    hostname: 'localhost',
                    base: ['build']
				},
                livereload: {
                    options: {
                        open:true,
                        base: ['build']
                    }
                }
			}
		}
	});
	
	require('load-grunt-tasks')(grunt);
	
	grunt.registerTask('default', ['concat','sass','jade','uglify','imagemin']);
	grunt.registerTask('dev',['connect','concat','sass','jade','uglify','imagemin','watch']);
}

Answer 1

[Rainum]

Все вы делаете так, но watch-таск делает очень много лишней работы. У вас он смотрит на директорию с исходниками и при изменении любого файла, запускает все таски, а не один нужный.

Для начала вам стоит разбить watch на таргеты для независимой компиляции разных типов файлов. Также у меня есть сомнения по поводу необходимости указывать таргет files у самого livereload - уберите его. Вот пример моего таска с livereload:

watch: {
  options: {
    livereload: true
  },
  gruntfile: {
    files: ['Gruntfile.js'],
    tasks: ['build:dev']
  },
  js: {
    files: '<%= path.assets %>/javascripts/{,**/}*.js',
    tasks: 'concat'
  },
  compass: {
    files: '<%= path.assets %>/stylesheets/{,**/}*.{scss,sass}',
    tasks: ['compass:dev', 'autoprefixer']
  },
  jade: {
    files: '<%= path.assets %>/views/{,**/}*.jade',
    tasks: ['jade:dev']
  }
}

Также не забудьте вставить скрипт для livereload в свой html:

<script src="//localhost:35729/livereload.js"></script>

Comments

[Иван Беленков]

@Rainum спасибо огромное, очень помогли. Всё таки документация плагинов гранта слегка запутана =)