Как подключить компоненты sower с sails.js?

Ответ 1

В Sails 0.10 каталог "assets/linker" больше не существует, однако я нашел преимущество в простом решении, которое дает некоторую автоматизацию рабочего процесса компоновщика bower → asset, а также позволяет определенному контролю над тем, что именно получается.

Решение добавляет grunt-bower к вашей задаче Sails.js compileAssets

grunt.registerTask('compileAssets', [
    'clean:dev',
    'bower:dev',
    'jst:dev',
    'less:dev',
    'copy:dev',
    'coffee:dev'
]);

Затем сконфигурируйте свою задачу grunt-bower так (как tasks/config/bower.js):

module.exports = function(grunt) {
  grunt.config.set('bower', {
    dev: {
        dest: '.tmp/public',
        js_dest: '.tmp/public/js',
        css_dest: '.tmp/public/styles'
    }
  });

  grunt.loadNpmTasks('grunt-bower');

};

Это автоматически скопирует ваши jower файлы gars и css в подходящее место для компоновщика ресурса Sail для поиска и автоматического добавления в шаблон макета проекта. Любые другие файлы js или css будут автоматически добавляться после ваших файлов bower.

Однако это еще не серебряная пуля, так как у этой установки есть 2 больших оговорки:

1 - Файлы, добавленные через bower-grunt, должны быть перечислены в массиве bower.json main. Если вы видите, что файл не загружается, вы ожидаете, что вы должны либо отредактировать этот пакет. Файл bower.json, либо добавить зависимость вручную с помощью параметров grunt-bower packageSpecific.

2 - порядок файлов bower в компоновщике активов в настоящее время является алфавитным. Мое единственное средство, чтобы настроить этот порядок до сих пор, требует дополнительной задачи для руткинга, чтобы вручную переупорядочить файлы до остальной части задачи Sail compileAssets. Однако я уверен, что есть что-то, что grunt-bower может сделать поддерживая порядок копирования пакетов.

Ответ 2

Примечание. Следующий ответ больше не относится к текущей версии SailsJS, потому что нет поддержки для папки компоновщика с SailsJS 0.10.

Смотрите: Паруса не генерируют компоновщик

Оригинальный ответ:

Я смог найти решение для этого, что на самом деле довольно просто. Я не понял, что вы можете настроить, где bower помещает его файлы.

Создайте файл .bowerrc и измените каталог, в котором установлены компоненты bower, в случае Sailjs их следует поместить в папку с ресурсами.

/*
 * Create a file called .bowerrc and put the following in it.
 * This file should be in the root directory of the sails app.
 */

 {
   "directory": "assets/linker/bower_components"
 }

Затем Sails будет использовать grunt для копирования их в папку .tmp/public/assets всякий раз, когда файл изменяется. Если вы не хотите, чтобы паруса постоянно удалялись, а затем возвращали эти файлы, вы можете исключить их из файла grunt.

/* 
 * This is not necessary, but if you have a lot of components and don't want
 * them constantly being deleted and copied at every file change you can update
 * your Gruntfile.js with the below.
 */

 clean: {
   dev: ['.tmp/public/**',
         '!.tmp/public',
         '!.tmp/public/bower_components/**'],
   build: ['www']
 },

Один совет по использованию requirejs с парусами. По умолчанию вы получите сообщение об ошибке из файла socket.io, так как паруса загружают его без использования requirejs. Это вызовет ошибку, так как socket.io поддерживает загрузку стиля amd, подробнее здесь http://requirejs.org/docs/errors.html#mismatch.

Самый простой способ исправить это - просто прокомментировать строки рядом с коннектором socket.io.js.

/*
 * Comment the below out in the file assets/js/socket.io.js, if using requirejs
 * and you don't want to modify the default sails setup or socket.io.
 */

 if (typeof define === "function" && define.amd) {
   define([], function () { return io; });
 }

Другим способом было бы перекодировать файлы парусов в активах /js с именем "socket.io.js", "sails.io.js" и app.js, чтобы быть amd-модулями.

Ответ 3

Самый простой способ добиться этого - просто добавить отдельные компоненты Bower в ваш файл tasks/pipeline.js. Например, здесь, как вы могли бы добавить Modernizr:

// Client-side javascript files to inject in order
// (uses Grunt-style wildcard/glob/splat expressions)
var jsFilesToInject = [

  // Load sails.io before everything else
  'js/dependencies/sails.io.js',

  // Dependencies like jQuery, or Angular are brought in here
  'js/dependencies/**/*.js',

  // =========================================================
  // Modernizr:
  'bower_components/modernizr/modernizr.js',
  // =========================================================

  // All of the rest of your client-side js files
  // will be injected here in no particular order.
  'js/**/*.js'
];

Ссылка на bower_components/modernizr/modernizr.js затем добавляется в заполнитель <!--SCRIPTS--> в ваш шаблон макета, и он также получает minified и т.д. при запуске sails lift --prod.

Ответ 4

Извините, что опоздал.

Я думаю, что bower_components в компоновщике это плохая идея, потому что когда вы поднимете паруса, все в ней будет скопировано в .tmp и будет включено в теги. Например, если у вас есть Angular с беседкой, у вас будет два включения в script: один для angular.js и один для angular.min.js. И то, и другое является ошибкой.

Вот мое решение по моим проектам:

• Я создал папку bower_component в моем корневом каталоге.

• Я добавил эту строку в мой Gruntfile.js в файлах массива в копии: dev

  {'.tmp/public/linker/js/angular.js': './bower_components/ angular/angular.js'}

И для каждого файла, который я хочу включить, мне нужно вручную добавить новую строку в этот массив. Я не нашел другого автоматического решения. Если кто-то найдет лучшее решение...;)

Ответ 5

Существует несколько подходов к подключению SailsJS и Bower.

Пакет для SailsJS, который интегрирует Bower через настраиваемый генератор, существует здесь: https://www.npmjs.com/package/sails-generate-bower

Есть и один для Gulp.