Gulp first

Установка

1. Node.js с сайта на компьютер (только в первый раз)
2. Открыть Node.js command prompt В открывшемся терминале написать:
	1. **npm** - проверка версии npm
	2. **npm ls -g** - проверка глобально(-g) установленных пакетов (должно быть empty)
	3. **npm i -g gulp** - установка gulp (глобально)
	4. **cd /.../.../www** - заходим в папку где будем работать
	5. **npm init** - команда создает проект в папке (фаил package.json)
	6. **npm i --save-dev gulp -** установит gulp и запишет в package.json это действие (в дальнейшем мы сможем быстро разворачивать gulp)
	7. создаем в директории **gulpfile.js (**через текстовый редактор**)**
	8. прописываем в gulpfile.js **var gulp = require('gulp');**
		* так мы назначаем переменную **gulp**, которая отправляется в папку node\_modules, находит и запускает там gulp.
	9. Ниже в gulpfile.js мы будем писать **gulp.task('***имя таска***', function() {***тело таска* **})**
		* **task -** это задача
3. Установка необходимых пакетов
	* для перезагрузки браузера
		+ в консоли - **npm i browser-sync --save-dev**
		+ в gulpfile.js вначале добавим переменную

```
var browserSync = require('browser-sync');

```

* затем ниже пишем таск

```
gulp.task('browser-sync', function() {
    browserSync.init({
        server: {
            baseDir: "www/"
        }
    });
});

```

* gulp-clean-css - минификация css
* npm i gulp-sass --save-dev - установить gulp-SASS локально для проекта
* npm i gulp-autoprefixer --save-dev - плагин расставляет браузерные префиксы
* gulp-notify — выводит ошибки при сборке Gulp в виде системных сообщений
* gulp-csscomb - "причесывает" css /\* альтернатива? gulp-csslint — CSS линтер \*/
* gulp-htmlhint — HTML валидатор.
* gulp-uglify - JavaScript компрессор.
* gulp-rename - переименование файлов
* gulp-concat - перемещение файлов

1. 1. npm init - (тупо везде можем жать Entr) создает package.json (с его помощью можно будет инициализировать gulp в любой папке\проекте)
	2. создать в текущей папке проекта фаил gulpfile.js
	3. Теперь подключаем все пакеты, пишим в gulpfile.js :

```
var gulp           = require('gulp'),
    gutil          = require('gulp-util' ),
    sass           = require('gulp-sass'),
    browserSync    = require('browser-sync'),
    concat         = require('gulp-concat'),
    uglify         = require('gulp-uglify'),
    cleanCSS       = require('gulp-clean-css'),
    rename         = require('gulp-rename'),
    autoprefixer   = require('gulp-autoprefixer'),
    notify         = require("gulp-notify"),
    gulpCsscomb    = require("gulp-csscomb"),
    gulpHtmlhint   = require("gulp-htmlhint");

```

Настраиваем пакеты (пишим ниже, там же в gulpfile.js)

```
// Сервер и автообновление страницы Browsersync
gulp.task('browser-sync', function() {
  browserSync({
      server: {
        baseDir: 'app'
      },
     notify: false,
     // tunnel: true,
     // tunnel: "projectmane", //Demonstration page: http://projectmane.localtunnel.me
    });
});

// Минификация пользовательских скриптов проекта и JS библиотек в один файл
 gulp.task('js', function() {
     return gulp.src([
       'app/libs/jquery/dist/jquery.min.js',
     'app/js/common.js', // Всегда в конце
       ])
    .pipe(concat('scripts.min.js'))
      .pipe(uglify()) // Минимизировать весь js (на выбор)
   .pipe(gulp.dest('app/js'))
    .pipe(browserSync.reload({stream: true}));
 });
 gulp.task('sass', function() {
     return gulp.src('app/sass/**/*.sass')
     .pipe(sass({outputStyle: 'expand'}).on("error", notify.onError()))
     .pipe(rename({suffix: '.min', prefix : ''}))
     .pipe(autoprefixer(['last 15 versions']))
  .pipe(cleanCSS()) // Опционально, закомментировать при отладке
     .pipe(gulp.dest('app/css'))
   .pipe(browserSync.reload({stream: true}));
 });
 gulp.task('watch', ['sass', 'js', 'browser-sync'], function() {
    gulp.watch('app/sass/**/*.sass', ['sass']);
   gulp.watch(['libs/**/*.js', 'app/js/common.js'], ['js']);
   gulp.watch('app/*.html', browserSync.reload);
 });
 gulp.task('default', ['watch']);

```

Настройка gulpCsscomb

* По ссылке http://csscomb.com/config
* ИЛИ Создаем .csscomb.json в папке с проектом И пишим в него

{

```
 {
   "remove-empty-rulesets": true,
   "color-case": "upper",
   "block-indent": "  ",
   "color-shorthand": true,
   "element-case": "lower",
   "eof-newline": true,
   "leading-zero": false,
   "quotes": "double",
   "sort-order-fallback": "abc",
   "space-before-colon": "",
   "space-after-colon": " ",
   "space-before-combinator": " ",
   "space-after-combinator": " ",
   "space-between-declarations": "\n",
   "space-before-opening-brace": " ",
   "space-after-opening-brace": "\n",
   "space-after-selector-delimiter": " ",
   "space-before-selector-delimiter": "",
   "space-before-closing-brace": "\n",
   "strip-spaces": true,
   "tab-size": true,
   "vendor-prefix-align": true

}

```

пока что пакеты не настроены  :

gulpHtmlhint