Gulp. Урок 2.

Плагины Gulp для работы с css.
1) gulp-concat-css объединяет css файлы.
https://gulpjs.com/plugins/
Установка: npm i gulp-concat-css



В файл gulpfile.js вставляем код:

var gulp = require('gulp');
var concatCss = require('gulp-concat-css');

gulp.task('default', function () {
  return gulp.src('css/*.css') // здесь указываем папку с css-файлами
    .pipe(concatCss("styles/bundle.css"))
    .pipe(gulp.dest('out/')); // в эту папку будет выводится файл
});

В окне команд запускаем Gulp. Пишем: gulp

2) Минифицируем css-файл. Установим плагин gulp-clean-css
https://www.npmjs.com/package/gulp-clean-css
Установка: npm i gulp-clean-css

Пишем в gulpfile.js строку:
var gulp = require('gulp');
var concatCss = require('gulp-concat-css');
let cleanCSS = require('gulp-clean-css');

gulp.task('default', function () {
  return gulp.src('css/*.css') // здесь указываем папку с css-файлами
    .pipe(concatCss("styles/bundle.css"))
.pipe(cleanCSS({compatibility: 'ie8'}))
    .pipe(gulp.dest('out/')); // в эту папку будет выводится файл
});

В окне команд запускаем Gulp. Пишем: gulp

3) Переименовывать файлы можно с помощью плагина gulp-rename
https://www.npmjs.com/package/gulp-rename
Установка: npm i gulp-rename

var gulp = require('gulp');
var concatCss = require('gulp-concat-css');
let cleanCSS = require('gulp-clean-css');
var rename = require("gulp-rename");

Пишем в gulpfile.js строку:
gulp.task('default', function () {
  return gulp.src('css/*.css') // здесь указываем папку с css-файлами
    .pipe(concatCss("styles/bundle.css"))
.pipe(cleanCSS({compatibility: 'ie8'}))
.pipe(rename("bundle.min.css"))
    .pipe(gulp.dest('out/')); // в эту папку будет выводится файл
});

В окне команд запускаем Gulp. Пишем: gulp

В папку out записывается файл bundle.min.css

4) Плагин gulp-uncss удаляет css код, который не используется.
https://www.npmjs.com/package/gulp-uncss
Установка: npm i gulp-uncss

Дополняем файл gulpfile.js:
var gulp = require('gulp');
var concatCss = require('gulp-concat-css');
let cleanCSS = require('gulp-clean-css');
var rename = require("gulp-rename");
var uncss = require('gulp-uncss');

gulp.task('default', function () {
  return gulp.src('css/*.css') // здесь указываем папку с css-файлами
    .pipe(concatCss("styles/bundle.css"))
.pipe(cleanCSS({compatibility: 'ie8'}))
.pipe(rename("bundle.min.css"))
.pipe(uncss({
            html: ['index.html']
        }))
    .pipe(gulp.dest('out/')); // в эту папку будет выводится файл
});

В окне команд запускаем Gulp. Пишем: gulp

5) Плагин, который делает код легко читаемым: gulp-beautify