Привет, коллеги!
Я совсем недавно решил освоить связку Node.js + Grunt. И у меня всё получается. Радуюсь, что теперь могу пользоваться SASS, что автоматизируются рутинные процессы, но мое существование омрачает пакет "grunt-contrib-watch", который я не могу заставить работать, так как хочу. Помогите пожалуйста!
Вот вызов watch в Gruntfile.js:
watch: {
options: {
livereload: true,
},
scripts: {
files: ['js/*.js'],
tasks: ['concat', 'uglify'],
options: {
spawn: false
}
},
css: {
files: ['scss/*.scss','css/*.css',],
tasks: ['sass','cssmin'],
options: {
spawn: false
}
}
}
Вот загрузка модулей:
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-sass');
grunt.loadNpmTasks('grunt-contrib-cssmin');
grunt.loadNpmTasks('grunt-contrib-watch');
Вот задания:
grunt.registerTask('default', ['concat', 'uglify', 'sass', 'cssmin', 'watch']);
При этом не важно активна ли программа LiveReload (для OS X). При изменении, к примеру, .sass файла в консоли начинается безумие, которое продолжается бесконечное кол-во раз.
MacBook-Pro-Mihail:dev mihailhlebnikov$ grunt
Running "concat:dist" (concat) task
File js/build/production.js created.
Running "uglify:build" (uglify) task
>> 1 file created.
Running "sass:dist" (sass) task
Running "cssmin:combine" (cssmin) task
File css/production.min.css created: 40.35 kB → 30.84 kB
Running "watch" task
Waiting...OK
>> File "scss/main.scss" changed.
Running "sass:dist" (sass) task
Running "cssmin:combine" (cssmin) task
File css/production.min.css created: 40.35 kB → 30.84 kB
Done, without errors.
Completed in 2.074s at Thu Dec 11 2014 10:22:23 GMT+0300 (MSK) - Waiting...OK
>> File "css/normalize.css" changed.
>> File "css/production.css" changed.
>> File "css/production.min.css" changed.
Running "sass:dist" (sass) task
Running "cssmin:combine" (cssmin) task
File css/production.min.css created: 40.35 kB → 30.84 kB
Done, without errors.
Completed in 1.875s at Thu Dec 11 2014 10:22:25 GMT+0300 (MSK) - Waiting...OK
>> File "css/normalize.css" changed.
>> File "css/production.css" changed.
>> File "css/production.min.css" changed.
Running "sass:dist" (sass) task
Running "cssmin:combine" (cssmin) task
File css/production.min.css created: 40.35 kB → 30.84 kB
Done, without errors.
Completed in 1.861s at Thu Dec 11 2014 10:22:28 GMT+0300 (MSK) - Waiting...OK
>> File "css/normalize.css" changed.
>> File "css/production.css" changed.
>> File "css/production.min.css" changed.
Running "sass:dist" (sass) task
Весь файл Gruntfile.js:
//Стандартный экспорт модуля в nodejs
module.exports = function(grunt) {
// Инициализация конфига GruntJS
grunt.initConfig({
//Склеивание JS файлов
concat: {
dist: {
src: [
'js/vendor/jquery-2.1.1.min.js',
'js/vendor/modernizr-2.6.2.min.js',
'js/jquery.mousewheel.min.js',
'js/jquery.bxslider.min.js',
'js/plugins/jquery.easing.1.3.js',
'js/plugins/jquery.fitvids.js',
'js/jquery.fancybox.pack.js',
'js/main.js',
'js/plugins.js'
],
dest: 'js/build/production.js'
}
},
// Сжатие общего JS файла
uglify: {
build: {
src: 'js/build/production.js',
dest: 'js/build/production.min.js'
}
},
// SASS
sass: {
dist: {
files: {
'css/production.css' : 'scss/main.scss',
'css/normalize.css' : 'scss/normalize.scss'
}
}
},
// CSS Min
cssmin: {
combine: {
files: {
'css/production.min.css': [
'css/production.css',
'css/normalize.css',
'css/jquery.bxslider.css',
'css/jquery.fancybox.css'
]
}
}
},
watch: {
options: {
livereload: true,
},
scripts: {
files: ['js/*.js'],
tasks: ['concat', 'uglify'],
options: {
spawn: false
}
},
css: {
files: ['scss/*.scss','css/*.css',],
tasks: ['sass','cssmin'],
options: {
spawn: false
}
}
}
});
// Загрузка модулей, которые предварительно установлены
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-sass');
grunt.loadNpmTasks('grunt-contrib-cssmin');
grunt.loadNpmTasks('grunt-contrib-watch');
// Эти задания будут выполнятся сразу же когда вы в консоли напечатание grunt, и нажмете Enter
grunt.registerTask('default', ['concat', 'uglify', 'sass', 'cssmin', 'watch']);
};