2016-11-26 18 views
2

У меня есть веб-приложение, чья структура каталогов выглядит следующим образом:Как GruntJS может просматривать все файлы, но обрабатывать только те, которые меняются?

src/ 
- styles/ 
    - a.css 
    - b.css 
    - c.scss 
    - d.scss 
- media/ 
    - d.jpg 
    - e.png 
    - f.mpf 
dest/ 
- css/ 
- media/ 
package.json 
Gruntfile.js 

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

Я родом из мира C++ и make-файлов. Они были великолепны, потому что для каждого производного файла вы должны указать команду для его получения, а файлы, на которые этот вывод был напрямую зависим. Если какой-либо из файлов зависимостей был более новым, чем целевой, ваша команда будет запущена. Если какой-либо из файлов зависимостей отсутствовал, то он будет сгенерирован на основе этой же рекурсивной логики.

Как я могу достичь такого же результата здесь, в Grunt? Указание часов позволяет вам просматривать несколько файлов для изменений. Но тогда выполняемая вами команда обычно не зависит от измененного файла.

My Gruntfile is here. Пожалуйста, покажите мне, как я могу изменить его реализовать следующие 3 правила:

  • Когда любой файл SRC/стили/.scss изменения, скомпилировать его с Sass и поместить результат в Dest/CSS/ .css. Затем уменьшите его до dest/css/*. Min.css
  • Когда любой файл src/styles/.css изменяет, скопируйте его в dest/css/ .css. Тогда преуменьшать его Dest/CSS/*. Min.css
  • Когда любой файл SRC/СМИ/* изменения, скопируйте его в Dest/СМИ/*

Я хочу, чтобы эти правила, чтобы быть универсальным. IE: Я не хочу писать отдельные правила для b.scss и d.scss. Кажется глупым, чтобы явно указать одинаковые правила для каждого отдельного файла.

+0

все значения под объектом 'watch: {/ * ... * /}' являются объектами конфигурации, которые будут выполняться на 'grunt watch', и они задают набор задач для запуска, когда заданный набор е меняется. –

+0

Да, Уильям. Но как я могу это сказать: * когда изменяется файл c.scss, запустите sass только на c.scss, затем поместите полученный файл .css в dest/css/c.css. Затем minfiy dest/css/c.css только в dest/css/c.min.css *? –

+0

укажите c.scss в свойстве 'files' –

ответ

0

Вам нужно добавить модуль grunt-concurrent запустить Mutiple экземпляр часов:

concurrent: { 
dev: { 
    tasks: [ 
    'watch:sass:12340', 
    'watch:copy_css:12350', 
    ], 
    options: { 
    logConcurrentOutput: true 
    } 
    } 
} 
grunt.loadNpmTasks('grunt-concurrent'); 

и я думаю, что я буду редактировать раздел часов таким образом:

watch: { 
    sass: { 
     files: ['src/css/*.scss'], 
     tasks: ['sass:all','cssmin'], 
     options: { 
      spawn: false 
     } 
    }, 
    copy_css: { 
     files: 'src/css/*.css', 
     tasks: ['copy:all','cssmin'], 
     options: { 
      spawn: false 
     } 
    }, 
    copy_media: { 
    files: 'src/media/**', 
    tasks: ['copy'] 
    } 
} 

чем запустить grunt concurrent:dev