见下文。我使用当前代码时遇到的问题是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'] );
答案 0 :(得分:4)
你必须使用 ?({"ip":"104.112.115.28","country_code":"US","country_name":"United States","region_code":"CA","region_name":"California","city":"Houston","zip_code":"90013","time_zone":"America/Los_Angeles","latitude":34.0453,"longitude":-118.2413,"metro_code":803});
吗?下面的gulpfile.js正在添加带有gulp-ruby-sass
的源图,并在使用源图保存.scss文件时更新浏览器。
gulp-sass