gulp-autoprefixer不编译CSS3 [英] gulp-autoprefixer not compiling CSS3

问题描述

在我的gulpfile.js中

  gulp.task（'sass'，function（）{
 return gulp .src（'sass / screen.scss'）
 .pipe（sass（））
 .pipe（autoprefixer（'last 2 version'，'safari 5'，'ie 8'，'ie 9 '，'opera 12.1'，'ios 6'，'android 4'））
 .pipe（gulp.dest（'/'））; 
}）; 
 $ b $ gulp.task（'watch'，function（）{
 gulp.watch（'sass / ** / *。scss'，['sass']）; 
 }）; 
  

1）一切似乎设置正确。我的主要sass文件位于sass / screen.scss。我不知道为什么我必须重新声明从哪里看到的src，因为这已经在sass pipe中建立了。

2）我不确定是否我让我的autoprefixer正确设置或确切的参数意味着什么。例如，'最后2版'是指Safari 5，4.9，4.8？我找不到这方面的文档。

在这两种情况下，似乎autoprefixer都没有编译到screen.css。

在我的.scss中，我有一些转换，转换和框阴影，例如：

  .shadow {
 box-shadow：＃000 5px 5px 5px; 
 
  

解决方案

看起来你需要改变你的目标文件名。你想在哪里编译的CSS结束？如果你想在当前目录下的一个名为 screen.css 的文件中，然后改变 gulp.dest（'/'） to gulp.dest（'screen.css'）。

In my gulpfile.js

gulp.task('sass', function() {
  return gulp.src('sass/screen.scss')
    .pipe(sass())
    .pipe(autoprefixer('last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4'))
    .pipe(gulp.dest('/'));
});

gulp.task('watch', function() {
    gulp.watch( 'sass/**/*.scss', ['sass'] );
});

1) Everything seems set up correctly. My main sass file is located at sass/screen.scss. I'm not sure why I have to redeclare the src of where to watch since that's already being established in the sass pipe.

2) I'm not sure if I have my autoprefixer setup correctly or what the exact arguments mean. For example, 'last 2 version' refers to safari 5, 4.9, 4.8? I can't find documentation on this.

In both cases, it doesn't seem like the autoprefixer is compiling to screen.css.

In my .scss I have some transitions, transformations, and box-shadows such as:

.shadow {
    box-shadow: #000 5px 5px 5px;
}

解决方案

It looks like you need to change your destination filename. Where do you want the compiled css to end up? If you want it in the current directory in a file named screen.css, then change gulp.dest('/') to gulp.dest('screen.css').

这篇关于gulp-autoprefixer不编译CSS3的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！