Gulp自动前缀不工作

cld4siwp 于 2022-12-16 发布在 Gulp

关注(0)|答案(5)|浏览(221)

我无法让自动前缀工具与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(''))更改为特定目录（就像这个答案所建议的那样），但没有成功。

我很感激你能提供的任何帮助。

更新

我想指出我对自动前缀添加不透明前缀的天真，它显然没有。*

gulp

来源：https://stackoverflow.com/questions/28074093/gulp-autoprefixer-not-working

5条答案

按热度按时间

xsuvu9jc1#

这个文件：

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}

所以，我不知道我做了什么不同，除了我列出我的浏览器不同。但我想你已经尝试删除这些等。

赞(0）回复(0）举报 2022-12-16

o2gm4chl2#

将浏览器放在数组中，而不是作为参数，应该可以这样做：

.pipe(autoprefixer({
    overrideBrowserlist: ['last 2 version', 'safari 5', 'ie6', 'ie7', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4']
})

并且您可以通过将其设置为true或false cascade: false来添加级联

赞(0）回复(0）举报 2022-12-16

v1l68za43#

我知道不久前有人问过这个问题，但我偶然发现了一个类似的问题。
下面是我解决这个问题的方法：
1.将browserlist条目添加到package.json：

{
"browserslist": [
    'last 2 versions', 
    'safari 5', 
    'ie6', 
    'ie7', 
    'ie 8',
    'ie 9', 
    'opera 12.1', 
    'ios 6', 
    'android 4'
  ]
}

1.安装autoprefixer
npm i --save-dev autoprefixer
1.安装postcss
npm i --save-dev postcss
1.将gulpfile.js中的管道修改为：

gulp.task('sass', function() {
    return gulp.src('scss/*.scss')
        .pipe(sass({errLogToConsole: true}))
        .pipe(postcss([autoprefixer()]))
        .pipe(minifycss())
        .pipe(gulp.dest(''))
        .pipe(plumber({
            errorHandler: onError
        }))
        .pipe(livereload(server));
});

赞(0）回复(0）举报 2022-12-16

y1aodyip4#

这应该行得通。

var gulp = require('gulp');
var autoprefixer = require('gulp-autoprefixer');

gulp.task('styles', function(){
    return gulp.src('css/styles.css')
   .pipe(autoprefixer('last 2 versions'))
   .pipe(gulp.dest ('build'));
});

gulp.task('watch', function(){
    gulp.watch('css/styles.css', gulp.series(['styles']));
});

赞(0）回复(0）举报 2022-12-16

xwmevbvl5#

我看到的第一件事是：

.pipe(autoprefixer('last 2 versions'))

语法上的一个小变化：

.pipe(autoprefixer('last 2 version'))

除此之外，我还成功地将编译好的sass通过管道传输到目的地，然后运行自动前缀。

.pipe(sass())
.pipe(gulp.dest(''))
.pipe(autoprefixer())

赞(0）回复(0）举报 2022-12-16

我来回答

Gulp自动前缀不工作

5条答案

相关问题

热门标签

最新问答