2015-02-15 2 views
2

Я настраиваю свой gruntfile.js для нового проекта WordPress, в котором я буду использовать LESS для управления CSS.Как добавить разрыв строки после баннера внутри Grunt LESS параметры задачи

Что я пытаюсь сделать здесь, это добавить типичный список сведений о теме, которую вы можете увидеть в верхней части каждого файла style.css в теме WordPress. Это код, я использую для МЕНЬШЕ задачи:

less: { 
 
    development: { 
 
    options: { 
 
     compress: true, 
 
     banner: '/*!\n' + 
 
     'Theme Name: <%= pkg.name %>\n' + 
 
     'Theme URI: <%= pkg.url %>\n' + 
 
     'Author: <%= pkg.author.name %>\n' + 
 
     'Author URI: <%= pkg.author.website %>\n' + 
 
     'Description: <%= pkg.description %>\n' + 
 
     'Version: <%= pkg.version %>\n' + 
 
     '*/' + 
 
     '\n' 
 
    }, 
 
    files: { 
 
     'css/myfile-build.min.css': 'less/myfile.less' 
 
    } 
 
    } 
 
}

С кодом выше я могу получить этот результат:

/*! 
 
Theme Name: nameofthewptheme 
 
Theme URI: # 
 
Author: Vincenzo Coppolecchia 
 
Author URI: # 
 
Description: Description for the theme goes here. 
 
Version: 0.1.0 
 
*/@font-face{...}...

проблема

Как вы можете видеть, есть две (небольшие) проблемы:

  1. сразу после тега закрытия комментария У меня есть мой CSS, поэтому я думаю, что последний разрыв строки вообще не рассматривается;
  2. В начале комментария есть восклицательный знак (!).

Любая помощь будет очень признательна.

+0

Что-нибудь новое, так как вы задали этот вопрос? – Oliboy50

+1

@ Oliboy50 Нет, еще нет. – vcoppolecchia

+0

@ Oliboy50 Вот так я решил это! – vcoppolecchia

ответ

2

Как я решил эту

мне удалось решить эту проблему сам по-другому, используя другую задачу Grunt называется grunt-banner: по существу, все это делает задачу добавляет баннеры, именно то, что мне было нужно.

Внутри моего Gruntfile.js файла, где меньше задача определена я извлекал вариант баннера

less: { 
 
    development: { 
 
    options: { 
 
     compress: true 
 
    }, 
 
    files: { 
 
     'css/myfile-build.min.css': 'less/myfile.less' 
 
    } 
 
    } 
 
}

и вместо этого я использовал задачу упомянутую выше таким образом:

banner: '/*!\n' + 
 
     'Theme Name: <%= pkg.name %>\n' + 
 
     'Theme URI: <%= pkg.url %>\n' + 
 
     'Author: <%= pkg.author.name %>\n' + 
 
     'Author URI: <%= pkg.author.website %>\n' + 
 
     'Description: <%= pkg.description %>\n' + 
 
     'Version: <%= pkg.version %>\n' + 
 
     '*/', 
 
usebanner: { 
 
    taskName: { 
 
     options: { 
 
      position: 'top', 
 
      banner: '<%= banner %>', 
 
      linebreak: true 
 
      }, 
 
     files: { 
 
      src: 'global.min.css' 
 
     } 
 
    } 
 
}

Опция используется

  • position это устанавливает положение, в котором вы хотите, чтобы ваш кусок комментариев.
  • banner Это, конечно же, место, где вы добавляете содержимое своего баннера.
  • linebreak здесь вы добавляете разрыв строки между контентом и баннером.

Мои конечные (личные) соображения

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