Ни для кого не секрет, что современный front-end разработчик обязан иметь в своем вооружении один из инструментов сборки проектов такие как Gulp или Grunt. До какого-то времени Grunt занимал монополию в этом вопросе, но отделившаяся от Grunt группа разработчиков решила создать свой легковесный и быстрый таск-менеджер Gulp.
В этой статье мы с нуля подготовим стартовый пакет для использования его в будущих проектах.
До недавнего времени я сам задавался вопросом, зачем мне нужно тратить время на настройку конфига таск-менеджера, если я и так неплохо справляюсь с версткой макетов, пока не начал использовать CSS пре-процессоры.
CSS пре-процессоры — реально удобны и ускоряют написание стилей, но компилирование кода написанного на пре-процессоре в обычный CSS, не совсем тривиальная задача которая решается одной кнопкой. Тут то нам на помощь и приходит таск-менеджер. Преобразование кода происходит не то чтобы нажатием кнопки, все происходит в режиме онлайн без вашего участия (конечно если правильно все настроить).
Само собой задачи таск-менеджера выходят далеко за пределы процессов связанных с преобразованием кода пре-процессора в чистый CSS. Сборщик проектов так же занимается минификацией, конкатенацией, проверкой кода на ошибки, сборкой изображение в спрайты, оптимизацией изображений под веб и т.д. Вы просто создаете в своем проекте множество логически-разделенных файлов, которые потом удобно собираются в один каталог уже обработанные и готовые для работе в браузере. Но об этом чуть позже, а сейчас начнем с подготовки.
Если вы знаете как установить node.js на свою систему и пользуетесь ей, можете смело переходить к следующему заголовку.
Хотелось бы сразу предупредить, что все описанные действия актуальны для Mac OS X, но в целом применимы и для других Unix систем. Разработка через таск-менеджер и командную строку в Windows несколько более затруднительная и тут она описана не будет. Однако, если вы все же пользуетесь Windows и не готовы от него отказываться, то могу предложить вариант использования виртуальной машины с установленной Ubuntu, я использую этот вариант на своей домашней системе, что в целом довольно удобно.
Итак первым делом нам предстоит скачать и установить пакет node.js в свою систему для работы с нодой через консоль. Переходим на официальный сайт node.js и скачиваем свежую stable версию для вашей системы. После установки в вашей командной строке должна быть доступна команда node. Чтобы проверить что ваша node работает, введем в командной строке команду
node -v
в ответ должна появиться версия установленной node.js. Если все хорошо, идем дальше.
В наших проектах мы будем использовать унифицированный вариант структуры:
develop - корневой каталог разработки └─start - каталог проекта ├─build - билд собраный таск-менеджером ├─resource - все файлы исходники для разработки (.psd и пр.) ├─src - каталог разработки │├─css - каталог разработки стилей ││├─images - все статичные изображения ││├─sprites - изображение собираемые в спрайт ││├─partial - пользовательские файлы стилей │││├─mixins.styl - пользовательские миксины │││└─styles.styl - пользовательские стили ││├─vendor - прочие внешние файлы стилей ││└─styles.styl - основной файл стилей │├─fonts - каталог шрифтов │├─img - каталог динамических изображений │├─js - каталог разработки JavaScript ││├─_*.js - побочные файлы js ││├─_main.js - основной пользовательский js ││└─main.js - основной файл js │├─.htaccess - конфиг для сервера │├─*.html - файлы разметки страницы │├─pages.html - файл со ссылками на все страницы шаблона │├─index.html - индексовый файл разметки страницы │└─include - каталог подключаемых файлов разметки │ └─*.html - подключаемые файлы разметки (header.html и пр.) ├─package.json - конфиг пакетного менеджера npm ├─gulpfile.js - конфиг Gulp ├─stylus.template.mustache - маска для чтения спрайтов ├─TODO - todo лист └─.gitignore - конфиг для Git
В консоли с помощью команды cd перейдем в корневой каталог разработки, создадим каталог нашего проекта mkdir start и перейдем в него.
Установим нашу структуру для проекта через консоль:
mkdir build resource src src/css src/css/images src/css/sprites src/css/partial src/css/vendor src/js src/template src/template/include src/img src/fonts
Создадим начальные файлы в структуре проекта:
touch gulpfile.js stylus.template.mustache .gitignore src/.htaccess src/TODO src/css/styles.styl src/css/partial/styles.styl src/css/partial/mixins.styl src/js/main.js src/js/_main.js src/template/pages.html src/template/index.html src/template/include/header.html src/template/include/footer.html
npm init
все всплывающие вопросы можно прощелкать через Enter, node установит им значения по-умолчанию, либо заполнить предлагаемые поля.
Говорим гиту какие каталоги игнорировать и не заливать в репозиторий:
/node_modules/ /build/ /resource/
Каталог node_modules появится позже после установки плагинов и будет содержать в себе все node-плагины проекта.
Устанавливаем для сервера дополнительное gzip сжатие и кэширование:
AddOutputFilterByType DEFLATE text/html text/plain text/xml text/css text/javascript application/javascript
<IfModule mod_headers.c>
# Serve gzip compressed CSS files if they exist
# and the client accepts gzip.
RewriteCond "%{HTTP:Accept-encoding}" "gzip"
RewriteCond "%{REQUEST_FILENAME}\.gz" -s
RewriteRule "^(.*)\.css" "$1\.css\.gz" [QSA]
# Serve gzip compressed JS files if they exist
# and the client accepts gzip.
RewriteCond "%{HTTP:Accept-encoding}" "gzip"
RewriteCond "%{REQUEST_FILENAME}\.gz" -s
RewriteRule "^(.*)\.js" "$1\.js\.gz" [QSA]
# Serve correct content types, and prevent mod_deflate double gzip.
RewriteRule "\.css\.gz$" "-" [T=text/css,E=no-gzip:1]
RewriteRule "\.js\.gz$" "-" [T=text/javascript,E=no-gzip:1]
<FilesMatch "(\.js\.gz|\.css\.gz)$">
# Serve correct encoding type.
Header append Content-Encoding gzip
# Force proxies to cache gzipped &
# non-gzipped css/js files separately.
Header append Vary Accept-Encoding
</FilesMatch>
</IfModule>
ExpiresActive on
ExpiresByType application/javascript "access plus 1 months"
ExpiresByType image/jpg "access plus 1 month"
ExpiresByType image/jpeg "access plus 1 month"
ExpiresByType image/gif "access plus 1 month"
ExpiresByType image/png "access plus 1 month"
ExpiresByType text/css "access plus 1 months"
Подключим пользовательские файлы стилей в основной файл стилей:
@import 'partial/styles'
Обратите внимание, что для подключение .styl файлов, расширение не указывается, согласно семантике кода пре-процессора Stylus. Для подключения стилей в другом расширении, например .css, указание последнего обязательно.
Эта страница содержит в себе todo лист разработки. Более подробно о работе с данным файлом вы можете почитать на странице плагина PlainTasks для Sublime Text.
На этом установка структуры завершена.
Node.js по-умолчанию включает в себя пакетный менеджер npm, в репозиториях которого собрано множество плагинов, с которыми нам и предстоит работать.
Для начала нужно установить Gulp глобально (с ключем -g) на нашу систему
npm install gulp -g
Делать это нужно один раз, в дальнейшем глобальная установка не требуется.
Теперь нужно установить Gulp локально в каталог проекта
npm install gulp --save-dev
Ключ --save-dev говорит о том, что информация о плагине (имя в репозитории и его версия) будет добавлена в конфиг package.json и запомнит его для данного проекта. Поскольку мы не храним в гите тяжеловесную папку с плагинами node_modules, сохраненная в конфиге информация об установленных плагинах позволит всего одной командой npm i развернуть в проекте все нужные плагины.
Для каждой команды существуют сокращения, поэтому команду выше мы можем записать в более коротком формате
npm i gulp -D
В дальнейшем мы так же будем пользоваться сокращенным форматом команд.
В наших проектах мы пользуемся пре-процессором Stylus который отлично работает и компилируется на ноде.
Устанавливаем:
npm i gulp-stylus -D
Автопрефиксер - автоматически подставляет префиксы -ms- -o- -moz- -webkit- в нужные свойства:
npm i gulp-autoprefixer -D
Минификация CSS - плагин минифицирует выходной CSS файл избавляя его от лишних пробелов и табуляций:
npm i gulp-minify-css -D
Объединение картинок в спрайты — вам больше не нужно тратить часы драгоценного времени на объединение всех изображений в спрайты, а потом высчитывать их координаты, все это за вас автоматически сделает этот плагин:
npm i gulp.spritesmith -D
Добавим в ранее созданный файл stylus.template.mustache маску вычисления позиций в спрайтах:
{{#items}}
${{name}} = {{px.x}} {{px.y}} {{px.offset_x}} {{px.offset_y}} {{px.width}} {{px.height}} {{px.total_width}} {{px.total_height}} '{{{escaped_image}}}';
{{/items}}
Добавим специальные миксины в mixins.styl:
spriteWidth($sprite)
width $sprite[4]
spriteHeight($sprite)
height $sprite[5]
spritePosition($sprite)
background-position $sprite[2] $sprite[3]
spriteImage($sprite)
background-image url($sprite[8])
sprite($sprite)
if !match('hover', selector()) && !match('active', selector())
spriteImage($sprite)
spritePosition($sprite)
spriteWidth($sprite)
spriteHeight($sprite)
Подключим миксины и генерируемый файл с координатами в основной файл стилей src/css/styles.styl:
@import 'partial/sprite' @import 'partial/mixins'
Обратите внимание что файлы спрайтов должны подключаться до пользовательских стилей @import 'partial/styles'
Оптимизация изображений под веб — плагин автоматически вырежет всю лишнюю информацию из ваших изображений и ужмет их до оптимального размера, что позволит в некоторых случаях добиться сокращения объема изображений до 90%:
npm i gulp-imagemin -D
Минификация JS — плагин максимально минифицирует ваш JS код сокращая время его загрузки:
npm i gulp-uglify -D
Отслеживание ошибок JS — плагин досканально проверит ваш JS код на выявление всех несоответствий и выведет их в консоль:
npm i jshint gulp-jshint -D
Подключаемые файлы — плагин позволяет хранить статичные части сайта, такие как header, footer, aside и т.д., в отдельных файлах и подключать их в любой части другого файла. Больше нет надобности, в случае мелких изменений в шапке, менять десятки, а то и сотни html страниц шаблона:
npm i gulp-rigger -D
Плагин так же совместим с JS.
Подключим пользовательский JS в основной файл JS src/js/main.js констуркцией:
//= _main.js
Подключим в index.html файлы header.html и footer.html
//= include/header.html <!--some html--> //= include/footer.html
LiveReload — плагин избавляет вас от надобности каждый раз перезагружать страницу в браузере чтобы увидеть изменения, теперь это происходит автоматически при сохранении измененного файла:
npm i gulp-connect -D
Предохраняем Gulp от вылета — иногда случается так, что Gulp может вылететь из режима наблюдения в случае возникновения критических ошибок (в основном из-за JS). Данный плагин, по возможности, старается оставить процессы Gulp работоспособными:
npm i gulp-plumber -D
Переименование файлов — самая обычная работа с именами файлов. Плагин позволяет полностью переименовывать файлы, изменять расширение, добавлять префиксы и постфиксы, например чтобы привести файл вида style.styl в style.min.css:
npm i gulp-rename -D
Клинер — иногда возникает потребность в полном очищении каталога build, тут нам на помощь приходит плагин:
npm i rimraf -D
Sourcemap — для того чтобы после минификации ваши файлы оставались читаемы через отладку браузером, нужно добавлять sourcemap в минифицируемые файлы:
npm i gulp-sourcemaps -D
Расширенные возможности watch — плагин делает watch умным, теперь он не перезаписывает все файлы в билд при изменении всего одного файла, перезаписывается конкретный измененный файл, что экономит время и ресурсы:
npm i gulp-watch -D
После всех установленных плагинов, проверим наш package.json. Он должен иметь примерно следующий вид:
{
"name": "start",
"version": "1.0.0",
"description": "Start pack for Front-end develop",
"author": "Ivan Ivanov",
"license": "MIT",
"dependencies": {},
"devDependencies": {
"gulp": "latest",
"gulp-autoprefixer": "latest",
"gulp-connect": "latest",
"gulp-imagemin": "latest",
"jshint": "latest",
"jshint-stylish": "latest",
"gulp-jshint": "latest",
"gulp-minify-css": "latest",
"gulp-plumber": "latest",
"gulp-rename": "latest",
"gulp-rigger": "latest",
"gulp-sourcemaps": "latest",
"gulp-stylus": "latest",
"gulp-uglify": "latest",
"gulp-watch": "latest",
"gulp.spritesmith": "latest",
"rimraf": "latest"
}
}
Вместо latest в вашем случае будут прописаны конкретные версии установленных плагинов. Т.к. мы формируем наш стартовый пакет, который будет использоваться в множестве проектов, рекомендуется также заменить значения версий на latest, чтобы всегда устанавливать актуальные версии плагинов в проект.
В папке проекта также должен появиться каталог node_modules в котором хранятся все файлы плагинов ноды. Все нужные плагины установлены, можно переходить к настройки конфига Gulp.
gulpfile.js — это основной файл конфигурации нашего таск-менеджера, именно в нем мы будем хранить все настройки и команды.
Вся работа Gulp сводится к task (англ. задача). Задача - это отдельная самостоятельная функция с именем. Каждая задача может быть вызвана отдельно.
Во первых в начало файла подключим режим совместимости только по современным стандартам:
'use strict';
Подробнее про эту директиву можно почитать тут.
Плагины инициализируются следующей конструкцией:
var initPlugin = require('plugin-name');
В соответствии с этой конструкцией инициализируем все наши плагины:
var gulp = require('gulp'), //основной плагин gulp
stylus = require('gulp-stylus'), //препроцессор stylus
prefixer = require('gulp-autoprefixer'), //расставление автопрефиксов
cssmin = require('gulp-minify-css'), //минификация css
uglify = require('gulp-uglify'), //минификация js
jshint = require("gulp-jshint"), //отслеживание ошибкок в js
rigger = require('gulp-rigger'), //работа с инклюдами в html и js
imagemin = require('gulp-imagemin'), //минимизация изображений
spritesmith = require("gulp.spritesmith"), //объединение картинок в спрайты
rimraf = require('rimraf'), //очистка
sourcemaps = require('gulp-sourcemaps'), //sourcemaps
rename = require("gulp-rename"), //переименвоание файлов
plumber = require("gulp-plumber"), //предохранитель для остановки гальпа
watch = require('gulp-watch'), //расширение возможностей watch
connect = require('gulp-connect'); //livereload
Для удобства сразу определим все пути и маски:
var path = {
build: { //Тут мы укажем куда складывать готовые после сборки файлы
html: 'build/',
js: 'build/js/',
css: 'build/css/',
img: 'build/css/images/',
fonts: 'build/fonts/',
htaccess: 'build/',
contentImg: 'build/img/',
sprites: 'src/css/images/',
spritesCss: 'src/css/partial/'
},
src: { //Пути откуда брать исходники
html: 'src/template/*.html', //Синтаксис src/template/*.html говорит gulp что мы хотим взять все файлы с расширением .html
js: 'src/js/[^_]*.js',//В стилях и скриптах нам понадобятся только main файлы
jshint: 'src/js/*.js',
css: 'src/css/styles.styl',
cssVendor: 'src/css/vendor/*.*', //Если мы хотим файлы библиотек отдельно хранить то раскоментить строчку
img: 'src/css/images/**/*.*', //Синтаксис img/**/*.* означает - взять все файлы всех расширений из папки и из вложенных каталогов
fonts: 'src/fonts/**/*.*',
contentImg: 'src/img/**/*.*',
sprites: 'src/css/sprites/*.png',
htaccess: 'src/.htaccess'
},
watch: { //Тут мы укажем, за изменением каких файлов мы хотим наблюдать
html: 'src/template/**/*.html',
js: 'src/js/**/*.js',
css: 'src/css/**/*.*',
img: 'src/css/images/**/*.*',
contentImg: 'src/img/**/*.*',
fonts: 'src/fonts/**/*.*',
htaccess: 'src/.htaccess',
sprites: 'src/css/sprites/*.png'
},
clean: './build', //директории которые могут очищаться
outputDir: './build' //исходная корневая директория для запуска минисервера
};
Обратите внимание, что мы можем использовать маски имен:
Теперь, когда все константы прописаны, можно приступить к написанию тасков. Все задачи имеют следующую конструкцию:
gulp.task('taskName', function(){
//some functions
});
Первым делом мы настроим работу локального сервера и LiveReload:
// Локальный сервер для разработки
gulp.task('connect', function(){
connect.server({ //настриваем конфиги сервера
root: [path.outputDir], //корневая директория запуска сервера
port: 9999, //какой порт будем использовать
livereload: true //инициализируем работу LiveReload
});
});
Скорее всего вам часто придется работать одновременно сразу в нескольких проектов. Сервер позволяет одновременно запускать множество серверов, достаточно для разных проектов прописать свой порт.
// таск для билдинга html
gulp.task('html:build', function () {
gulp.src(path.src.html) //Выберем файлы по нужному пути
.pipe(rigger()) //Прогоним через rigger
.pipe(gulp.dest(path.build.html)) //выгрузим их в папку build
.pipe(connect.reload()) //И перезагрузим наш сервер для обновлений
});
// проверка js на ошибки и вывод их в консоль
gulp.task('jshint:build', function() {
return gulp.src(path.src.jshint) //выберем файлы по нужному пути
.pipe(jshint()) //прогоним через jshint
.pipe(jshint.reporter('jshint-stylish')); //стилизуем вывод ошибок в консоль
});
// билдинг яваскрипта
gulp.task('js:build', function () {
gulp.src(path.src.js) //Найдем наш main файл
.pipe(rigger()) //Прогоним через rigger
.pipe(sourcemaps.init()) //Инициализируем sourcemap
.pipe(uglify()) //Сожмем наш js
.pipe(sourcemaps.write()) //Пропишем карты
.pipe(rename({suffix: '.min'})) //добавим суффикс .min к выходному файлу
.pipe(gulp.dest(path.build.js)) //выгрузим готовый файл в build
.pipe(connect.reload()) //И перезагрузим сервер
});
Все изображения для объединения в спрайты складываются в директорию src/css/sprites/ и после прогона через Gulp становятся единым спрайтовым изображением. В спрайты не стоит складывать логотипы и бэкграунды без четких размеров.
// билдим спрайты
gulp.task('sprites:build', function () {
var spriteData =
gulp.src(path.src.sprites) //выберем откуда брать изображения для объединения в спрайт
.pipe(spritesmith({
imgName: 'sprite.png', //имя спрайтового изображения
cssName: 'sprite.styl', //имя стиля где храним позиции изображений в спрайте
imgPath: 'images/sprite.png', //путь где лежит спрайт
cssFormat: 'stylus', //формат в котором обрабатываем позиции
cssTemplate: 'stylus.template.mustache', //файл маски
cssVarMap: function(sprite) {
sprite.name = 's-' + sprite.name //имя каждого спрайта будет состоять из имени файла и конструкции 's-' в начале имени
}
}));
spriteData.img.pipe(gulp.dest(path.build.sprites)); // путь, куда сохраняем картинку
spriteData.css.pipe(gulp.dest(path.build.spritesCss)); // путь, куда сохраняем стили
});
Для вывода спрайта достаточно воспользоваться миксином. Например, для файла lorem.png выборка из спрайта будет выглядеть следующим образом:
.lorem
sprite($s-lorem)
Теперь объект с классом .lorem примет размеры изображения и само изображение в качестве фона.
Статичные изображения - это изображения используемые в шаблоне верстки.
// билдим статичные изображения
gulp.task('image:build', function () {
gulp.src(path.src.img) //Выберем наши картинки
.pipe(imagemin({ //Сожмем их
progressive: true, //сжатие .jpg
svgoPlugins: [{removeViewBox: false}], //сжатие .svg
interlaced: true, //сжатие .gif
optimizationLevel: 3 //степень сжатия от 0 до 7
}))
.pipe(gulp.dest(path.build.img)) //выгрузим в build
.pipe(connect.reload()) //перезагрузим сервер
});
Динамичные изображения — это контентные изображения, которые будут меняться на сайте и на уровне шаблона подключаются лишь для демонстрации. Например, это могут быть изображения для новостей и пр.
// билдим динамичные изображения
gulp.task('imagescontent:build', function() {
gulp.src(path.src.contentImg)
.pipe(imagemin({ //Сожмем их
progressive: true, //сжатие .jpg
svgoPlugins: [{removeViewBox: false}], //сжатие .svg
interlaced: true, //сжатие .gif
optimizationLevel: 3 //степень сжатия от 0 до 7
}))
.pipe(gulp.dest(path.build.contentImg)) //выгрузим в build
.pipe(connect.reload()) //перезагрузим сервер
});
// билдинг пользовательского css
gulp.task('cssOwn:build', function () {
gulp.src(path.src.css) //Выберем наш основной файл стилей
.pipe(sourcemaps.init()) //инициализируем soucemap
.pipe(stylus({
compress: true,
'include css': true
})) //Скомпилируем stylus
.pipe(prefixer({
browser: ['last 3 version', "> 1%", "ie 8", "ie 7"]
})) //Добавим вендорные префиксы
.pipe(cssmin()) //Сожмем
.pipe(sourcemaps.write()) //пропишем sourcemap
.pipe(rename({suffix: '.min'})) //добавим суффикс .min к имени выходного файла
.pipe(gulp.dest(path.build.css)) //вызгрузим в build
.pipe(connect.reload()) //перезагрузим сервер
});
Отдельный таск для внешних стилей:
// билдинг вендорного css
gulp.task('cssVendor:build', function () {
gulp.src(path.src.cssVendor) // Берем папку vendor
.pipe(sourcemaps.init()) //инициализируем soucemap
.pipe(cssmin()) //Сожмем
.pipe(sourcemaps.write()) //пропишем sourcemap
.pipe(gulp.dest(path.build.css)) //выгрузим в build
.pipe(connect.reload()) //перезагрузим сервер
});
Также добавим таск для билда общего CSS:
// билдим css целиком
gulp.task('css:build', [
'cssOwn:build',
// 'cssVendor:build'
]);
В случае если требуется обработать внешние стили отдельно от домашних и выгрузить их отдельными файлами нужно раскомментировать строчку 'cssVendor:build'
// билдим шрифты
gulp.task('fonts:build', function() {
gulp.src(path.src.fonts)
.pipe(gulp.dest(path.build.fonts)) //выгружаем в build
});
// билдим htaccess
gulp.task('htaccess:build', function() {
gulp.src(path.src.htaccess)
.pipe(gulp.dest(path.build.htaccess)) //выгружаем в build
});
Для того чтобы нам не приходилось билдить каждую часть отдельно, пропишем таск для общего билда:
// билдим все
gulp.task('build', [
'html:build',
'jshint:build',
'js:build',
'sprites:build',
'css:build',
'fonts:build',
'htaccess:build',
'image:build',
'imagescontent:build'
]);
Иногда требуется полностью очистить каталог build. Здесь нам на помощь придет следующий таск:
// чистим папку билда
gulp.task('clean', function (cb) {
rimraf(path.clean, cb);
});
Одной из самых важных и полезных функций Gulp является функция watch, которая позволяет отслеживать в реальном времени все изменения с производимыми файлами и в зависимости от этого выполнять конкретные действия:
// watch
gulp.task('watch', function(){
//билдим html в случае изменения
watch([path.watch.html], function(event, cb) {
gulp.start('html:build');
});
//билдим спрайты в случае изменения
watch([path.watch.sprites], function(event, cb) {
gulp.start('sprites:build');
});
//билдим контекстные изрображения в случае изменения
watch([path.watch.contentImg], function(event, cb) {
gulp.start('imagescontent:build');
});
//билдим css в случае изменения
watch([path.watch.css], function(event, cb) {
gulp.start('css:build');
});
//проверяем js в случае изменения
watch([path.watch.js], ['jshint']);
//билдим js в случае изменения
watch([path.watch.js], function(event, cb) {
gulp.start('js:build');
});
//билдим статичные изображения в случае изменения
watch([path.watch.img], function(event, cb) {
gulp.start('image:build');
});
//билдим шрифты в случае изменения
watch([path.watch.fonts], function(event, cb) {
gulp.start('fonts:build');
});
//билдим htaccess в случае изменения
watch([path.watch.htaccess], function(event, cb) {
gulp.start('htaccess:build');
});
});
Действия по-умолчанию — это то какие задачи будет выполнять таск-менеджер при вводе команды gulp в консоль:
// действия по умолчанию
gulp.task('default', ['build', 'watch', 'connect']);
В нашем случае по-умончанию мы сбилдим наш проект, включим режим watch и запустим сервер.
Все команды гальпа для командной строки состоят из двух частей это непосредственно сама команда gulp и через пробел имя таска. Вот список команд применимых для нашего конфига:
gulp - основная команда, запускает таск defaultgulp build - билдим всёgulp watch - запуск watchgulp clean - очистка каталога buildgulp connect - запуск серверgulp html:build - билд HTMLgulp jshint:build - проверяем JS на ошибкиgulp js:build - билд JSgulp sprites:build - билд спрайтаgulp image:build - билд статичных изображенийgulp imagecontent:build - билд динамичных изображенийgulp cssOwn:build - билд пользовательского CSSgulp cssVendor:build - билд внешних CSSgulp css:build - общий билд CSSgulp fonts:build - билд шрифтовgulp htaccess:build - билд .htaccess
На данном этапе настройка gulpfile.js закончена.
Для начала зайдем через консоль в папке где мы ведем разработку, например cd develop/example и скопируем все из директории стартового пакета в наш проект cp -a ~/develop/start/. ~/develop/example/
Такой способ копирования наиболее удобен, т.к. точно скопирует все, в том числе и скрытые файлы .gitignore и пр.
Используя данное руководство мы подготовили стартовый пакет для использования Gulp в своих проектах для Front-end разработки.
Скачать готовый пакет: start.zip
Так же данный пакет доступен на GitHub
Данная статья не является заключительной и будет обновляться в зависимости от изменений и улучшений.
Хотите поговорить о PHP за под пиво пятничным вечером? Заметьте, это просто посиделки, а конференция, на которой мы, будем выступать. Не полным составом, конечно, а силами двух спикеров.
В предыдущей статье мы уже начали рассказывать вам о новой версии «1С-Битрикс: Управление сайтом», которую представили на презентации 30 мая. Мы успели выделить только некоторые “фишки” и особенности новой редакции, да и то рассказали о них в общих чертах. Теперь хотелось бы остановиться на некоторых блоках более подробно, в частности, поговорить о Сайтах24.
Весна для компании 1С-Битрикс оказалась очень плодотворной. Всего пару месяцев назад мы всей командой слушали и обсуждали презентацию Битрикс24.Гонконг, а вчера появился ещё более весомый повод для дискуссий: релиз новой сборки версии «1С-Битрикс: Управление сайтом» 18.0.
