Красивые исходники JS для Drupal 7

Мне очень нравится принцип  и поэтому хочу поделиться тем, как я упростил front-end жизнь в Drupal 7. Про bower даже и говорить не буду, будем считать что он уже есть и все необходимые для проекта штуки им контроллируются. Здесь речь пойдёт об использовании Gulp для объединения и минификации js исходников, которые тянут за сабой шаблон сайта. Поскольку таких библиотек может быть куча, то даже сжатые самим Drupal исходинки могут быть... неэффективными, а главное их будет целая куча.

Итак начну с требований:

  • node.js на борту
  • npm доступен из консоли

Теперь готовимся:

npm install -g gulp gulp-concat gulp-uglify

Все зависимости установлены в системе, идём в наш проект и делаем симлинки на установленные пакеты вот так:

1234
npm link gulp gulp-concat gulp-uglify# или# npm install -D gulp gulp-concat gulp-uglify# если нужно добавить в зависимости проекта, в package.json

Остаётся сделать последнее действие, создать gulpfile.js и описать там как что и куда поедет:

12345678910111213141516
var gulp = require('gulp');var concat = require('gulp-concat');var uglify = require('gulp-uglify'); gulp.task('js', function () {    gulp.src([            'vendor/fancybox/fancybox.js',            'script.js'])        .pipe(uglify())        .pipe(concat('app.js'))        .pipe(gulp.dest('.'))}); gulp.task('watch', ['js'], function () {    gulp.watch('script.js', ['js'])});

Получается, что теперь можно выполнить в cli gulp watch и спокойно работать со своим основным файлом script.js. Gulp будет следить за указанным файлом, сжимать исходники и минимизировать. При добавлении новых JS библиотек достаточно обновлить gulpfile.js основываясь на примере выше.

Добавить комментарий

Содержание этого поля является приватным и не предназначено для показа.

Plain text

  • Разрешённые HTML-теги: <a> <em> <strong> <cite> <blockquote> <code> <ul> <ol> <li> <dl> <dt> <dd>
  • Адреса страниц и электронной почты автоматически преобразуются в ссылки.
  • Строки и параграфы переносятся автоматически.