Gulp выдает ошибку?

Question

[Sam Fises]

Здравствуйте помогите пожалуйста не могу понять почему возникает ошибка установил nodejs через brew потом установил
gulp npm install gulp -g

создал проект
mkdir Gus
cd Gus

npm init

установил ruby и phyton через brew

сохранил проект npm install gulp --save-dev

устоновил библиотеки npm install gulp-ruby-sass gulp-autoprefixer gulp-minify-css gulp-rename --save-dev

создал gulpfile.js,
написал это

var gulp = require('gulp'),
sass = require('gulp-ruby-sass'),
autoprefixer = require('gulp-autoprefixer'),
minifycss = require('gulp-minify-css'),
rename = require('gulp-rename');
gulp.task('styles', function() {
return gulp.src('sass/*.scss')
.pipe(sass({ style: 'expanded' }))
.pipe(autoprefixer('last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1'))
.pipe(gulp.dest('css'))
.pipe(rename({suffix: '.min'}))
.pipe(minifycss())
.pipe(gulp.dest('css'));
});

создал папку sass и файл style.scss
написал следующее
$color: #eee;
#box {
color : $color;
box-sizing: border-box;
}

запустил следующую команду:
gulp styles

выдает ошибку

Gus user$ gulp styles
[02:57:00] Using gulpfile ~/Desktop/Site/Gus/gulpfile.js
[02:57:00] Starting 'styles'...
[02:57:00] 'styles' errored after 9.28 ms
[02:57:00] TypeError: glob pattern string required
at new Minimatch (/Users/user/Desktop/Site/Gus/node_modules/minimatch/minimatch.js:116:11)
at setopts (/Users/user/Desktop/Site/Gus/node_modules/glob/common.js:118:20)
at new GlobSync (/Users/user/Desktop/Site/Gus/node_modules/glob/sync.js:40:3)
at Function.globSync [as sync] (/Users/user/Desktop/Site/Gus/node_modules/glob/sync.js:26:10)
at gulpRubySass (/Users/user/Desktop/Site/Gus/node_modules/gulp-ruby-sass/index.js:71:21)
at /Users/user/Desktop/Site/Gus/gulpfile.js:9:11
at taskWrapper (/Users/user/Desktop/Site/Gus/node_modules/undertaker/lib/set-task.js:13:15)
at bound (domain.js:415:14)
at runBound (domain.js:428:12)
at asyncRunner (/Users/user/Desktop/Site/Gus/node_modules/async-done/index.js:55:18)

Answer 1

[Пащук Илья]

Так бро смотри вот юзай!

const gulp = require('gulp'), // Подключаем Gulp
    cleanCSS = require('gulp-clean-css'),
    sass = require('gulp-sass'), // Подключаем Sass пакет
    autoprefixer = require('gulp-autoprefixer'),
    concat = require('gulp-concat'); // Подключаем библиотеку для объеденения файлов

let pathBuild = './dist/',  pathSrc = './src/';

gulp.task('sass', function () {
    return gulp.src(pathSrc + 'sass/**/*.+(sass|scss)')
        .pipe(sass({outputStyle: 'expanded'}).on('error', sass.logError))
        .pipe(autoprefixer({browsers: ['ie >= 9', 'last 2 version'], cascade: false}))
        .pipe(cleanCSS({compatibility: 'ie9'}))
        .pipe(gulp.dest(pathBuild + 'css'));
});

Comments

[Sam Fises]

Спасибо бро

[Пащук Илья]

Sam Fises, да не вопрос наслаждайся!)) Но это пример со старой версии Gulp, рекомендую юзай уже 4 версию!

Вот с 4 версии быстро сделанно на заметку:

const gulp = require('gulp'), // Подключаем Gulp
    cleanCSS = require('gulp-clean-css'),
    sass = require('gulp-sass'), // Подключаем Sass пакет
    pug = require('gulp-pug'), // Подключаем pug
    imagemin = require('gulp-imagemin'), // Подключаем библиотеку для работы с изображениями
    pngquant = require('imagemin-pngquant'), // Подключаем библиотеку для работы с png
    cache = require('gulp-cache'), // Подключаем библиотеку кеширования
    spritesmith = require('gulp.spritesmith'), // Подключаем библиотеку создания спрайтов
    merge = require('merge2'), // Подключаем merge
    autoprefixer = require('gulp-autoprefixer'),
    concat = require('gulp-concat'), // Подключаем библиотеку для объеденения файлов
    uglifyES = require('uglify-es'),
    composer = require('gulp-uglify/composer'),
    uglify = composer(uglifyES, console), // Подключаем js-минификатор
    order = require("gulp-order"),
    del = require('del');

