Как правильно подключить ресурсы?

Общие вопросы по использованию второй версии фреймворка. Если не знаете как что-то сделать и это про Yii 2, вам сюда.
Ответить
slo_nik
Сообщения: 344
Зарегистрирован: 2013.10.07, 19:08

Как правильно подключить ресурсы?

Сообщение slo_nik »

Возникла проблема с переносом сайта с yii1 на yii2, никак не получается подключить js-скрипы.
Сначала я сделал как обычно, в файл c классом, унаследованным от AssetBundle, прописал все скрипты и стили, которые я нашёл на странице. Смотрел просто через исходный код.
Попробовал запустить - стили подключились, а вот скрипты никак не хотят подключаться. Не работает ни fancybox, ни карусель(cycle2).
Примечательно то, что в старом сайте для этих плагинов ничего не подключается. Начал искать. Нашёл директорию "dev", где был файл Gruntfile.js и куча директорий, где были и js, и css, и scss и тому подобное.
С Grunt я никогда не работал. Почитал документацию и понял, если я не ошибаюсь, что grunt помогает объединить нужные скрипты и минимизировать и достаточно будет подключить сгенерированные файлы.
На сайте есть ещё отдельная директория с js скриптами, которые подключаются на странице. Если её удалить/переименовать, то на старом сайте тоже ничего не работает. Значит через эти скрипты должно всё подключаться. Открыл один из js файлов, через поиск в файле нашёл упоминание и fancybox и карусели, получается, что достаточно подключить их и всё должно работать. Но так и не смог ничего подключить.
Пробовал в новом проекте подключить Grunt(https://yii2-cookbook.readthedocs.io/st ... ith-grunt/), но опять же, стили поключаются, а js не хочет работать. При этом накидало в проект кучу плагинов, которые мне не нужны.
Подскажите, как решить проблему?

P.S. Пробовал перенести директорию dev вместе с файлом Gruntfile.js и кучей остальных в новый проект. Менял пути к файлам и директориям в Gruntfile.js, но положительного результата так и не добился.
Содержимое Grunfile.js

Код: Выделить всё

// Обязательная обёртка
module.exports = function(grunt) {

  // Конфигурация
  grunt.initConfig({
    // Пути к файлам и папкам
    configDir: 'config',

    sassDir: 'sass',
    sassFiles: '<%= sassDir %>' + '/main.scss',
    cssDir: '../css',

    jsSourceFiles: 'js/*.js',
    jsSourcePlugins: [
      'js/plugins/*.js',
      'js/plugins/helpers/*.js',
    ],
    jsResultFile: '../js/scripts.js',

    imgDir: '../img',
    imgBaseFiles: '<%= imgDir %>' + '/base64/*.{png,jpg,gif}',

    // Pagespeed options
    pageUrl: 'https://developers.google.com',
    pageThreshold: 70,
    pageDevice: 'desktop'
  });

  // Загрузка конфигурации к задачам из отдельных файлов
  grunt.loadTasks('tasks');

  // Задача по умолчанию
  grunt.registerTask('default', ['datauri', 'datauriMobile', 'compass', 'csslint', 'autoprefixer', 'cssmin', 'jshint', 'concat', 'uglify']);
  grunt.registerTask('dev',     ['compass', 'csslint', 'autoprefixer', 'jshint', 'concat']);
  grunt.registerTask('comb',    ['compass', 'csslint', 'autoprefixer', 'cssmin', 'csscomb']);
  grunt.registerTask('test',    ['dalek']);
  grunt.registerTask('speed',   ['pagespeed']);
};
Аватара пользователя
Dominus
Сообщения: 892
Зарегистрирован: 2013.03.14, 21:27
Откуда: Россия, Иваново
Контактная информация:

Re: Как правильно подключить ресурсы?

Сообщение Dominus »

Пример подключения SweetAlert

Создаём SweetAlertAsset.php в папке приложения в данном случае в common/assets

Код: Выделить всё

<?php
namespace common\assets;

/**
 * Class SweetAlertAsset
 * @package common\assets
 */
class SweetAlertAsset extends \yii\web\AssetBundle
{
    public $sourcePath = '@bower/sweetalert2'; //расположение папки с ресурсами, в данном случае /vendor/bower/sweetalert2 она и будет публиковаться в app/web/assets

    public $css = [];
    public $js = [];

    public function init()
    {
        $min = YII_ENV_DEV ? '' : '.min'; // Если prod то подключаем сжатые файлы иначе обычные
        $this->css[] = 'dist/sweetalert2' . $min . '.css'; // пути относительно $sourcePath
        $this->js[] = 'dist/sweetalert2' . $min . '.js';    
    }
   // Подключаем нужные библиотеки до подключения SweetAlert
    public $depends = [
        'yii\web\JqueryAsset',
    ];
}
в view регистрируем:

Код: Выделить всё

use common\assets\SweetAlertAsset;

SweetAlertAsset::register($this);
по такому же принципу подключается и FancyBox
Последний раз редактировалось Dominus 2017.08.17, 18:33, всего редактировалось 2 раза.
Не спорь с дураком, иначе окружающие не правильно поймут кто из вас дурак!
slo_nik
Сообщения: 344
Зарегистрирован: 2013.10.07, 19:08

Re: Как правильно подключить ресурсы?

Сообщение slo_nik »

Dominus писал(а): 2017.08.17, 18:19 Пример подключения SweetAlert

Создаём SweetAlertAsset.php в папке приложения в данном случае в common/assetrs

по такому же принципу подключается и FancyBox
В начале своего вопроса я писал:
Сначала я сделал как обычно, в файл c классом, унаследованным от AssetBundle, прописал все скрипты и стили, которые я нашёл на странице. Смотрел просто через исходный код.
Я думаю, что проблема в Gruntfile.js. Но я никогда не пользовался этим способом. Поэтому и возник вопрос, достаточно ли просто перенести файлы в новый проект или надо устанавливать grunt?
Напрямую fancybox, например, не подключается на старом сайте, а есть файл scripts.js, в котором упомянут этот плагин, и не только. Но почему не работает, когда я подключил файл - не знаю.
Аватара пользователя
Dominus
Сообщения: 892
Зарегистрирован: 2013.03.14, 21:27
Откуда: Россия, Иваново
Контактная информация:

Re: Как правильно подключить ресурсы?

Сообщение Dominus »

С Grunt-ом тоже не работал, но на хабре нашел статью, Делаем жизнь проще, GruntJS (для новичков) посмотрите, может что и прояснится.
И вот еще из рецептов Yii2 Asset processing with Grunt
Не спорь с дураком, иначе окружающие не правильно поймут кто из вас дурак!
slo_nik
Сообщения: 344
Зарегистрирован: 2013.10.07, 19:08

Re: Как правильно подключить ресурсы?

Сообщение slo_nik »

Dominus писал(а): 2017.08.17, 19:17 С Grunt-ом тоже не работал, но на хабре нашел статью, Делаем жизнь проще, GruntJS (для новичков) посмотрите, может что и прояснится.
И вот еще из рецептов Yii2 Asset processing with Grunt
Всё решилось. Удалил и заново поставил дизайн, всё работает.
Ответить