CSS   发布时间:2022-04-17  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了css – Gulp Autoprefixer不工作大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
我无法让Autoprefixer与Gulp合作.我在CSS,渐变和变换中使用不透明度,并且没有任何供应商前缀出现.否则,其他一切正常.

这是我的gulp文件:

var gulp = require('gulp');

var lr = require('Tiny-lr');
var jshint = require('gulp-jshint');
var sass = require('gulp-sass');
var autoprefixer = require('gulp-autoprefixer');
var minifycss = require('gulp-minify-css');
var concat = require('gulp-concat');
var rename = require('gulp-rename');
var livereload = require('gulp-livereload');
var server = lr();
var plumber = require('gulp-plumber');

var onError = function (err) {  
  gutil.beep();
  console.log(err);
};

gulp.task('lint',function() {
    return gulp.src('js/all.js')
        .pipe(jshint())
        .pipe(jshint.reporter('default'));
});

gulp.task('sass',function() {
    return gulp.src('scss/*.scss')
        .pipe(sass({errLogToConsole: truE}))
        .pipe(autoprefixer('last 2 versions','safari 5','ie6','ie7','ie 8','ie 9','opera 12.1','ios 6','android 4'))
        .pipe(minifycss())
        .pipe(gulp.dest(''))
        .pipe(plumber({
            errorHandler: onError
        }))
        .pipe(livereload(server));
});


gulp.task('scripts',function() {
    return gulp.src(['js/fittext.js','js/fitvids.js','js/snap-scroll.js','js/cycle-min.js','js/all.js','js/respond.js'])
        .pipe(concat('all.js'))
        .pipe(gulp.dest('js/min'))
        .pipe(rename('main.min.js'))
        .pipe(gulp.dest('js/min'))
        .pipe(plumber({
            errorHandler: onError
        }))
        .pipe(livereload(server));
});

gulp.task('watch',function() {
    livereload.listen();
    gulp.watch('**/*.php').on('change',livereload.changed);
    gulp.watch('js/*.js',['scripts']);
    gulp.watch('scss/**/*.scss',['sass']);  
});

gulp.task('default',['lint','sass','scripts','watch']);

>我搜索并尝试了各种解决方案,但无济于事.我也尝试将.pipe(gulp.dest(”))更改为特定目录(如this answer suggested),没有任何运气.

我感谢您提供的任何帮助.

*更新*

我想注意我在Autoprefixer上为不透明度添加前缀的天真,这显然不是.

解决方法

这个gulpfile:
var gulp = require('gulp');
var sass = require('gulp-sass');
var prefix = require('gulp-autoprefixer');
var minify = require('gulp-minify-css');
var plumber = require('gulp-plumber');

function onError(err) {
    console.log(err);
}

gulp.task('sass',function(){
    return gulp.src('src/style.scss')
        .pipe(sass())
        .pipe(prefix('last 2 versions'))
        .pipe(minify())
        .pipe(gulp.dest('css/'))
        .pipe(plumber({
            errorHandler: onError
        }))
});

有了这个scss:

body {
    opacity: .5;
    box-sizing: border-box;
    transform: scale(.5);
    display: flex;
}

生成此输出:

body{opacity:.5;box-sizing:border-box;-webkit-transform:scale(.5);-ms-transform:scale(.5);transform:scale(.5);display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex}

所以,我不确定我的做法与众不同,只是我以不同方式列出我的浏览器.但我想你已经尝试删除那些等.

大佬总结

以上是大佬教程为你收集整理的css – Gulp Autoprefixer不工作全部内容,希望文章能够帮你解决css – Gulp Autoprefixer不工作所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。