Хочу собрать нормальный gulpfile.js, какие плагины вы используете?

Question

[Сергей Горячев]

Хочу настроить нормально наконец-то gulpfile.js.
Но застопорился на выборе плагинов из-за обилия таковых)))
Какие вы используете в работе и почему?

Answer 1

[sergey]

вот полный перечень, а почему? это сложилось со временем, почитать о них можно в нете.

gulp = require('gulp'),
sass = require('gulp-ruby-sass'),
autoPrefixer = require('gulp-autoprefixer'),
cleanCSS = require('gulp-clean-css'),
uglify = require('gulp-uglify'),
minifyHTML = require('gulp-minify-html'),
imageMin = require('gulp-imagemin'),
pngquant = require('imagemin-pngquant'),
 jsHint = require('gulp-jshint'),
concat = require('gulp-concat'),
cache = require('gulp-cache'),
del = require('del'),
gulpFilter = require('gulp-filter'),
mainBowerFiles = require('main-bower-files'),
connect = require('gulp-connect'),
gulpIf = require('gulp-if'),
util = require('gulp-util'),
plumber = require('gulp-plumber'),
rigger = require('gulp-rigger'),
spritesmith = require('gulp.spritesmith'),
size = require('gulp-size'),
opn = require('opn');

Comments

[Сергей Горячев]

А вот почему gulp-ruby-sass, а не gulp-sass?

[Сергей Горячев]

Или почему gulp-minify-html, а не какой-нибудь jade?

[sergey]

Sergey Goryachev: gulp-ruby-sass, а не gulp-sass? - на linux это по умолчанию, там была какая-то заморочка, уже и не помню, а вот что касательно jade, то есть и такой, с ним, просто всему свое

[Сергей Горячев]

SM: > вот что касательно jade, то есть и такой, с ним, просто всему свое
Ну, а поконкретнее? Что и для какой цели?
Понимаю, что можно методом проб и ошбиок, но проще на чужом опыте)))

[sergey]

Sergey Goryachev: jade для больших проектов, html-minify - для лендов, одностраничников

[Сергей Горячев]

SM: Долго я думал, но все же, чем например Jade плох для лендосов?

Answer 2

[Serj-One]

"devDependencies": {
    "browser-sync": "^2.18.8",
    "gulp": "^3.9.1",
    "gulp-autoprefixer": "^3.1.1",
    "gulp-concat": "^2.6.1",
    "gulp-csscomb": "^3.0.8",
    "gulp-csso": "^2.0.0",
    "gulp-newer": "^1.3.0",
    "gulp-plumber": "^1.1.0",
    "gulp-rigger": "^0.5.8",
    "gulp-sass": "^3.1.0",
    "gulp-tinypng": "^1.0.2",
    "gulp-uglify": "^2.0.1",
    "gulp-watch": "^4.3.11"
  }

В зависимости от проекта список может расширятся, но костяк таков.

Answer 3

[Сергей delphinpro]

Вариант 1

"devDependencies": {
    "browser-sync": "^2.17.1",
    "del": "^2.2.2",
    "gulp": "^3.9.1",
    "gulp-autoprefixer": "*",
    "gulp-changed": "^1.3.2",
    "gulp-changed-in-place": "^2.0.3",
    "gulp-cssnano": "^2.1.2",
    "gulp-data": "^1.2.1",
    "gulp-if": "^2.0.1",
    "gulp-imagemin": "^3.0.3",
    "gulp-notify": "^2.2.0",
    "gulp-rename": "^1.2.2",
    "gulp-rigger": "^0.5.8",
    "gulp-sass": "^2.3.2",
    "gulp-sequence": "^0.4.6",
    "gulp-sourcemaps": "^1.6.0",
    "gulp-twig": "^0.5.0",
    "gulp-uglify": "^2.0.0",
    "require-dir": "^0.3.1"
  }

Вариант 2

"devDependencies": {
    "autoprefixer": "^6.5.3",
    "babel-core": "^6.18.2",
    "babel-loader": "^6.2.8",
    "babel-preset-es2015": "^6.18.0",
    "babel-preset-stage-0": "^6.16.0",
    "browser-sync": "^2.18.2",
    "css-loader": "^0.26.0",
    "del": "^2.2.2",
    "extract-text-webpack-plugin": "^1.0.1",
    "file-loader": "^0.9.0",
    "gulp": "^3.9.1",
    "gulp-autoprefixer": "^3.1.1",
    "gulp-changed": "^1.3.2",
    "gulp-changed-in-place": "^2.0.3",
    "gulp-concat": "^2.6.1",
    "gulp-if": "^2.0.2",
    "gulp-imagemin": "^3.1.1",
    "gulp-notify": "^2.2.0",
    "gulp-rename": "^1.2.2",
    "gulp-sass": "^2.3.2",
    "gulp-sequence": "^0.4.6",
    "gulp-sourcemaps": "^1.9.1",
    "gulp-util": "^3.0.7",
    "node-sass": "^3.13.0",
    "require-dir": "^0.3.1",
    "sass-loader": "^4.0.2",
    "style-loader": "^0.13.1",
    "webpack": "^1.13.3",
    "webpack-stream": "^3.2.0"
  },

Comments

[deeppines]

А можно вопрос по сборке? Зачем отдельно тащить модуль del? Насколько я понимаю он подтягивается вместе с gulp'ом, а дальше его можно просто зареквйрить в gulp.js

[Сергей delphinpro]

Lucas Kane: откуда информация? попробовал сейчас сделать npm i gulp в новой папке - в node_modules нет этого модуля

[deeppines]

Сергей: Все таки моя ошибка, del подтягивался вместе с file-entry-cache, потому таск с ним отрабатывал и я ошибочно думал, что объявлять его в зависимостях нет нужды.

[Сергей delphinpro]

Lucas Kane: ну в любом случае c новой плоской структурой папки node_modulesсобственное объявление не будет лишним, даже если модуль подтянется другими зависимостями.

Answer 4

[deeppines]

Вот еще вариант

"devDependencies": {
        "gulp": "^3.9.1",
        "gulp-bower": "^0.0.13",
        "gulp-postcss": "^6.0.0",
        "gulp-clean-css": "^2.0.7",
        "gulp-rigger": "^0.5.8",
        "gulp-sass": "^2.3.1",
        "gulp-watch": "^4.3.5",
        "gulp-filter": "^4.0.0",
        "gulp-csscomb": "^3.0.8",
        "gulp-plumber": "^1.1.0",
        "gulp-util": "^3.0.8",
        "gulp-zip": "^4.0.0",
        "gulp-posthtml": "^2.0.0",
        "autoprefixer": "^6.0.0",
        "browser-sync": "^2.12.5",
        "rimraf": "^2.5.2",
        "eslint": "^3.9.1",
        "eslint-config-yandex": "^1.0.6",
        "posthtml-attrs-sorter": "^1.1.0"
    }