A
A
Alex Ozerov2021-04-23 16:00:17
gulp.js
Alex Ozerov, 2021-04-23 16:00:17

Why doesn't gulp add prefixes?

Perhaps I made a mistake in the galp settings, but for some reason galp does not add prefixes for css.

gulpfile

const imagemin  = require('gulp-imagemin')
const terser    = require('gulp-terser');
const concat    = require('gulp-concat')
const sourcemap = require('gulp-sourcemaps')
const cssnano   = require('cssnano')
const autoprefixer = require('autoprefixer')
const cssmedia = require('group-css-media-queries')
const sass = require('gulp-sass')
const postcss = require('gulp-postcss')
const {src, series, parallel, dest, watch} = require('gulp');

const path = {
    source: {
        html: 'src/*.html',
        img: 'src/img/*',
        js: 'src/js/**/*.js',
        scss: 'src/scss/**/*.scss'
    },
    build: {
        css: 'dist/css',
        img: 'dist/img',
        js: 'dist/js',
    }
}


function html(){
    return src(path.source.html).pipe(dest('dist'))
}
function img(){
    return src(path.source.img)
        .pipe(imagemin({
            interlaced: true,
            progressive: true,
            optimizationLevel: 3,
            svgoPlugins: [
                {
                    removeViewBox: true
                }
            ]
        }))
        .pipe(dest(path.build.img))
}

function css(){
    return src(path.source.scss)
        .pipe( concat('style.css') )
        .pipe(
            sass({
                outputStyle: 'expanded'
            })
        )
        .pipe(
            postcss([
                autoprefixer({
                    overrideBrowserslist: ['last 5 versions'],
                    cascade: true
                }),
                cssnano()
                ]
            ) )
        .pipe(dest(path.build.css))
}

function js() {
    return src(path.source.js)
        .pipe(sourcemap.init())
        .pipe(concat('script.js'))
        .pipe(terser())
        .pipe(sourcemap.write('.'))
        .pipe(dest(path.build.js))
}
function watchTask(){
    return watch([path.source.html,path.source.scss, path.source.js, path.source.img], {interval: 1000}, parallel(html,css, js, img))
}

exports.html = html;
exports.img = img;
exports.js = js;
exports.css = css;
exports.default = series(parallel(html, img, js, css), watchTask);


package.json

{
"name": "grid_gulp",
"version": "1.0.0",
"description": "",
"main": "gulpfile.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"devDependencies": {
"autoprefixer": "^10.2.5",
"cssnano": "^5.0.1",
"group-css-media-queries": "^1.4.1",
"gulp": "^4.0.2",
"gulp-autoprefixer": "^7.0.1",
"gulp-concat": "^2.6.1",
"gulp-imagemin": "^7.1.0",
"gulp-postcss": "^9.0.0",
"gulp-sass": "^4.1.0",
"gulp-sourcemaps": "^3.0.0",
"gulp-terser": "^2.0.1",
"postcss": "^8.2.12"
},
"dependencies": {}
}

Answer the question

In order to leave comments, you need to log in

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question