Не могу найти нормальные шаблоны для адаптивной верстки (gulp + sass + browser-sync)?

Question

[Fire Place]

Подскажите пожалуйста шаблоны для сборки сайта, желательно на галпе с браузер синком и препроцессоре сасс, пытался поставить сам такую связку, но получаю одну и ту-же ошибку...

Собственно сама ошибка (https://toster.ru/q/623291) Может тут найду помощь :)

Answer 1

[Александр Присяжнюк]

Попробуйте(осторожно, ридми на эльфийском):
https://github.com/RedEagleAP/light-boilerplate

Comments

[Fire Place]

А есть что-нибудь по-проще? (Слишком много всего, не понимаю что к чему :С )

[Александр Присяжнюк]

Андрей Хомяк, там в ридми написано чем и как пользоваться. По сути вы можете начать юзать и не парится, там большинство на галпе, а то что не понимаете потом выучите. Юзать можно сразу.) Это не больно.)

Answer 2

[Сергей delphinpro]

Вот простой конфиг

package.json

{
  "name": "mysite.local",
  "version": "1.0.0",
  "description": "",
  "main": "gulpfile.js",
  "dependencies": {
    "bs-grid-system": "^2.0.3",
    "jquery": "^3.3.1",
    "normalize.css": "^8.0.1",
    "tiny-slider": "^2.9.0",
    "whatwg-fetch": "^3.0.0"
  },
  "devDependencies": {
    "@babel/core": "^7.2.0",
    "@babel/preset-env": "^7.2.0",
    "browser-sync": "^2.26.3",
    "gulp": "^3.9.1",
    "gulp-autoprefixer": "^6.0.0",
    "gulp-babel": "^8.0.0",
    "gulp-changed-in-place": "^2.3.0",
    "gulp-concat": "^2.6.1",
    "gulp-plumber": "^1.2.1",
    "gulp-sass": "^4.0.2",
    "gulp-sequence": "^1.0.0",
    "gulp-sourcemaps": "^2.6.4",
    "gulp-twig": "^1.2.0"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "delphinpro <[e-mail]>",
  "license": "MIT"
}

gulpfile.js

const gulp = require('gulp');
const sass = require('gulp-sass');
const twig = require('gulp-twig');
const babel = require('gulp-babel');
const concat = require('gulp-concat');
const plumber = require('gulp-plumber');
const sequence = require('gulp-sequence');
const sourcemaps = require('gulp-sourcemaps');
const autoprefixer = require('gulp-autoprefixer');
const changed = require('gulp-changed-in-place');
const bs = require('browser-sync').create();

gulp.task('sass', function () {
    return gulp.src([
        './node_modules/normalize.css/normalize.css',
        './node_modules/tiny-slider/dist/tiny-slider.css',
        './src/sass/**/*.scss',
    ])
        .pipe(plumber())
        .pipe(sourcemaps.init())
        .pipe(sass({ outputStyle: 'nested' }))
        .pipe(autoprefixer())
        .pipe(concat('main.css'))
        .pipe(sourcemaps.write('.'))
        .pipe(gulp.dest('./public_html/design/'))
        .pipe(bs.stream())
        ;
});

gulp.task('js:vendor', function (done) {
    gulp.src([
        './node_modules/jquery/dist/jquery.min.js',
        './node_modules/whatwg-fetch/dist/fetch.umd.js',
        './node_modules/tiny-slider/dist/min/tiny-slider.js',
    ])
        .pipe(plumber())
        .pipe(sourcemaps.init({ loadMaps: true }))
        .pipe(concat('vendor.js'))
        .pipe(sourcemaps.write('.'))
        .pipe(gulp.dest('./public_html/design/'))
        .on('end', done)
    ;
});

gulp.task('js', function (done) {
    gulp.src([
        './src/js/main.js',
        './src/js/**/*.js',
    ])
        .pipe(plumber())
        .pipe(sourcemaps.init())
        .pipe(babel())
        .pipe(concat('main.js'))
        .pipe(sourcemaps.write('.'))
        .pipe(gulp.dest('./public_html/design/'))
        .on('end', function () {
            bs.reload();
            done();
        })
    ;
});

gulp.task('twig', function (done) {
    gulp.src([
        './src/twig/*.twig',
    ])
        .pipe(plumber())
        .pipe(twig({
            base: [__dirname],
        }))
        .pipe(changed({ firstPass: true }))
        .pipe(gulp.dest('./public_html/'))
        .on('end', function () {
            bs.reload();
            done();
        })
    ;
});

gulp.task('serve', function () {
    bs.init({
        ui: false,
        //proxy: 'mysite.local',
        server : './public_html',
        browser: ['chrome'],
    });

    //    gulp.watch('./public_html/*.html').on('change', bs.reload);
    gulp.watch('./src/sass/**/*.scss', ['sass']);
    gulp.watch('./src/js/**/*.js', ['js']);
    gulp.watch('./src/twig/**/*.twig', ['twig']);
});

gulp.task('default', sequence(['twig', 'sass', 'js', 'js:vendor'], 'serve'));

Структура каталогов

Answer 3

[Евгений Оксенчук]

вообще вот)
https://github.com/YevhenOksenchuk/my-gulp-4?files=1

BrowserSync, sass, rigger, rename, normolize и тому подобное, скачай себе и в директории npm install -S
Все поставится, там уже шаблон для верстки есть и пример Риггера, всё поймёшь, все работает) может что то упустил, редактирую по ходу дела)