2015-04-12 5 views
1

Я новичок в Grunt.js. Я работаю над микропроектом, целью которого является создание одного файла .html, который очень портативен без каких-либо внешних зависимостей. Он будет иметь CSS и Javascript внутри HTML-документа, но я хотел бы работать над проектом с внешними файлами sass и js, используя при этом grunt-задачи для сборки финального файла .html с каждым изменением.Задача Grunt Watch повторяет шаги без необходимости

В результате я просматриваю все изменения файла scss, js и html. Когда любые изменения файла Мне нужно перестроить html-файл (также используя grunt-includes). Это все работает сейчас, технически. Но, похоже, некоторые задачи повторяются. Я вне пределов моей лиги, читаю это точно, поэтому меня интересуют:

  1. Есть ли способ избежать нескольких проходов по тем же задачам?
  2. С этим моим первым пропуском в задаче задания grunt, есть ли что-либо полностью в обратном порядке в моем коде, насколько вы можете сказать (с удовольствием предоставляем больше информации по мере необходимости)?

Мои grunt.js содержимое файла:

module.exports = function(grunt) { 
    "use strict"; 
    require("matchdep").filterDev("grunt-*").forEach(grunt.loadNpmTasks); 

    grunt.initConfig({ 
     pkg: grunt.file.readJSON('package.json'), 
     includes: { 
      files: { 
       src: ['build/*.html','build/*.css','build/*.js'], 
       dest: './', 
       flatten: true, 
       cwd: '.', 
       options: { 
        silent: true, 
        includePath: 'build/includes' 
       } 
      } 
     }, 
     concat: { 
      fields: { 
       src: ['build/fieldTypes/*.html'], 
       dest: 'build/includes/fieldTypes.inc.html', 
       options: { 
        separator: '\n\n\t<hr/>\n\n\n' 
       } 
      }, 
      js: { 
       src: ['build/js/ga.js', 'build/js/core.js'], 
       dest: 'build/includes/scripts.inc.js', 
       options: { 
        separator: '\n\n' 
       } 
      }, 
     }, 
     sass: { 
      options: { 
       style: 'compressed', 
       sourcemap: 'none' 
      }, 
      dist: { 
       files: [{ 
        expand: true, 
        flatten: true, 
        src: 'build/sass/styles.scss', 
        dest: 'build/includes/', 
        ext: '.inc.css' 
       }] 
      } 
     }, 
     watch: { 
      css: { 
       files: 'build/**/*.scss', 
       tasks: ['sass', 'includes'] 
      }, 
      js: { 
       files: 'build/**/*.js', 
       tasks: ['concat', 'includes'] 
      }, 
      html: { 
       files: 'build/**/*.html', 
       tasks: ['concat','includes'] 
      } 
     } 
    }); 

    grunt.registerTask('default',['watch']); 
}; 

Бревно после изменения:

Running "watch" task 
Waiting... 
>> File "build/fieldTypes/Dropdown.html" changed. 
Running "concat:fields" (concat) task 
File "build/includes/fieldTypes.inc.html" created. 

Running "concat:js" (concat) task 
File "build/includes/scripts.inc.js" created. 

Running "includes:files" (includes) task 

Done, without errors. 
Completed in 0.631s at Sun Apr 12 2015 09:54:20 GMT-0400 (EDT) - Waiting... 
>> File "build/includes/fieldTypes.inc.html" changed. 
>> File "build/includes/scripts.inc.js" changed. 
Running "concat:fields" (concat) task 
File "build/includes/fieldTypes.inc.html" created. 

Running "concat:js" (concat) task 
File "build/includes/scripts.inc.js" created. 

Running "includes:files" (includes) task 

Done, without errors. 
Running "concat:fields" (concat) task 
File "build/includes/fieldTypes.inc.html" created. 

Running "concat:js" (concat) task 
File "build/includes/scripts.inc.js" created. 

Running "includes:files" (includes) task 

Done, without errors. 
Completed in 2.022s at Sun Apr 12 2015 09:54:22 GMT-0400 (EDT) - Waiting... 
>> File "build/includes/fieldTypes.inc.html" changed. 
>> File "build/includes/scripts.inc.js" changed. 
Running "concat:fields" (concat) task 
File "build/includes/fieldTypes.inc.html" created. 

Running "concat:js" (concat) task 
File "build/includes/scripts.inc.js" created. 

Running "includes:files" (includes) task 

Done, without errors. 
Running "concat:fields" (concat) task 
File "build/includes/fieldTypes.inc.html" created. 

Running "concat:js" (concat) task 
File "build/includes/scripts.inc.js" created. 

Running "includes:files" (includes) task 

