Статьи

Работа с sass-скриптами в Grails 2.3.X

Февраль 5, 2019

Sass — один из самых зрелых, стабильных и мощных доступных языков расширения CSS профессионального уровня. Прежде чем мы сможем использовать Sass, нам нужно настроить его в нашем проекте.

В grails-2.4.X очень просто использовать sass через плагин конвейера активов. Но с версией grails-2.3.x нам нужно выполнить следующие шаги:

Шаг 1

Установите Ruby с помощью RVM :

1
2
3
4
curl -sSL https://get.rvm.io | bash -s stable --rails
source ~/.rvm/scripts/rvm
rvm install ruby-2.1.2
rvm list

В приведенных выше командах мы устанавливаем ‘Ruby’ с помощью ‘RVM’.

Шаг 2

Установите Bundle и Compass Gems:

1
2
3
4
sudo apt-get install gem
gem install bundle
bundle -v
gem install compass

Bundler является менеджером гемов по умолчанию для Rails 3, хотя его можно использовать с любым проектом Ruby, поскольку он не зависит от фреймворка.

Шаг 3

Добавлен новый файл с именем ‘Gemfile’ в корневой папке вашего проекта со следующим содержимым:

1
2
3
4
5
6
7
8
source 'https://rubygems.org'
 
gem 'compass', '~> 0.13.alpha.0'
 
group :development do
  gem 'guard'
  gem 'guard-shell'
end

Это гарантирует, что все гемы, указанные в Gemfile, вместе с их зависимостями будут доступны для вашего приложения.

Шаг 4

Внутри скриптовой папки вашего проекта:

1
bundle install

При запуске «bundle install» генерируется файл Gemfile.lock, который следует добавить в ваш репозиторий git. Gemfile.lock гарантирует, что ваши развернутые версии гемов в Heroku совпадают с версией, установленной локально на вашем компьютере разработчика.

Шаг 5

Создайте новый файл сценария с именем compass-compile в каталоге scripts со следующим содержимым:

01
02
03
04
05
06
07
08
09
10
11
#!/bin/sh
 
STYLE="compact"
 
if [ $1 ]
then
    STYLE=$1
fi
 
cd $2
bundle exec compass compile --force --output-style $STYLE --environment production --css-dir web-app/css --sass-dir src/sass --images-dir web-app/images/

Здесь в этом скрипте мы компилируем файлы ‘sass’ в файлы ‘css’.

Шаг 6

Создайте новый файл _Events.groovy в каталоге scripts со следующим содержимым:

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
import grails.util.Environment
eventCompileEnd = {x ->
    if(Environment.currentEnvironment!=Environment.TEST) {
        compileSass()
    }
}
 
 
def compileSass() {
    def baseDir = System.getProperty("base.dir")
    def command
    if(baseDir != null) {
        command = """${baseDir}/scripts/compass-compile compact ${baseDir}"""// Create the String
    } else {
        command = """scripts/compass-compile compact ."""// Create the String
    }
    def proc = command.execute()                 // Call *execute* on the string
    proc.waitFor()                               // Wait for the command to finish
 
    if(proc.exitValue() == 0) {
        def messages = proc.in.text.split("\n")
        messages.each { message ->
            event("StatusUpdate",[message])
        }
    } else {
        event("StatusError", ["Problem compiling SASS ${proc.err.text}"])
    }
}

Когда мы запускаем наше приложение grails, вызывается функция compileSass (). Эта функция компилирует наши файлы ‘sass’ в файлы ‘css’, используя скрипт, указанный в шаге 5.

Шаг 7

Добавьте ваши файлы sass в каталог ‘src / sass’. Приведенный выше скрипт преобразует все файлы sass из каталога «src / sass» в файлы css и копирует их в каталог wep-app / css.

Надеюсь, поможет!

35
Share: