1
1

Тема: ВЕБ-разработчик 2021 - с нуля до результата!
Урок: 3.4. Планировщик задач Gulp
1-Надо было настроить файл: gulpfile.js (его прикрепили к видеоуроку(не рабочим))
2-Ничего не работает
3-Гуглил решение проблемы, писал точно такой же как на видео, пытался найти ошибку (результат=ничего)
4-Скриншоты на imgur: https://imgur.com/a/2tjhCkm
5-код:

gulpfile.js:

const gulp        = require('gulp');
const browserSync = require('browser-sync');
const sass        = require('gulp-sass');
const cleanCSS = require('gulp-clean-css');
const autoprefixer = require('gulp-autoprefixer');
const rename = require("gulp-rename");

gulp.task('server', function() {

    browserSync({
        server: {
            baseDir: "src"
        }
    });

    gulp.watch("src/*.html").on('change', browserSync.reload);
});

gulp.task('styles', function() {
    return gulp.src("src/sass/**/*.+(scss|sass)")
        .pipe(sass({outputStyle: 'compressed'}).on('error', sass.logError))
        .pipe(rename({suffix: '.min', prefix: ''}))
        .pipe(autoprefixer())
        .pipe(cleanCSS({compatibility: 'ie8'}))
        .pipe(gulp.dest("src/css"))
        .pipe(browserSync.stream());
});

gulp.task('watch', function() {
    gulp.watch("src/sass/**/*.+(scss|sass)", gulp.parallel('styles'));
})

gulp.task('default', gulp.parallel('watch', 'server', 'styles'));



package.json:

{
  "name": "project",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "browser-sync": "^2.27.9",
    "gulp": "^4.0.2",
    "gulp-autoprefixer": "^8.0.0",
    "gulp-clean-css": "^4.3.0",
    "gulp-cli": "^2.3.0",
    "gulp-sass": "^5.1.0"
  }
}



команды которые я устанавливал в терминале:

1-npm init

2-npm install gulp-cli -g

3-npm install gulp-cli --save-dev

4-npm install gulp --save-dev

5-npm i gulp-sass --save-dev

6-npm install -g browser-sync

7-npm i browser-sync --save-dev

8-npm i gulp-autoprefixer --save-dev

9-npm i gulp-clean-css --save-dev


Oleh Khmilovskyi
2 years ago






Добрый день. Пакет gulp-sass обновился и требует чуть другой настройки (уже поместили в документацию)

Для исправления ошибки установите сначала пакет sass через команду

npm i sass —save-dev

Дальше в gulpfile измените аналогичную строку на

const sass        = require('gulp-sass')(require('sass'));

Иван Петриченко
2 years ago

Спасибо помогло!

Oleh Khmilovskyi
2 years ago

import gulp from 'gulp';
import browserSync from 'browser-sync';
import gulpSass from 'gulp-sass';
import dartSass from 'sass';
import cleanCSS from 'gulp-clean-css';
import autoprefixer from 'gulp-autoprefixer';
import rename from "gulp-rename";

const sass = gulpSass(dartSass);

gulp.task('server', function () {

    browserSync({
        server: {
            baseDir: "src"
        }
    });

    gulp.watch("src/*.html").on('change', browserSync.reload);
});

gulp.task('styles', function () {
    return gulp.src("src/sass/**/*.+(scss|sass)")
        .pipe(sass({ outputStyle: 'compressed' }).on('error', sass.logError))
        .pipe(rename({ suffix: '.min', prefix: '' }))
        .pipe(autoprefixer())
        .pipe(cleanCSS({ compatibility: 'ie8' }))
        .pipe(gulp.dest("src/css"))
        .pipe(browserSync.stream());
});

gulp.task('watch', function () {
    gulp.watch("src/sass/*.+(scss|sass)", gulp.parallel('styles'));
})

gulp.task('default', gulp.parallel('watch', 'server', 'styles'));

Вячеслав Заврин
1 year ago

3 ответов