Done, without errors. 
Completed in 2.111s at Sun Apr 12 2015 09:54:24 GMT-0400 (EDT) - Waiting... 

Я ценю время и помощь.

+0

Вопрос (1): Моя кишка говорит мне, что 'grunt watch 'просматривает * все * html-файлы **, включая конкатенационные/встроенные **. «Файлы» части задачи «смотреть» - это то, что вы, вероятно, захотите изменить. Кроме того, вопрос (2) не подходит для stackoverflow - он не является ответственным, как таковой. – rosshamish

+0

Спасибо @rosshamish. Ваш ответ ироничен, потому что 1) вы предоставляете возможный _answer_ и 2) предполагаете, что он не отвечает. :) Я буду экспериментировать с просмотренным файлом. Благодаря! –

+0

Ха-ха. Справедливо. Удачи! – rosshamish

ответ

1

Благодаря @rosshamish я нашел свое решение. Я неправильно просматривал файлы: слишком глобальный и недостаточно конкретный для выполняемых задач. Мой измененный файл grunt.js ограничил мой просмотр меньшим количеством файлов и выполнял только необходимые задачи после определенных изменений.

tl; dr: Я не был достаточно конкретным в согласовании файлов и выполнении задачи.

Часть проблемы заключалась в том, что я наблюдал за всеми файлами html, css и js во всей директории build, а не только с первичными файлами, которые мне нужно было посмотреть. Мое первое изменение было следующее:

includes: { 
    files: { 
     src: ['build/*.html','build/*.css','build/*.js'], 

в

includes: { 
    files: { 
     src: ['build/*.html'], 

В конце концов, у меня был только include "file.ext" блоки в .html файлах верхнего уровня каталога сборки. Сначала я преувеличивал.

Далее я уточнил другие задачи, указав правильное соответствие файлов. Наконец, я обновляю задачу watch с более конкретными триггерами.

оригинальный watch был следующим:

watch: { 
    css: { 
     files: 'build/**/*.scss', 
     tasks: ['sass', 'includes'] 
    }, 
    js: { 
     files: 'build/**/*.js', 
     tasks: ['concat', 'includes'] 
    }, 
    html: { 
     files: 'build/**/*.html', 
     tasks: ['concat','includes'] 
    } 
} 

И я обновил его на это:

watch: { 
    css: { 
     files: 'build/sass/*.scss', 
     tasks: ['sass', 'includes'] 
    }, 
    js: { 
     files: 'build/js/*.js', 
     tasks: ['concat:js', 'includes'] 
    }, 
    fieldTypes: { 
     files: 'build/fieldTypes/*.html', 
     tasks: ['concat:fields', 'includes'] 
    }, 
    core: { 
     files: 'build/*.html', 
     tasks: ['concat','includes'] 
    } 
} 

Итоговые grunt.js содержимое файла:

module.exports = function(grunt) { 
    "use strict"; 
    require("matchdep").filterDev("grunt-*").forEach(grunt.loadNpmTasks); 

    grunt.initConfig({ 
     pkg: grunt.file.readJSON('package.json'), 
     includes: { 
      files: { 
       src: ['build/*.html'], 
       dest: './', 
       flatten: true, 
       cwd: '.', 
       options: { 
        silent: true, 
        includePath: 'build/includes' 
       } 
      } 
     }, 
     concat: { 
      fields: { 
       src: ['build/fieldTypes/*.html'], 
       dest: 'build/includes/fieldTypes.inc.html', 
       options: { 
        separator: '\n\n\t<hr/>\n\n\n' 
       } 
      }, 
      js: { 
       src: ['build/js/ga.js', 'build/js/core.js'], 
       dest: 'build/includes/scripts.inc.js', 
       options: { 
        separator: '\n\n' 
       } 
      }, 
     }, 
     sass: { 
      options: { 
       style: 'compressed', 
       sourcemap: 'none' 
      }, 
      dist: { 
       files: [{ 
        expand: true, 
        flatten: true, 
        src: 'build/sass/styles.scss', 
        dest: 'build/includes/', 
        ext: '.inc.css' 
       }] 
      } 
     }, 
     watch: { 
      css: { 
       files: 'build/sass/*.scss', 
       tasks: ['sass', 'includes'] 
      }, 
      js: { 
       files: 'build/js/*.js', 
       tasks: ['concat:js', 'includes'] 
      }, 
      fieldTypes: { 
       files: 'build/fieldTypes/*.html', 
       tasks: ['concat:fields', 'includes'] 
      }, 
      core: { 
       files: 'build/*.html', 
       tasks: ['concat','includes'] 
      } 
     } 
    }); 

    grunt.registerTask('default',['watch']); 
};