如何在使用Gulp的「指南針手錶」之後運行Autoprefixer？

我想利用運行autoprefixer後指南針監視我的scss文件的更改和更新與自動複製代碼的css文件，但我卡住了。我在gulpfile.js中爲compass和autoprefixer創建了一個gulp.task。當我使用下面的gulpfile.js運行「gulp server」時，一切正常，但沒有autoprefixing; scss文件通過指南針運行並作爲css文件輸出，並且browserSync實時重新加載瀏覽器中的頁面。任何幫助將不勝感激。如何在使用Gulp的「指南針手錶」之後運行Autoprefixer？

'use strict'; 

var gulp = require('gulp'); 
var jshint = require('gulp-jshint'); 
var stylish = require('jshint-stylish'); 
var paths = require('compass-options').paths(); 
var rename = require('gulp-rename'); 
var autoprefixer = require('gulp-autoprefixer'); 
var browserSync = require('browser-sync'); 
var shell = require('gulp-shell'); 

////////////////////////////// 
// Begin Gulp Tasks 
////////////////////////////// 
gulp.task('lint', function() { 
    return gulp.src([ 
     paths.js + '/**/*.js', 
     '!' + paths.js + '/**/*.js' 
    ]) 
    .pipe(jshint()) 
    .pipe(jshint.reporter(stylish)) 
}); 

////////////////////////////// 
// Compass Task 
////////////////////////////// 
gulp.task('compass', function() { 
    return gulp.src(paths.sass + '/**/*') 
    .pipe(shell([ 
     'bundle exec compass watch --time' 
    ])); 
}); 

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

////////////////////////////// 
// Watch 
////////////////////////////// 
gulp.task('watch', function() { 
    gulp.watch(paths.js + '/**/*.js', ['lint']); 
}); 

////////////////////////////// 
// BrowserSync Task 
////////////////////////////// 
gulp.task('browserSync', function() { 
    browserSync.init([ 
    paths.css + '/**/*.css', 
    paths.js + '/**/*.js', 
    paths.img + '/**/*', 
    paths.fonts + '/**/*', 
    paths.html + '/**/*.html', 
    ]); 
}); 

////////////////////////////// 
// Server Tasks 
////////////////////////////// 
gulp.task('server', ['watch', 'compass', 'browserSync']);

來源

2014-06-28 user2634959

的「前綴」任務不叫或設置爲另一個任務的依賴性。如果你總是希望autoprefixing在指南針之後發生，我會將它們包含在同一個任務中，可能命名爲'css'或類似。 –

就像@tmack提到的你必須在同一個任務中使用autoprefixer。下面是從我的項目（我用gulp-compass編譯）的一個例子：

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

// Styles 
gulp.task('styles', function() { 
    return gulp.src(['src/styles/main.scss']) 
    .pipe(compass({ 
     sass  : 'src/styles', 
     css  : 'dist/styles', 
     logging : false, 
     comments : false, 
     style : 'expanded' 
    })) 
    .pipe(autoprefixer('last 2 version', 'safari 5', 'ie 8', 'ie 9', 'ff 17', 'opera 12.1', 'ios 6', 'android 4')) 
    .pipe(gulp.dest('dist/styles')); 
});

僑拉爾夫

來源

2014-06-30 10:15:36 RWAM

如何在使用Gulp的「指南針手錶」之後運行Autoprefixer？

回答

相關問題