Jump to content
  • 0

Подходящие плагины для Grunt


FanAizu
 Share

Question

Посоветуйте, пожалуйста, пару grunt плагинов для следующих задач:
1) Имеется следующая файловая структура:

news/    red/        news/news.scss    blue/        news/news.scss    green/        news/news.scssapp/    app.scss    red/            blue/            green/

        

Нужен плагин, делающий следующее: плагину скармливаем список имеющихся тем. Затем этот плагин для каждой темы из списка запускает следующую операцию:
плагин берет файл app.scss, подгружает в него файл news.scss для текующей в цикле темы, затем компилирует результирующий scss файл и кладет получившийся css файл в папку текущей темы
из цикла. Таким образом один раз запустив этот плагин мы получим css файлы для всех тем:

app/    app.scss    red/        app.css    blue/        app.css    green/        app.css


2) Например, у меня есть стили

.news{    font-size:10px;    color:red;    border:1px red solid;}.news{    color:blue;    border-width:20px;}

Нужен плагин, делающий следующее: берет этот css файл и объединяет стили из одинаковых селекторов(в данном примере это селектор .news), то есть на выходе мы получаем:

.news{    font-size:10px;    color:blue;    border:20px red solid;}


3) Нужен плагин, делающий следующее: имеется следующая структура:

news/    news/        news.scss        news.png    menu/        menu.scss        menu.png

    
в файле news.scss следующие стили:

.news{    background: url(news.png);}

а в файле menu.scss следующие стили:

.menu{    background: url(menu.png);}


плагин берет изображения news.png и menu.png и объединяет их в один спрайт, а в файлах news.scss и menu.scss и заменяет фоновое изображение на изображение из спрайта и плюс
ещё и добавляет в свойство baclground позицию сдвига в спрайте, то есть получаем вот такие стили для news.scss:

.news{    background: url(sprite.png) 100px 20px;}



4) Нужен плагин, делающий следующее: имеет стили:

.news{    position:absolute;    top:0;    left:10px;    text-align:left;}

плагин берет эти стили и заменяет все зависящие от направления(rtl или ltr) свойства на противоположные, то есть, если это были ltr свойства, то станет rtl, например news получится
следующим:

.news{    position:absolute;    top:0;    right:10px;    text-align:right;}


Заранее благодарю.

Link to comment
Share on other sites

2 answers to this question

Recommended Posts

  • 0

1)

"grunt-libsass": "^0.2.0",

"grunt-contrib-concat": "^0.5.0",

"grunt-contrib-cssmin": "^0.10.0",

"grunt-contrib-clean": "^0.6.0",

 

2) 

"grunt-contrib-cssmin": "^0.10.0",

или

https://github.com/t32k/grunt-csso

 

3) врядли такое найдется. тут надо другой подход:

- генерировать спрайты: https://github.com/Ensighten/grunt-spritesmith

- в HTML вставлять класс с именем спрайта

 

4) может быть этот подойдет: https://github.com/behrang/grunt-flipcss

 

еще могут понадобится:

"grunt-autoprefixer": "^0.8.2",

"grunt-combine-media-queries": "^1.0.19",

"grunt-contrib-imagemin": "^0.9.2",

"grunt-contrib-watch": "^0.6.1",

"grunt-csscomb": "^3.0.0",

"grunt-newer": "^0.8.0",

"matchdep": "^0.3.0",

"time-grunt": "^0.4.0"

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy