我们如何在“罗盘观察”之后运行Autoprefixer?使用Gulp? [英] How can we run Autoprefixer after "compass watch" using Gulp?
问题描述
我想充分利用 autoprefixer 在罗盘之后监视对我的scss文件所做的更改,并使用自动复制的代码更新css文件,但我被卡住了。我在gulpfile.js中为compass和autoprefixer创建了一个gulp.task。当我使用下面的gulpfile.js运行gulp server时,一切正常,但没有autoprefixing; scss文件通过指南针运行并作为css文件输出,并且browserSync实时重新加载浏览器中的页面。任何帮助将不胜感激。
I want to take advantage of running autoprefixer after compass watches for changes to my scss files and update the css file with the autoprefixed code, but I'm stuck. I created a gulp.task in gulpfile.js for compass and autoprefixer. When I run "gulp server" using the gulpfile.js below everything works but no autoprefixing; the scss files are run through compass and output as a css file and browserSync live-reloads the page in the browser. Any help would be greatly appreciated.
'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']);
推荐答案
像@tmack提到你必须使用autoprefixer任务。以下是我的一个项目的示例(我使用 gulp-compass 进行编译):
Like @tmack mentioned you must use autoprefixer in the same task. Here is an example from one of my projects (I use gulp-compass for compiling):
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'));
});
Ralf
Ciao Ralf
这篇关于我们如何在“罗盘观察”之后运行Autoprefixer?使用Gulp?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!