Gulp – установка и настройка

goncharov Рубрики: Инструменты

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:

  1. css,
  2. fonts,
  3. img,
  4. js,
  5. sass.
  6. и файл 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:

Спасибо за видосик, Алексей, всё толково и понятно.

Подписаться
Уведомить о
guest
2 комментариев
Старые
Новые Популярные
Межтекстовые Отзывы
Посмотреть все комментарии
Юрий
Юрий
7 лет назад

Огромное спасибо!!!Долго искал как выгрузить проект из gulp только вы и помогли !!!

0
Ответить
goncharov
goncharov
Автор
Ответить на  Юрий
7 лет назад

Всегда пожалуйста 🙂

0
Ответить