1
我只是不能讓gulp-autoprefixer工作。我用轉換測試它,但是當我保存我的scss文件時,前綴不會顯示在我的css文件中。其他一切似乎都很好。gulp-autoprefixer不工作
這是我一飲而盡文件:
var gulp = require('gulp'),
plumber = require('gulp-plumber'),
rename = require('gulp-rename'),
autoprefixer = require('gulp-autoprefixer'),
imagemin = require('gulp-imagemin'),
cache = require('gulp-cache'),
sass = require('gulp-sass'),
browserSync = require('browser-sync');
gulp.task('browser-sync', function() {
browserSync({
server: {
baseDir: "./"
}
});
});
gulp.task('bs-reload', function() {
browserSync.reload();
});
gulp.task('images', function(){
gulp.src('build/images/**/*')
.pipe(cache(imagemin({ optimizationLevel: 3, progressive: true, interlaced: true })))
.pipe(gulp.dest('images/'));
});
gulp.task('styles', function(){
gulp.src(['scss/**/*.scss'])
.pipe(plumber({
errorHandler: function (error) {
console.log(error.message);
this.emit('end');
}}))
.pipe(sass())
.pipe(autoprefixer('last 2 versions'))
.pipe(gulp.dest('css/'))
.pipe(browserSync.reload({stream:true}))
});
gulp.task('default', ['browser-sync'], function(){
gulp.watch("scss/**/*.scss", ['styles']);
gulp.watch("*.html", ['bs-reload']);
});
感謝大家的幫助!
UPDATE
var gulp = require('gulp'),
plumber = require('gulp-plumber'),
rename = require('gulp-rename'),
autoprefixer = require('gulp-autoprefixer'),
imagemin = require('gulp-imagemin'),
cache = require('gulp-cache'),
sass = require('gulp-sass'),
browserSync = require('browser-sync');
gulp.task('browser-sync', function() {
browserSync({
server: {
baseDir: "./"
}
});
});
gulp.task('bs-reload', function() {
browserSync.reload();
});
gulp.task('images', function(){
gulp.src('build/images/**/*')
.pipe(cache(imagemin({ optimizationLevel: 3, progressive: true, interlaced: true })))
.pipe(gulp.dest('images/'));
});
gulp.task('styles', function(){
gulp.src(['scss/**/*.scss'])
.pipe(plumber({
errorHandler: function (error) {
console.log(error.message);
this.emit('end');
}}))
.pipe(sass())
.pipe(autoprefixer({
browsers: ['last 2 versions'],
cascade: false
}))
.pipe(gulp.dest('css/'))
.pipe(browserSync.reload({stream:true}))
});
gulp.task('default', ['browser-sync'], function(){
gulp.watch("scss/**/*.scss", ['styles']);
gulp.watch("*.html", ['bs-reload']);
});
謝謝。我試圖在我的例子中實現它,但它只是不想工作。 – Tiago
您的autoprefixer管道是否與我的答案中顯示的內容匹配?你可以嘗試安裝和添加[gulp-debug](https://www.npmjs.com/package/gulp-debug),它可以讓你註銷任務中發生的事情。 – Toby
因爲我有更多的東西在同一個函數中進行,所以我有點不確定把新代碼放在哪裏。我現在有這樣的功能: gulp.task('styles',function(){gulp.src(['scss/**/*。scss']) .pipe(管道工({errorHandler:函數(誤差){ 的console.log(返回Error.message); this.emit( '結束');} })) .pipe(SASS()) .pipe(autoprefixer({ 瀏覽器:[」 ('css /')) .pipe(browserSync.reload({stream:true}))) } – Tiago