let browserSync = require('browser-sync').create();
let pathBuild = './dist/',
    pathSrc = './src/',

    pathFonts = [
        pathSrc + 'fonts/**/*'
    ],

    libsJS = [
        './node_modules/slick-carousel/slick/slick.min.js',
        './node_modules/bootstrap/dist/bootstrap.js',
        './node_modules/bootstrap/js/dist/popover.js',
        './node_modules/bootstrap/js/dist/tooltip.js',
        './node_modules/bootstrap/js/dist/util.js',
        './node_modules/bootstrap/js/dist/modal.js',
        './node_modules/bootstrap/js/dist/dropdown.js',
        './node_modules/bootstrap-select/dist/js/bootstrap-select.js',
        './node_modules/js-image-zoom/js-image-zoom.js',
        './node_modules/jquery-typeahead/dist/jquery.typeahead.min.js',

        './node_modules/overlayscrollbars/js/OverlayScrollbars.js',
        './node_modules/overlayscrollbars/js/jquery.overlayScrollbars.min.js',
        './node_modules/simplebar/dist/simplebar.min.js',
        './node_modules/popper.js/dist/popper.js'
    ];

clean = () => {
    return del(['dist']);
};

scssBuild = () => {
    return gulp.src(pathSrc + 'sass/**/*.+(sass|scss)')
        .pipe(sass({outputStyle: 'expanded'}).on('error', sass.logError))
        .pipe(autoprefixer({cascade: false}))
        .pipe(gulp.dest(pathBuild + 'css'));
};

cleanCSSBuild = () => {
    return gulp.src(pathBuild + 'css/**.css')
        .pipe(cleanCSS({compatibility: 'ie9'}))
        .pipe(gulp.dest(pathBuild + 'css/'))
};

pugBuild = () => {
    return gulp.src('src/pug/*.+(jade|pug)')
        .pipe(pug({pretty: '\t'}))
        .pipe(gulp.dest('dist/'))

};

libs = () => {
    return gulp.src(libsJS)
        .pipe(gulp.dest(pathSrc + 'js/libs/'));
};

jsConcat = () => {
    return gulp.src(pathSrc + 'js/**/*.js')
        .pipe(order([
            "libs/*.js",
            "@begin.js",
            "modules/*.js",
            "main.js",
            "@end.js",
            "modulesOnlyJS/*.js",
        ]))
        .pipe(concat('main.js'))
        .pipe(gulp.dest(pathBuild + 'js'));
};

jsCompress = () => {
    return gulp.src(pathBuild + 'js/main.js')
        .pipe(uglify())
        .pipe(gulp.dest(pathBuild + 'js'))
};

imageBuild = () => {
    return gulp.src(pathSrc + 'img/**/*')
        .pipe(cache(imagemin({
            interlaced: true,
            progressive: true,
            svgoPlugins: [{removeViewBox: false}],
            use: [pngquant()]
        })))
        .pipe(gulp.dest('dist/img'));
};

fontsDev = () => {
    return gulp.src(pathFonts)
        .pipe(gulp.dest(pathBuild + 'fonts'));
};

sprite = () => {
    let spriteData = gulp.src('src/sprite/*.png').pipe(spritesmith({
        imgName: '../img/sprite.png',
        cssName: 'sprite.scss'
    }));
    let imgStream = spriteData.img
        .pipe(gulp.dest('src/img/'));
    let cssStream = spriteData.css
        .pipe(gulp.dest('src/sprite/'));
    return merge(imgStream, cssStream);
};

browserSyncStart = () => {
    browserSync.init({
        server: pathBuild
    });
};

browserSyncReload = (done) => {
    browserSync.reload();
    done();
};

browserSyncstream = (done) => {
    browserSync.stream();
    done();
};

watchScrFiles = (done) => {
    gulp.watch('src/sass/**/*.+(sass|scss)', gulp.series(scssBuild, cleanCSSBuild, browserSyncReload));
    gulp.watch('src/pug/**/*.+(jade|pug)', gulp.series(pugBuild, browserSyncReload));
    gulp.watch('src/js/**/*.js', gulp.series(jsConcat, jsCompress, browserSyncReload));
    gulp.watch('src/img/**/*', gulp.series(imageBuild, browserSyncReload));
    // gulp.watch('src/sprite/**/*.png', gulp.series(sprite));
    done();
};
const compressCssJs = gulp.parallel(cleanCSSBuild, jsCompress);
const watch = gulp.parallel(browserSyncStart, watchScrFiles);
const develop = gulp.series(clean, gulp.parallel(scssBuild, pugBuild, imageBuild, fontsDev, jsConcat), watch);
const build = gulp.series(clean, scssBuild, cleanCSSBuild, gulp.parallel(pugBuild, imageBuild, fontsDev), jsConcat, jsCompress, watch);

exports.compres = compressCssJs;
exports.clear = gulp.series(clean);
exports.libs = gulp.series(libs);
exports.watch = watch;
exports.dev = develop;
exports.default = build;

Вот еще смотри. Также ты можешь свой пакет и другими инструментами упаковывать, вот к примеру если не слышал parceljs.org

Answer 2

[Максим Погребной]

Проверьте autoprefixer, если не ошибаюсь то список браузеров пишется в массиве