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

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

А что входит в вашу сборку? Какие плагины?
Может что-то заменить или добавить?
  • Вопрос задан
  • 6769 просмотров
Решения вопроса 7
Serj-One
@Serj-One
i'm sexy and i know it
Кусок моего галпфайла. Что-то снабдил комментами.
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, в котором огромное количество плюшек реализованы куда удобней, чем в галп-плагинах.
Ответ написан
artemmalko
@artemmalko
Frontend developer 2gis
Рекомендую ознакомится с TARS, есть все, что нужно)
Ответ написан
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');
Ответ написан
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
Ответ написан
werty1001
@werty1001
undefined
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'              # соединяем файлы
Ответ написан
Комментировать
@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');
Ответ написан
Комментировать
@Sashjkeee Автор вопроса, куратор тега CSS
f-e
Теперь так выглядит мой 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;
Ответ написан
Пригласить эксперта
Ответы на вопрос 3
@gosolivs
Front-end developer
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');

После этого вопроса мой галпфайл расширится
Ответ написан
Комментировать
style_nes
@style_nes
Фронтенд разработчик
Добра! Мой список модулей. Подробнее можно узнать в моей сборке 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
Ответ написан
Комментировать
Zoxon
@Zoxon
Веб-разработчик
Здесь посмотрите https://github.com/zoxon/gulp-front
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы