Рабочая структура проекта, которая использует grunt.js для объединения файлов JavaScript с использованием RequireJS?

У меня есть несколько проектов, которые используют RequireJS для загрузки отдельных модулей JavaScript в браузере, но я еще не оптимизировал их. Как в разработке, так и в производстве приложение делает отдельный запрос для каждого файла JavaScript, и теперь я хотел бы исправить это с помощью Grunt.

Я попытался собрать простую структуру проекта безрезультатно, поэтому мне интересно, может ли кто-нибудь предоставить мне рабочий пример. Мои цели заключаются в следующем:

  • В режиме разработки все работает в браузере, выдавая отдельный запрос для каждого требуемого модуля. В режиме разработки не требуются задания или конкатенации.
  • Когда я буду готов, я могу запустить задачу grunt, чтобы оптимизировать (объединить) все файлы JavaScript с помощью r.js и проверить это локально. Как только я убежден, что оптимизированное приложение работает правильно, я могу его развернуть.

Вот пример структуры для этой беседы:

grunt-requirejs-example/
  grunt.js
  main.js (application entry point)
  index.html (references main.js)
  lib/ (stuff that main.js depends on)
    a.js
    b.js
    requirejs/
      require.js
      text.js
  build/ (optimized app goes here)
  node_modules/ (necessary grunt tasks live here)

В частности, я ищу структуру проекта рабочая, с которой я могу начать. Мои главные вопросы:

  • Если эта структура проекта ошибочна, что вы рекомендуете?
  • Что именно должно быть в моем файле grunt.js, особенно для работы оптимизатора r.js?
  • Если все это не стоит, и есть способ использовать задачу grunt watch, чтобы автоматически создавать все в режиме разработки каждый раз, когда я сохраняю файл, тогда я все уши. Я хочу избежать всего, что замедляет цикл от внесения изменений, чтобы увидеть его в браузере.

Ответы

Ответ 1

Я использую задачу grunt-contrib-requirejs для создания проекта на основе require.js. Установите его в каталог проекта с помощью

npm install grunt-contrib-requirejs --save-dev

BTW: --save-dev добавит пакет к вашим зависимостям разработки в вашем пакете. json. Если вы не используете package.json в своем проекте, проигнорируйте его.

Загрузите задачу в файл grunt с помощью

grunt.loadNpmTasks('grunt-contrib-requirejs');

И добавьте конфигурацию в свой файл grunt.initConfig

requirejs: {
  production: {
    options: {
      baseUrl: "path/to/base",
      mainConfigFile: "path/to/config.js",
      out: "path/to/optimized.js"
    }
  }
}

Теперь вы можете создать свой материал require.js в один файл, который будет сведен к минимуму с помощью uglifyjs, запустив grunt requirejs

Вы можете связать набор различных задач с какой-то основной задачей, добавив это в свой файл grunt

grunt.registerTask('default', ['lint', 'requirejs']);

С помощью этого можно просто ввести grunt, и grunt автоматически выполнит задание по умолчанию с двумя "подзадачами": lint и requirejs.

Если вам нужна специальная производственная задача: определите ее как указано выше

grunt.registerTask('production', ['lint', 'requirejs', 'less', 'copy']);

и запустите его с помощью

grunt production

Если вам нужно различное поведение для "производства" и "развития" внутри задачи, то есть задачи requirejs, вы можете использовать так называемые цели. В приведенном выше примере конфигурации он уже определен как production. Вы можете добавить еще одну цель, если вам нужно (BTW, вы можете определить глобальную конфигурацию для всех целей, добавив объект опций на один уровень)

requirejs: {
  // global config
  options: {
    baseUrl: "path/to/base",
    mainConfigFile: "path/to/config.js"
  },
  production: {
    // overwrites the default config above
    options: {
      out: "path/to/production.js"
    }
  },
  development: {
    // overwrites the default config above
    options: {
      out: "path/to/development.js",
      optimize: none // no minification
    }
  }
}

Теперь вы можете запускать их оба одновременно с grunt requirejs или индивидуально с помощью grunt requirejs:production, или вы определяете их в разных задачах с помощью:

grunt.registerTask('production', ['lint', 'requirejs:production']);
grunt.registerTask('development', ['lint', 'requirejs:development']);

Теперь, чтобы ответить на ваши вопросы:

  • Я бы определенно использовал подпапку в вашем проекте. В моем случае я использую папку "src" для разработки, которая встроена в папку "htdocs" для производства. Предпочитаемый вариант проекта:

    project/
  src/
    js/
      libs/
        jquery.js
        ...
      appname/
        a.js
        b.js
        ...
      main.js // require.js starter
    index.html
    ...
  build/
    ... //some tmp folder for the build process
  htdocs/
    ... // production build
  node_modules/
    ...
  .gitignore
  grunt.js
  package.json

  • см. выше

  • Вы можете сделать это, но я бы не рекомендовал добавлять requirejs в задачу просмотра, это ресурсная голодная задача, и это замедлит работу вашего компьютера.

И последнее, но не менее важное: будьте очень осторожны, когда играете с r.js. Особенно, если вы хотите оптимизировать весь проект с помощью r.js, добавив директиву modules в свою конфигурацию. R.js удалит выходной каталог без запроса. Если произойдет случайное конфигурирование вашего системного корня, r.js удалит ваш жесткий диск. Будьте осторожны, я полностью удалил всю свою папку htdocs некоторое время назад при настройке моей задачи grunt... Всегда добавляйте keepBuildDir:true к своим параметрам при игре с конфигурацией r.js.