@Ld1948

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

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

Собственно сама ошибка (https://toster.ru/q/623291) Может тут найду помощь :)
  • Вопрос задан
  • 239 просмотров
Решения вопроса 3
RedEagle69
@RedEagle69
Html-верстальщик, Front-end разработчик
Попробуйте(осторожно, ридми на эльфийском):
https://github.com/RedEagleAP/light-boilerplate
Ответ написан
delphinpro
@delphinpro Куратор тега Sass
frontend developer
Вот простой конфиг

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 <delphinpro@yandex.ru>",
  "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'));
Структура каталогов
5cb718165250b202742020.png
Ответ написан
Комментировать
Yevhen89
@Yevhen89
Front-end developer
вообще вот)
https://github.com/YevhenOksenchuk/my-gulp-4?files=1

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

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

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