Смотрите и компилируйте coffeescript в несколько папок и файлы javascript от поставщика в определенном порядке, а также организуйте шаблоны sass и html

Question

У меня есть структура каталогов, как это:

+ src
  |
  | - modules
  |   |
  |   | - auth
  |   |   |
  |   |   | - auth.coffee
  |   |   | - auth.sass
  |   |   | - login.html
  |   |   | - logout.html
  |   |
  |   | - navigation
  |   |   |
  |   |   | - navigation.coffee
  |   |   | - navigation.sass
  |   |   | - navbar.html
  |   |  
  | - scripts
  |   |
  |   | - vendor
  |   |   |
  |   |   | - underscore.js
  |   |   | - angular.js
  |   |
  |   | - app.coffee
  |   | - router.coffee
  |
  | - styles
  |   |
  |   | - config.sass
  |   | - style.sass

Я бы хотел:

1. Смотреть все .coffee, .sass а также .html файлы и выполните шаги 2 и 3, когда файл изменился

2. Скомпилируйте .coffee а также .sass файлы.

   Для обоих мне нужно указать зависимости (или: конкретный порядок).

   • CoffeeScript
     • компилировать scripts/vendor/underscore.js
     • затем scripts/vendor/angular.js
     • затем scripts/*.js
     • затем modules/**/*.js
   • SASS
     • компилировать styles/config.sass
     • затем styles/style.sass
     • затем modules/**/*.sass

3. Собрать все .js, .css а также .html файлы и организовать их для общей папки.

Это желаемый результат

+ public
  |
  | - partials
  |   |
  |   | - auth
  |   |   |
  |   |   | - login.html
  |   |   | - logout.html
  |   |
  |   | - navigation
  |   |   |
  |   |   | - navbar.html
  |   |  
  | - scripts
  |   |
  |   | - app.js
  |
  | - styles
  |   |
  |   | - app.css

Я перепробовал много инструментов, но не смог получить желаемый результат. Например, у Flour для Coffeescript были проблемы с подстановочными знаками в методах компиляции.

Я думаю, что лучше всего будет Cakefile, который сделает все для меня. Как я могу сделать это?

Answer 1

Во-первых, зачем компилировать подчеркивание или угловое? Просто ссылка на минимизированную версию на CDN. Возможно, вам удастся добиться более высокой производительности, упаковав их вместе с вашим приложением js, у меня нет четкого ответа "да" или "нет", вам придется исследовать.

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

  # Project configuration.
  grunt.initConfig
    watch:
      coffee:
        files: ['app/assets/src/coffee/**/*.coffee', 'app/assets/src/coffee/*.coffee', 'test/*.coffee', '!**/screencaps/**', 'app/webserver.coffee']
        tasks: ['coffee:dev', 'replace', 'mochaTest']

  grunt.loadNpmTasks("grunt-contrib-coffee")
  grunt.loadNpmTasks('grunt-contrib-watch')

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

1. Следите за изменениями в src/modules/*.coffee
2. Скомпилируйте (и при желании удалите) весь кофе в js, перейдите в public/scripts,
3. Сделайте то же самое для файлов SASS.