Какие плагины Gulp вы используете для front-end?

Question

[Aleksandr]

Я использую:
gulp-less
gulp-uglify
gulp-imagemin
gulp-concat
gulp-csso
gulp-watch

А что входит в вашу сборку? Какие плагины?
Может что-то заменить или добавить?

Answer 1

[Serj-One]

Кусок моего галпфайла. Что-то снабдил комментами.

var connect      = require('browser-sync'); // livereload
var sass         = require('gulp-sass'); // Кому что, я использую SCSS
var csscomb      = require('gulp-csscomb'); // Обязательно!
var cssmin       = require('gulp-cssmin');
var imageop      = require('gulp-image-optimization'); // Лучшая альтернатива gulp-imagemin
var concat       = require('gulp-concat');
var uglify       = require('gulp-uglify');
var plumber      = require('gulp-plumber'); // Не позволяет плагину умереть молча
var autoprefixer = require('gulp-autoprefixer');
var ngrok        = require('ngrok'); // Пробрасываем локальному серверу путь наружу для для заказчика
var spritesmith  = require('gulp.spritesmith'); // Спрайты
var notify       = require('gulp-notify'); // Уведомления
var merge        = require('merge-stream'); // Деление таска на разные потоки

Конечно, есть много полезного и кроме этого. Но сам верстаю в WebStorm, в котором огромное количество плюшек реализованы куда удобней, чем в галп-плагинах.

Comments

[Alexander Lashchevsky]

> Кому что, я использую CSCC
CSCC или SCSS?

[Serj-One]

Alexander Lashchevsky: Пятница, ночь.) Спасибо за поправку.

[Сергей Протько]

Serj-One: ну а я less и postcss... не нравится мне scss, хотя и его приходится использовать периодически.

[Сергей Протько]

Serj-One: а почему cssmin а не csso? сильнее жмет?

[Serj-One]

Сергей Протько: Скорей банально в силу привычки. Судя по докам и статьям на том же хабре, csso мощней, функциональней, и куда более гибок в настройке, но перейти на него никак руки не доходят, всегда есть более нужная задача.

[Aleksandr]

Интересно, спасибо

[webdisigner]

Сергей Протько: Как вы боретесь с кешированием, у меня стили не обновляются или обновляются на данные сохраненые ранее, gulp-rev или gulp-rev-append?

[Сергей Протько]

webdisigner: я тупо использую webpack (планирую переходить на jspm + system.js который полностью решает проблемы инкрементных билдов).

Answer 2

[Artem Malko]

Рекомендую ознакомится с TARS, есть все, что нужно)

Comments

[Константин]

Сказал создатель TARS'a ;)

[Artem Malko]

Константин: ну да) Ответ же подходит как раз)

Answer 3

[Vlad Harbarchuk]

var gulp = require('gulp');
var browserSync = require('browser-sync').create(); // в 10 раз лучше livereload
var stylus = require('gulp-stylus');
var typographic = require('typographic');
var nib = require('nib');
var jade = require('gulp-jade');
var imagemin = require('gulp-imagemin');
var uglify = require('gulp-uglify');
var notify = require("gulp-notify");
var plumber = require('gulp-plumber');

Comments

[Николай Антонов]

Скажите пожалуйста чем лучше лайврелоада browser-sync?

[Николай Антонов]

И скиньте пожалуйста полностью ваш gulpfile.

[Vlad Harbarchuk]

не нужно плагин ставить для браузера, можно лайврелоадить сразу в нескольких окнах и даже на смартах и видеть результат, и т.д. у них там на сайте пишет много) www.browsersync.io

[Николай Антонов]

Vlad Harbarchuk: а что быстрее работает?

Answer 4

[Николай Антонов]

autoprefixer = require('gulp-autoprefixer'),
plumber = require('gulp-plumber'), // от вас узнал о его существовании, спасибо
sass = require('gulp-sass'),
sourcemaps = require('gulp-sourcemaps'), // сорсмап для scss
gulpJade = require('gulp-jade'), // jade шаблонизатор
livereload = require('gulp-livereload'), // лень страницу перезагружать
uncss = require('gulp-uncss'), // удалить лишний css

Comments

[Антон Фроловский]

Вот есть в команде несколько человек то меня раздражают все эти livereload, так как я ими не пользуюсь. Что вам мешает ставить плагин в браузер и в редактор кода для этого дела? :)

[Николай Антонов]

В сублайм нет таких плагинов, а webstorm на java(медленно работает). Привык уже. Если есть лучшая альтернатива для сублайма то поделитесь пожалуйста!

Answer 5

[Олег]

gulp = require 'gulp'                       # Gulp
coffeeScript = require 'coffee-script'      # CoffeeScript
stylus = require 'gulp-stylus'              # stylus->css
rename = require 'gulp-rename'              # Новые имена
minifyCss = require 'gulp-minify-css'       # Сжимаем CSS
coffee = require 'gulp-coffee'              # CoffeeScript->JS
uglify = require 'gulp-uglify'              # Сжимаем JS
jade = require 'gulp-jade'                  # Jade->HTML
connect = require 'gulp-connect'            # Перезагрузка
plumber = require 'gulp-plumber'            # Мониторим ошибки
tinypng = require 'gulp-tinypng-compress'   # Сжимаем изображения
spritesmith = require 'gulp.spritesmith'    # Мутим растр. спрайт
svgSprite = require 'gulp-svg-sprite'       # Мутим вектор. спрайт
svgmin = require 'gulp-svgmin'              # Сжимаем вектор.
clean = require 'gulp-clean'                # Удаляем всякое
ttf2woff = require 'gulp-ttf2woff'          # ttf->woff
base64 = require 'gulp-base64-inline'       # img->base64
concat = require 'gulp-concat'              # соединяем файлы

Answer 6

[ascrazy]

var del          = require('del');
var gulp         = require('gulp');
var gutil        = require('gulp-util');
var rename       = require('gulp-rename');
var plumber      = require('gulp-plumber');
var livereload   = require('gulp-livereload');
var sourcemaps   = require('gulp-sourcemaps');
var source       = require('vinyl-source-stream');
var buffer       = require('vinyl-buffer');
var appcache     = require('gulp-manifest');
var template     = require('gulp-template');
var gulpif       = require('gulp-if');

var sass         = require('gulp-sass');
var postcss      = require('gulp-postcss');
var autoprefixer = require('autoprefixer-core');
var mincss       = require('gulp-minify-css');

var browserify   = require('browserify');
var watchify     = require('watchify');
var uglify       = require('gulp-uglify');
var remapify     = require('remapify');

Answer 7

[Aleksandr]

Теперь так выглядит мой gulpfile

var gulp = require('gulp'),
    watch = require('gulp-watch'),
    prefixer = require('gulp-autoprefixer'),
    uglify = require('gulp-uglify'),
    sass = require('gulp-sass'),
    csscomb = require('gulp-csscomb'),
    uncss = require('gulp-uncss'),
    concat = require('gulp-concat'),
    cssmin = require('gulp-minify-css'),
    imagemin = require('gulp-imagemin'),
    pngquant = require('imagemin-pngquant'),
    rimraf = require('rimraf'),
    browserSync = require("browser-sync"),
    reload = browserSync.reload;

Comments

[Максим Гатилин]

я бы заменил uncss на purify , т.к uncss не анализирует js

[Aleksandr]

gatilin222: Возьму на заметку, спасибо.

Answer 8

[Иван Сергеевич]

var gulp = require('gulp'),
plumber = require('gulp-plumber'),
gutil = require('gulp-util'),
watch = require('gulp-watch'),

rigger = require('gulp-rigger'),
clean = require('gulp-clean'),

browserSync = require("browser-sync"),
reload = browserSync.reload,

imagemin = require('gulp-imagemin'),
pngquant = require('imagemin-pngquant'),
spritesmith = require('gulp.spritesmith'),

jade = require('gulp-jade'),

uglify = require('gulp-uglify'),
stylish = require('jshint-stylish'),
jshint = require('gulp-jshint'),
jscs = require('gulp-jscs'),

sass = require('gulp-sass'),
postcss = require('gulp-postcss'),
autoprefixer = require('autoprefixer-core'),
doiuse = require('doiuse'),

cmq = require('gulp-combine-media-queries'),
cssmin = require('gulp-cssmin'),
csscomb = require('gulp-csscomb'),
shrthnd = require('gulp-shorthand');

После этого вопроса мой галпфайл расширится

Answer 9

[Илья]

Добра! Мой список модулей. Подробнее можно узнать в моей сборке frontend.

Общего назначения:

gulp-changed
gulp-debug
gulp-flatten
gulp-if
gulp-load-plugins
gulp-notify
gulp-plumber
gulp-rename
gulp-sourcemaps
gulp-util
gulp-watch

Для стилей:

gulp-autoprefixer
gulp-clean-css
gulp-combine-mq
gulp-concat
gulp-stylus
gulp-uncss

Для картинок:
gulp-imagemin

Для шаблона:

gulp-jade
gulp-jade-globbing
gulp-jsbeautifier

Answer 10

[Константин Величко]

Здесь посмотрите https://github.com/zoxon/gulp-front