• Как перевести готовую сборку gulp + sass на 4 версию gulp'a?

    Welens
    @Welens
    Фронтенд
    Ответ написан
    Комментировать
  • Как перевести готовую сборку gulp + sass на 4 версию gulp'a?

    Сначала в консоли (если ранее не устанавливали): npm i -g gulp-cli

    var gulp = require("gulp");
    var sass = require("gulp-sass");
    var plumber = require("gulp-plumber");
    var server = require("browser-sync").create();
    
    
    gulp.task("style", function() {
      return gulp.src("./site/sass/**/*.scss")
        .pipe(plumber())
        .pipe(sass())
        .pipe(gulp.dest("./site/css"))
        .pipe(server.stream());
    });
    
    gulp.task("serve", gulp.series(["style"], function () {
      server.init({
          server: "site/.",
          notify: false,
          open: true,
          cors: true,
          ui: false
      });
    
      gulp.watch("./site/**/*.scss", gulp.parallel(["style"]));
      gulp.watch("*.html").on("change", server.reload);
    }));


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

    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
    Ответ написан
    Комментировать