— Pixels Commander

Сборка, минимизация и деплой JS средствами Gradle

Рано или поздно любой JS проект вырастает из детских штанцов, обьем и частота коммитов растут, а решение становится сложным комплексом и состоит из десятков JS файлов.

В результате приходится регулярно производить множество операций по склеиванию, минимизации и загрузке на сервер обновленных модулей. День за днем, чекин за чекином ситуация становится все сложнее и грозит выйти из под контроля, выводя из себя, загружая вас рутинной работой. А впереди возможно светит Continous Integration и автоматическое тестирование…

Избавить вас от рутинных хлопот поможет система сборки. Gradle является одной из самых популярных систем на сегодня и постепенно завоевывает все больше сторонников. Приемуществом Gradle является описание build задач в виде кода, а так же возможность запускать Ant и Maven таски.

Специально для комбинации и минимизации JS файлов существует два Gradle плагина – https://launchpad.net/gradle-jslib и https://github.com/eriwen/gradle-js-plugin.

По состоянию на декабрь 2011 года первый обладал хорошими возможностями по комбинации файлов в модули, однако не работал с последней версией Gradle. Рассказ в статье пойдет о втором плагине – он прост в освоении, надежен и снабжен неплохой документацией.

Начнем с установки gradle – она достаточно проста. Качаем свежий пакет с http://gradle.org/downloads . Распаковываем на диске и добавляем подпапку bin в path. Как добавить переменную в path – можете почитать тут http://stackoverflow.com/questions/7703041/editing-path-variable-on-mac.

Проверить работоспособность Gradle мы можем выполнив команду gradle в терминале.

Следующий шаг – написание непосредственно Gradle скрипта.

buildscript {
repositories {
mavenCentral()
}
dependencies {
//Устанавливаем плагин из Maven репозитория
classpath 'com.eriwen:gradle-js-plugin:0.3'
}
}

//Применяем плагин
apply plugin: 'js'

//Таск плагина на склеивание, задаем inputs и outputs
combineJs {
file1 = fileTree(dir: "${projectDir}/src/Core", includes: ['Framework/core.js'])
file2 = fileTree(dir: "${projectDir}/src/Core", includes: ['Framework/strings.js'])
file3 = fileTree(dir: "${projectDir}/src/Core", includes: ['Framework/dom.js'])
inputs.files file1 + file2 + file3
outputs.file file("${projectDir}/min/corecombined.js")
}

//Таск плагина на минификацию, задаем inputs и outputs
minifyJs {
inputs.files fileTree(dir: "${projectDir}/min", include: "corecombined.js")
outputs.file file("${projectDir}/min/core.min.js")
}

А для деплоя используем Ant таск, который опишем в отдельном файле – deploycore.xml, а затем запустим из gradle – скрипта :

<project>
    <target name="deployFiles"> //По этому имени таск будет доступен из Gradle
    <echo message="ANT_HOME is set to = ${basedir}" />
    <taskdef name="ftp" classname="org.apache.tools.ant.taskdefs.optional.net.FTP">
        <classpath>
            <pathelement location="${basedir}/antlibs/ant-commons-net.jar" />
            <pathelement location="${basedir}/antlibs/commons-net-3.0.1.jar" />
            <pathelement location="${basedir}/antlibs/jakarta-oro-2.0.8.jar" />
        </classpath>
    </taskdef>
    <ftp server="staging.oggifinogi.com"          userid="administrator"          password="xxx"          port="21"          remotedir="/components"          passive="yes"          binary="no">
        <fileset dir="min/">
            <include name="*.min.js"   />
        </fileset>
    </ftp>
</target>
</project>

Добавим последнюю строку в core.gradle, которая загрузит все файлы с маской *.min.js на FTP :

ant.importBuild 'deploy.xml'

И наконец – вызываем gradle из консоли:

gradle -b=core.gradle combineJs minifyJs deployFiles

Наши файлы скомбинированы, уменьшены и загружены на сервер.
Теперь вы можете уделить больше времени написанию кода.