Grunt SCSS - Не перезагружается

Я пытаюсь добиться плавного рабочего процесса.

моя проблема:

Мои модификации JS отображаются и минимизируются, и перезагрузка в реальном времени работает нормально. Когда я вношу изменения в свои файлы SCSS, они не запускаются командой запуска:

grunt

или плагин grunt:

grunt watch

Он работает только тогда, когда я вызываю:

grunt sass

Это был вывод из окна консоли 'grunt sass':

Macintosh:grunt-test Neil$ grunt sass
Running "sass:dist" (sass) task
File "css/global.css" created.

Done, without errors.

Примечания:

Когда я запускаю «grunt watch» в файле sass, я заметил, что grunt запускает минимизацию javascript без всякой причины. Конечно, это должно вызываться при воздействии на этот файл или одну из его зависимостей?

Содержимое Gruntfile.js:

module.exports = function(grunt) {

// 1. All configuration goes here 
grunt.initConfig({

    pkg: grunt.file.readJSON('package.json'),

    watch: {
        options: {
            files: ['css/*.css'],
            livereload: true
        },

        css: {
            files: ['css/*.scss'],
            tasks: ['sass'],
            options: {
                spawn: false,
            }
        },

        scripts: {
            files: ['js/*.js', 'scss/*.scss'],
            tasks: ['concat', 'uglify'],
            options: {
                spawn: false,
            }
        }
    },

    sass: {
        dist: {
            options: {
                style: 'compressed'
            },

            expand: true,
            cwd: 'scss/',
            src: ['*.scss'],
            dest: 'css/',
            ext: '.css'
        }
    },

    concat: {
        // 2. Configuration for concatinating files goes here.

        dist: {
            src: [
                'js/libs/*.js', // All JS in the libs folder
                'js/global.js'  // This specific file
            ],
            dest: 'js/build/production.js',
        }
    },

    uglify: {
        build: {
            src: 'js/build/production.js',
            dest: 'js/build/production.min.js'
        }
    },

    imagemin: {
        dynamic: {
            files: [{
                expand: true,
                cwd: 'images-lossy/',
                src: ['**/*.{png,jpg,gif}'],
                dest: 'images/'
            }]
        },

        png: {
            options: {
                optimizationLevel: 7
            }
        },

        jpg: {
            options: {
                progressive: true
            }
        }
    }
});

// 3. Where we tell Grunt we plan to use this plug-in.

// CONCATENATION PLUGIN
grunt.loadNpmTasks('grunt-contrib-concat');
// MINIFY PLUGIN
grunt.loadNpmTasks('grunt-contrib-uglify');
// IMG CRUSH PLUGIN
grunt.loadNpmTasks('grunt-contrib-imagemin');
// GRUNT WATCH PLUGIN
grunt.loadNpmTasks('grunt-contrib-watch');
// SASS LIBARY PLUGIN
grunt.loadNpmTasks('grunt-contrib-sass');

// 4. Where we tell Grunt what to do when we type "grunt" into the terminal.
grunt.registerTask('default', ['sass','concat', 'uglify', 'imagemin', 'watch']);

};

Я надеюсь, что приведенная выше информация поможет. Раньше я использовал Codekit, и это действительно отличное приложение. Я хочу перейти на grunt, но, возможно, мой файл конфигурации неверен, я близок.

Любая помощь будет принята с благодарностью.

  • Нил

person Neil    schedule 05.01.2014    source источник


Ответы (1)


Похоже, что обе ваши проблемы возникают в конфигурации watch.

Во-первых, причина, по которой задача SASS не работает во время наблюдения, заключается в том, что запись files указывает на неправильное местоположение. Ваша текущая запись файлов указывает на папку «css», но она должна указывать на папку «scss», в соответствии с тем, что вы указали в фактической задаче «sass». Другими словами, ваша запись должна быть: files: ['scss/*.scss'].

css: {
  files: ['scss/*.scss'],
  tasks: ['sass'],
  options: {
    spawn: false,
  }
}

Во-вторых, минимизация JavaScript происходит во время просмотра всякий раз, когда изменяется файл SASS, потому что он указан здесь:

scripts: {
  files: ['js/*.js', 'scss/*.scss'], // <-- scss is covered here
  tasks: ['concat', 'uglify'],
  options: {
    spawn: false,
  }
}

Вместо этого измените его на files: ['js/*.js'],, чтобы задача наблюдения запускалась только для файлов JavaScript.

После того, как вы решите эти проблемы, если все немного работает, вы можете расширить шаблоны, чтобы они охватывали все файлы в подкаталогах для вашего JavaScript, CSS, SASS и т. д. Например, js/*.js включает все .js файлы в папке js, в то время как js/**/*.js охватывает папку js и ее подпапки. Вы можете прочитать больше в документации GruntJS "шаблоны подстановки".

РЕДАКТИРОВАТЬ: вот как должен выглядеть обновленный watch...

watch: {
    options: {
        livereload: true
    },

    // css is really for Sass
    css: {
        files: ['scss/*.scss'],
        tasks: ['sass'],
        options: {
            spawn: false,
        }
    },
    // scripts will detect js changes
    scripts: {
        files: ['js/**/*.js'],
        tasks: ['jshint', 'concat', 'uglify'],
        options: {
            spawn: false,
        }
    }
},

Как уже упоминалось, для ваших индивидуальных задач может потребоваться использование шаблона **, подобного тому, что я сделал с записью «скрипты» выше: js/**/*.js

person Ahmad Mageed    schedule 06.01.2014
comment
Спасибо, теперь отлично работает. Я предполагаю, что если я добавлю jshint в задачу. Он будет работать только на js или будет применяться к чему-либо в файлах: [...]? - person Neil; 06.01.2014
comment
@Neil, если вы поместите его в задачи scripts, он будет вызван изменениями js. Теперь то, к чему это относится, определяется тем, как вы настроили задачу jshint вне часов, обычно это те же файлы js, за исключением ваших сторонних библиотек, таких как jQuery и т. д. Я полагаю, у вас будет tasks: ['jshint','concat', 'uglify'] - person Ahmad Mageed; 06.01.2014
comment
Итак, если бы я хотел сосредоточиться на SCSS и не дать grunt загружать JS (задачи выше), что бы я сделал. Я не понимаю, почему я должен редактировать файлы SCSS и перезагружать задачи JS из grunt. Спасибо за ответ - person Neil; 06.01.2014
comment
@Neil Я согласен с тем, что ваши файлы Sass не должны участвовать или запускать задачу JS. Кажется, я рассмотрел это во втором пункте выше, где я указал, что шаблон файлов Sass является частью раздела файлов сценариев. Этого не должно быть. Это не отвечало вашим потребностям или я неправильно понимаю ваш вопрос? Скрипты должны учитывать только расширения .js, и на них не будут влиять изменения Sass. - person Ahmad Mageed; 06.01.2014
comment
Я вижу, где я ошибаюсь, и что задача относится к файлам. Это был здравый смысл. Мне не хватало этого внимания поздней ночью, ха. Однако у меня мало указаний, чтобы завершить эту проблему. Придется ли мне создавать блок, аналогичный сценариям, но называть его scss и имитировать соответствующие свойства? - person Neil; 06.01.2014
comment
@Neil Я обновил свой ответ, указав, как должно выглядеть watch. Если это не то, что вам нужно, уточните и обновите свой вопрос с помощью вашей текущей обновленной конфигурации (с комментариями), чтобы я мог понять, в чем проблема. - person Ahmad Mageed; 08.01.2014
comment
Я обновил код, и он работает как сон. Теперь я знаком с правильной компиляцией независимых скриптов. Мне было интересно, как загрузить компас в gruntfile. Установка в нижнем колонтитуле была легкой. Однако во время настройки происходит сбой, заметки очень слабые - ryanchristiani.com/ добавить-компас-к-своему-ворчанию-задаче. Я использовал этот плагин (github.com/gruntjs/grunt-contrib-compass) . - person Neil; 09.01.2014