Gulp – установка и настройка.
Установить Node.js – с сайта
Где-нибудь создать папку, к примеру к корне диска С, называем gulp, и в ней папка myproject. Главное, чтобы в пути к ней не было русских букв.
Внутри этой папки – зажимаем клавишу SHIFT и кликаем правой кнопкой мыши (пкм) по пустому месту, тогда в контекстном меню будет пункт “открыть командное окно”. Выбираем его, оно появляется и в нем сразу будет путь к нашей папке.
В окне команд пишем:
npm i gulp -g
нажимаем Энтер и пошла установка. i это сокращенно слово install, т.е. установка, а -g – установка глобально. Если напишем не глобально, то gulp установится прямо в эту папку. Правда у меня даже глобально установленный галп не виделся в потом уже созданном новом проекте, поэтому хз, что это такое глобально, ну да ладно, сказали писать так – пишем).
npm i gulp-sass --save-dev
– сразу устанавливаем пакет sass, который тоже понадобится.
npm init
– инициализация нашего проекта, типо создание, по типу объявления переменной в js.
там нужно будет ответить на несколько вопросов:
- название проекта (любое)
- версия – пох, жмем Энтер
- description – любое на английском, типа My Best Project
- еще раза три пустых Энтеров
- автор – можно себя написать, свой ник
- лицензия – пропускаем (просто Энтер)
- потом спрашивает да-нет? пишем yes И Энтер
после этого в папке появляется файл package.json – в нем сохранилась вся инфа, которую мы писали только что в командной строке.
npm i gulp --save-dev
это установка зависимостей пакетов, которые работают вместе с gulp. В нашей папке появилась папка _node_modules.
Устанавливаем проверку обновлений пакетов в gulp
Нужно установить проверку обновлений всех пакетов, которые мы наустанавливаем в галп:
npm i -g npm-check-updates
потом, когда в очередной раз будем пользоваться галпом, то при запуске может появиться ошибка. Как вариант – это устарел какой-то из пакетов.
Поэтому надо написать:
ncu //проверка и установка обновлений
а лучше
ncu -u //тоже самое, только с редактированием файла package.json (сохранение версий в нем)
Далее.
В нашей папке myproject надо создать такую структуру папок:
В корне создаем папки app и dist
Внутри app:
- css,
- fonts,
- img,
- js,
- sass.
- и файл index.html
для этого:
cd app
– пишем прямо в нашей командной строке, это мы переходим в папку app, а потом
mkdir css,fonts,ing,js,sass
– так сразу создаются все папки, чтобы не ипаться сто раз не кликать правой кнопкой в окошке виндоус – создать папку, и писать ей имя.
Не забыть создать файл index.html.
Папка app – это папка, в которой все исходники – css, изображения, скрипты и т.д. А папка dist – это уже ГОТОВЫЙ проект, откомпилированный, готовый к выгрузке, туда будут складываться уже отбработанные файлы.
Создаем файл gulpfile.js в корневой папке.
Проверяем работу gulp. Открываем этот файл и пишем в него:
var gulp = require('gulp'); gulp.task('mytask', function(){ console.log('Привет, я таск!'); });
ОБЯЗАТЕЛЬНО ТОЧКУ С ЗАПЯТОЙ В КОНЦЕ!! Иначе не заработает.
После этого в командной строке можно написать gulp mytask
и должно показаться “Привет, я таск!”
Шаблон для создания любой задачи (task) в gulp:
var gulp = require('gulp'); gulp.task('mytask', function(){ return gulp.src(source-files) //откуда брать файл, источник .pipe(plugin()) //что с ним сделать .pipe(gulp.dest('folder')) // и куда выгрузить });
Т.е. откуда брать файл, что с ним сделать и куда отгрузить.
РЕАЛЬНО ЖЕ в него пишем следующее, все с самого начала:
var gulp = require('gulp'), //подключаем сам галп sass = require('gulp-sass'); // подключаем sass пакет
Заходим в папку app>sass и создаем там файл main.sass.
Пишем в него хотя бы что-нибудь, чтобы проверить работу:
body background-color: #000;
сохраняем.
Возвращаемся в файл gulpfile.js и пишем в него (добавляем строки):
gulp.task('sass', function(){ return gulp.src('app/sass/main.sass').pipe(sass()).pipe(gulp.dest('app/css')) })
Теперь в командной строке запускаем gulp sass
.
В итоге создастся файл main.css в папке app>css, скомпилированный и оптимизированный уже.
Маски для создания путей для источника файлов, на примерах
app/sass/*.sass – все файлы в конкретной папке с расширением sass
app/sass/**/*.sass – все файлы с расширением sass, которые находятся в app/sass/ независимо от уровня вложенности, во всех подпапках…. все все все короче.
!app/sass/main.sass – восклицательный знак в начале, это исключение файла.
return gulp.scr([‘!app/sass/main.sass’ , ‘app/sass/**/*.sass’]) – выбираются все файлы sass, кроме main.sass. Здесь появляются квадратные скобки, это массив. Все выборки файлов записываются в ковычках и через запятую.
app/sass/*.+(scss|sass) – все файлы с расширением scss и sass
Дополнительно
В папке sass можно создать файл с именем, начинающимся с нижнего подчеркивания, например _part.sass. Такие файлы не участвуют в комплияции как отдельные файлы. Их надо просто импортировать командой @import в основной файл. Т.е.:
В файл main.sass в самое начало добавляем импорт и получаем:
@import "part" //здесь в коде не обязательно писать вначале нижнее подчеркивание и расширение в конце. body background-color: #000;
В итоге этот фрагмент будет в начале того файла, куда импортируешь. То есть если в main.sass написать, то этот фрагмент будет в итоговом скомпилированном main.css.
Автоматическая компиляция файлов sass при сохранении
Используется метод watch.
Синтаксис такой:
gulp.task('watch', function(){ gulp.watch('app/sass/**/*.sass', ['sass']); })
Чтобы выйти из этого режима слежения нужно нажать Cntrl+С ДВА РАЗА.
LiveReload
LIveReload – это автоматическое обновление стилей css на html странице при их сохранении.
Нужно установить браузер-синк (их сайт https://www.browsersync.io/ )
Останавливаем режим слежения (если запущен) Cntrl+С ДВА РАЗА и устанавливаем эту штуку:
npm i browser-sync --save-dev
Установить установили, а теперь нужно подключить его в gulpfile.js.
добавляем эту строку
browserSync = require('browser-sync')
то есть теперь начало в файле получается таким:
var gulp = require('gulp'), sass = require('gulp-sass'), browserSync = require('browser-sync');
теперь надо написать таск (выполнение задачи) для браузер-синка:
gulp.task('browser-sync', function(){ browserSync({ server: { //определяем основную папку, как сервер baseDir: 'app' }, // это как раз основная папка notify: false //отключает уведомления, можно писать, а можно не писать }) })
Чтобы автоматически отражались не только css, но и html и js, нужно добавить пару строк в таск watch:
gulp.watch('app/*.html', browserSync.reload) gulp.watch('app/js/**/*.js', browserSync.reload)
Создаем папку libs в папке app. Туда мы будем сваливать все какие-то библиотеки, jquery плагины и другие плагины.
Bower
Для установки новых библиотек лучше использовать Bower (используется для установки новых плагинов)
устанавливаем его npm i -g bower
На их сайте говорится, что для работы нужен git, скачиваем и устанавливаем его для своей платформы.
В корневой папке myproject создаем файл .bowerrc
(начинающийся с точки).
В него пишем:
{ "directory": "app/libs" }
сохраняем. Так, он говорит менеджеру пакетов куда устанавливать новые плагины.
Теперь для примера установим два плагина, в командной строке пишем:
bower i jquery magnific-popup
появятся две папки jquery и magnific-popup в папке app>libs.
Установить два пакета для сбора всех файлов js и минизации:
npm i gulp-concat gulp-uglifyjs --save-dev
После установки любой приблуды, надо не забывать подключать ее в файле gulpfile.js, поэтому добавляем там строки:
concat = require('gulp-concat'), uglify = require('gulp-uglifyjs')
Создаем таск для этой утилиты:
gulp.task('scripts', function(){ return gulp.src([ 'app/libs/jquery/dist/jquery.min.js', 'app/libs/magnific-popup/dist/jquery.magnific-popup.min.js', //какие файлы брать, через запятую, это массив. Можно все библиотеки объединить в один итоговый файл и сжать. ]) .pipe(concat('libs.min.js')) //что с ними делать, в данном случае соединять .pipe(uglify()) //минимизировать .pipe(gulp.dest('app/js')) //куда сваливать })
Подключаем jquery в html.
В конце тега body добавляем строки:
<script src="js/libs.min.js"></script> <script src="js/common.js"></script>
т.е. общую сжатую библиотеку и ручной (common.js), он обычно не сжимается, т.к. весит немного.
В папке app>sass создаем файл libs.sass, куда будем сваливать все css библиотеки.
Пишем в него:
@import "app/libs/magnific-popup/dist/magnific-popup" //если расширение css, то его можно не писать
сохраняем.
Устанавливаем утилиты, которые будут сжимать css и добавлять в название суффикс mini:
npm i gulp-cssnano gulp-rename --save-dev
И опять после установки их нужно подключить в основном файле gulpfile.js. последние 2 строчки это они:
var gulp = require('gulp'), sass = require('gulp-sass'), browserSync = require('browser-sync'), concat = require('gulp-concat'), uglify = require('gulp-uglifyjs'), cssnano = require('gulp-cssnano'), rename = require('gulp-rename')
пишем таск для них:
gulp.task('css-libs', function(){ //просто называем этот таск, как css-libs return gulp.src('app/css/libs.css') .pipe(cssnano()) //сжимаем файл .pipe(rename({suffix: '.min'})) //переименовываем файл и придаем ему суффикс min .pipe(gulp.dest('app/css')) })
Сюда можно, но не обязательно перенести [‘sass’] из таска watch. Получится вот так:
gulp.task('css-libs', ['sass'], function(){ //просто называем этот таск, как css-libs return gulp.src('app/css/libs.css') .pipe(cssnano()) //сжимаем файл .pipe(rename({suffix: '.min'})) //переименовываем файл и придаем ему суффикс min .pipe(gulp.dest('app/css')) //выгружаем })
Подключаем css стили в html документ:
<link rel="stylesheet" href="css/libs.min.css"> <link rel="stylesheet" href="css/main.css">
Сваливаем готовое в папку dist
Для этого создаем таск
gulp.task('build', function(){ var buildCss = gulp.src([ 'app/css/main.css', 'app/css/libs.min.css' ]) .pipe(gulp.dest('dist/css')); var buildFonts = gulp.src('app/fonts/**/*') .pipe(gulp.dest('dist/fonts')); var buildJs = gulp.src('app/js/**/*') .pipe(gulp.dest(dist/js)); var buildHtml = gulp.src('app/*.html') .pipe(gulp.dest('dist')); })
Для того, чтобы перестраховаться, лучше бы для начала очистить папку dist от прежних файлов, если там что-то было.
Для этого устанавливаем утилиту для удаления файлов, пишем в командной строке:
npm i del --save-dev
После успешной установки, ее надо подключить в файл gulpfile.js, как обычно:
cleanDir = require('del');
Оптимизация изображений в gulp
Устанавливаем пакет для оптимизации изображений
npm i gulp-imagemin imagemin-pngquant --save-dev
Подключаем его в gulpfile.js
imagemin = require('gulp-imagemin'), pngquant = require('gulp-pngquant')
Пишем таск для них.
gulp.task('img', function(){ return gulp.src('app/img/**/*') .pipe(imagemin({ interlaced: true, progressive: true, svgoPlugins: [{removeViewBox: false}], une: [pngquant()] })) .pipe(gulp.dest('dist/img')); })
И вставляем вызов этого таск в таск build, т.е. добавляем
gulp.task('build', ['clean', 'img', 'sass', 'scripts'], function(){
теперь при запуске таска build будут все эти таски выполняться последовательно, которые в него запихали.
Если изображений много, то надо установить кеш
npm i gulp-cache --save-dev
потом подключаем его в начале файла gulpfile.js:
cache = require('gulp-cache');
И немного модифицируем после этого таск img:
gulp.task('img', function(){ return gulp.src('app/img/**/*') .pipe(cache(imagemin({ //сюда добавили cache И открывающую скобку interlaced: true, progressive: true, svgoPlugins: [{removeViewBox: false}], une: [pngquant()] }))) //сюда добавили еще одну закрывающую скобку .pipe(gulp.dest('dist/img')); })
Если мы поменяем папку для изображений или файлы, которые хотим оптимизировать, то у нас не будет работать минификация изображений из-за кеша.
Поэтому надо написать новый таск для очистки кеша:
gulp.task('clearCache', function(){ return cache.clearAll() })
Он запускается чисто вручную, т.к. нужен редко, и нет необходимости его встраивать его в какой-либо таск.
Автоматическое создание вендорных префиксов в gulp
Для этого сначала устанавливаем пакет:
npm i gulp-autoprefixer
Как всегда теперь подключаем его в начале файла.
autoprefixer = require('gulp-autoprefixer')
И добавляем новый пайп в таск sass:
.pipe(autoprefixer(['last 15 versions', '> 1%', 'ie 8', 'ie 7'], {cascade: true}))
Резюме
Итоговое содержание файла gulpfile.js
var gulp = require('gulp'), sass = require('gulp-sass'), browserSync = require('browser-sync'), concat = require('gulp-concat'), uglify = require('gulp-uglifyjs'), cssnano = require('gulp-cssnano'), rename = require('gulp-rename'), cleanDir = require('del'), imagemin = require('gulp-imagemin'), pngquant = require('imagemin-pngquant'), cache = require('gulp-cache'), autoprefixer = require('gulp-autoprefixer'); gulp.task('sass', function(){ return gulp.src('app/sass/**/*.sass') //откуда брать файлы .pipe(sass()) //pipe - означает "выполнить" .pipe(autoprefixer(['last 15 versions', '> 1%', 'ie 8', 'ie 7'], {cascade: true})) .pipe(gulp.dest('app/css')) //куда сваливать откомпилированные файлы .pipe(browserSync.reload({stream: true})) }); gulp.task('scripts', function(){ return gulp.src([ 'app/libs/jquery/dist/jquery.min.js', 'app/libs/magnific-popup/dist/jquery.magnific-popup.min.js', //какие файлы брать, через запятую, это массив ]) .pipe(concat('libs.min.js')) //что с ними делать, в данном случае соединять .pipe(uglify()) //минимизировать .pipe(gulp.dest('app/js')) //куда сваливать }); gulp.task('css-libs', ['sass'] , function(){ //просто называем этот таск, как css-libs return gulp.src('app/css/libs.css') .pipe(cssnano()) //сжимаем файл .pipe(rename({suffix: '.min'})) //переименовываем файл и придаем ему суффикс min .pipe(gulp.dest('app/css')) //выгружаем }); gulp.task('browser-sync', function(){ browserSync({ server: { baseDir: 'app' }, notify: false }); }); gulp.task('clean', function(){ return cleanDir.sync('dist') }) gulp.task('clearCache', function(){ return cache.clearAll() }) gulp.task('img', function(){ return gulp.src('app/img/**/*') .pipe(cache(imagemin({ interlaced: true, progressive: true, svgoPlugins: [{removeViewBox: false}], une: [pngquant()] }))) .pipe(gulp.dest('dist/img')); }) gulp.task('watch', ['browser-sync' , 'css-libs', 'scripts'], function(){ //в квадратных скобках это то, что нужно выполнить ПРЕДВАРИТЕЛЬНО, перед запуском самого этого таска. gulp.watch('app/sass/**/*.sass', ['sass']); gulp.watch('app/*.html', browserSync.reload) gulp.watch('app/js/**/*.js', browserSync.reload) }); gulp.task('build', ['clean', 'img', 'sass', 'scripts'], function(){ var buildCss = gulp.src([ 'app/css/main.css', 'app/css/libs.min.css' ]) .pipe(gulp.dest('dist/css')); var buildFonts = gulp.src('app/fonts/**/*') .pipe(gulp.dest('dist/fonts')); var buildJs = gulp.src('app/js/**/*') .pipe(gulp.dest('dist/js')); var buildHtml = gulp.src('app/*.html') .pipe(gulp.dest('dist')); })
Итоговое содержание файла package.json
{ "name": "myproject", "version": "1.0.0", "description": "My First Gulp Project", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "author": "IvanIvanov", "license": "ISC", "devDependencies": { "browser-sync": "^2.18.13", "del": "^3.0.0", "gulp": "^3.9.1", "gulp-cache": "^1.0.1", "gulp-concat": "^2.6.1", "gulp-cssnano": "^2.1.2", "gulp-imagemin": "^3.4.0", "gulp-rename": "^1.2.2", "gulp-sass": "^3.1.0", "gulp-uglifyjs": "^0.6.2", "imagemin-pngquant": "^5.0.1" }, "dependencies": { "gulp-autoprefixer": "^4.0.0" } }
Структура папок
- app - dist - node_modules .bowerrc gulpfile.js package.json
п.с. статья построена на базе видосика канала webdesigner master:
Спасибо за видосик, Алексей, всё толково и понятно.
Огромное спасибо!!!Долго искал как выгрузить проект из gulp только вы и помогли !!!
Всегда пожалуйста 🙂