我们如何在“指南针手表”后使用Gulp运行Autoprefixer？

Question

我想在compass监视我的scss文件的更改并用autoprefixed代码更新css文件后，利用运行autoprefixer的优势，但我被卡住了。我在gulpfile.js中为compass和autoprefixer创建了一个gulp.task。当我使用下面的gulpfile.js运行“gulp服务器”时，一切正常，但没有自动刷新；scss文件通过compass运行并作为css文件输出，browserSync live将在浏览器中重新加载页面。任何帮助都将不胜感激。

'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']);

Answer 1

如@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'));
});

再见，拉尔夫