Gulp：如何同时使用Browsersync、Sourcemaps、Autoprefixer和CSS Cleaner？

Question

Gulp：如何同时使用Browsersync、Sourcemaps、Autoprefixer和CSS Cleaner？

7

请看下面。我目前代码的问题是，Sourcemaps没有通过Browsersync注入。我是否漏了什么或者做错了什么？

参考： https://www.browsersync.io/docs/gulp/#gulp-sass-maps

// requirements
var gulp         = require('gulp');
var sass         = require('gulp-ruby-sass');
var browserSync  = require('browser-sync').create();
var prefix       = require('gulp-autoprefixer');
var rename       = require('gulp-rename');
var sourcemaps   = require('gulp-sourcemaps');
var cssclean     = require('gulp-clean-css');

// create sass tasks
gulp.task('sass', function() {
  return sass('assets/scss/style.scss', {sourcemap: true, style: 'compact'})
    .on('error', function (err) {
        console.error('Error!', err.message);
    })
    .pipe(rename({suffix: '.min'}))
    .pipe(cssclean())
    .pipe(prefix("last 2 versions", "> 1%", "ie 8", "Android 2", "Firefox ESR"))
    .pipe(sourcemaps.write('.'))
    .pipe(gulp.dest('assets/styles'))
    .pipe(browserSync.stream({match: '**/*.css'}))
});

gulp.task('serve', ['sass'], function() {

  browserSync.init({
    proxy: "localhost/portfolio2014",
    open:false
  });

  gulp.watch("assets/scss/**/*.scss", ['sass']);
  gulp.watch(["assets/styles/*.css", "site/**/*", "content/**/*", "assets/javascript/*.js"]).on('change', browserSync.reload);
});

// default task (just run gulp)
gulp.task('default', ['serve'] );

- gburning

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Duderino9000 · Accepted Answer

你是否必须使用 gulp-ruby-sass？下面的 gulpfile.js 使用 gulp-sass 添加了 sourcemaps，并在保存带有 sourcemaps 的 .scss 文件时更新浏览器。

        var gulp = require('gulp');
        var sass = require('gulp-sass');
        var browserSync = require('browser-sync').create();
        var prefix = require('gulp-autoprefixer');
        var rename = require('gulp-rename');
        var sourcemaps = require('gulp-sourcemaps');
        var cssclean = require('gulp-clean-css');

        // create sass tasks
        gulp.task('sass', function () {
            return gulp.src('assets/scss/test.scss')
                .pipe(sourcemaps.init())
                .pipe(sass())
                .pipe(rename({ suffix: '.min' }))
                .pipe(cssclean())
                .pipe(prefix("last 2 versions", "> 1%", "ie 8", "Android 2", "Firefox ESR"))
                .pipe(sourcemaps.write(''))
                .pipe(gulp.dest('assets/styles'))
                .pipe(browserSync.stream({ match: '**/*.css' }))
                .on('error', function (err) {
                    console.error('Error!', err.message);
                });
        });

        gulp.task('serve', ['sass'], function () {

            browserSync.init({
                proxy: "localhost/portfolio2014",
                open: false
            });

            gulp.watch("assets/scss/**/*.scss", ['sass']);
            gulp.watch(["assets/styles/*.css", "assets/javascript/*.js"]).on('change', browserSync.reload);
        });

        // default task (just run gulp)
        gulp.task('default', ['serve']);