Мой Справочник | CSS3

Мой Справочник | CSS3 | Gulp

Установка
Gulp	1. Устанавливаем node.js для вашей ОС, проверяем: `node -v` Также вместе с node должен установиться пакетный менеджер npm, проверяем: `npm -v` 2. Устанавливаем gulp: `npm i -g gulp` (глобально) `npm i gulp --save-dev` (локально) Проверяем: `gulp --version` 3. npm - это пакетный менеджер и с его помощью можно устанавливать не только gulp, но и многие другие пакеты, например чтобы установить bootstrap нужно прописать команду `npm i bootstrap`, bootstrap будет установлен в /node_modules/bootstrap/	Официальный сайт Gulp Все установки нужно производить в директории с проектом
Настройки проекта package.json	`npm init`	Будет создан файл package.json с информацией о проекте
Плагины
Компилятор less-кода в css	`npm i -save-dev gulp-less // Запуск плагина: gulp less`	// Подключение плагина: `var less = require('gulp-less');`
Компилятор sass-кода в css	`npm i -save-dev gulp-sass // Запуск плагина: gulp sass`	// Подключение плагина: `var sass = require('gulp-sass');`
Компилятор coffee-кода в js	`npm i -save-dev gulp-coffee // Запуск плагина: gulp coffee`	// Подключение плагина: `var coffee = require('gulp-coffee');`
Мнгновенное сохранение изменений	`npm install --save-dev gulp-watch // Запуск плагина: gulp watch`	// Подключение плагина: `var watch = require('gulp-watch');`
Конкатинатор	`npm install --save-dev gulp-concat // Запуск плагина: gulp concat`	// Подключение плагина: `var concat = require('gulp-concat');`
Минификатор css	`npm install --save-dev gulp-minify-css // Запуск плагина: gulp minify-css`	// Подключение плагина: `var minifyCss = require('gulp-minify-css');`
Минификатор js	`npm install --save-dev gulp-uglify // Запуск плагина: gulp uglify`	// Подключение плагина: `var uglify = require('gulp-uglify');`
Сжатие картинок	`npm install --save-dev gulp-imagemin // Запуск плагина: gulp imagemin`	// Подключение плагина: `var imagemin = require('gulp-imagemin');`
Синхронизатор	`npm install --save-dev browser-sync`	// Подключение плагина: `var browserSync = require('browser-sync');`
Настройка
gulpfile.js	1. Создаём файл-конфигурацию в директории проекта gulpfile.js и в нём пишем js-код: //2. Подключение плагинов: var gulp = require('gulp'); var less = require('gulp-less'); var browserSync = require('browser-sync'); //3. Настройка плагина less: gulp.task('less', function() { //консольная команда gulp.src('less/*/.less') //директория источника // * - любое название файла // ** - любая вложенность // ['...', '...'] - перечисление // .+(scss\|sass\|less) - перечисление форматов файлов // ! - кроме файла .pipe.(less()) //обработка .pipe(gulp.dest('css')); //директория назначения .pipe(browserSync.reload({stream: true})) }); //4. Настройка плагина watch: gulp.task('watch', function() { gulp.watch('less//.less', ['browser-sync', 'less']) // какие таски будем // выполнять ['less'] при изменении файлов less .pipe(gulp.dest('css')); }); //5. Настройка плагина browser-sync: gulp.task('browser-sync', function() { browserSync({ server: { baseDir: 'app' }, notify: false }); }); 6. В консоли встаём в директорию с проектом, пишем команду: gulp less После этого у нас создался style.css путём преобразования файла style.less	Подключаем плагины, сохраняем их в переменные, указываем src less-файла, сохраняем в папку css, по автомату будет назван style.css, берёт имя у style.less