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(''))
を特定のディレクトリ( この回答が提案されました など)に変更しようとしました。私はあなたが提供できるどんな助けにも感謝します。
*更新*
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}
そのため、ブラウザのリストが異なることを除いて、何をしているのか正確にはわかりません。しかし、私はあなたがそれらなどを削除しようとしたと思います。
これは、ブラウザを引数としてではなく配列に配置することで機能するはずです。
.pipe(autoprefixer({
browsers: ['last 2 version', 'safari 5', 'ie6', 'ie7', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'Android 4']
})
trueまたはfalseに設定することでカスケードを追加できますcascade: false
私はこの質問がしばらく前に尋ねられたことを知っていますが、私は同様の問題に遭遇しました。
これが私がそれを解決した方法です:
browserlist
エントリをpackage.json
に追加します。{
"browserslist": [
'last 2 versions',
'safari 5',
'ie6',
'ie7',
'ie 8',
'ie 9',
'opera 12.1',
'ios 6',
'Android 4'
]
}
autoprefixer
npm i --save-dev autoprefixer
postcss
npm i --save-dev postcss
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));
});
これはうまくいくはずです。
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']));
});