gulp sass源地图

我需要帮助添加源地图到SASS编译器在同一个CSS输出文件夹。 到目前为止，我已经在gulpfile.js安装了gulp-sourcemaps模块，但是无法成功地将sourcemaps.write绑定为gulp.task。

任何帮助深表感谢 ：）

 var gulp = require('gulp'); var sass = require('gulp-sass'); var sourcemaps = require('gulp-sourcemaps'); var bs = require('browser-sync').create(); gulp.task('browser-sync', ['sass'], function() { bs.init({ server: { baseDir: "./" }, proxy: { target: "localhost:8080", // can be [virtual host, sub-directory, localhost with port] ws: true // enables websockets } }); }); gulp.task('sass', function() { return gulp.src('scss/**/*.scss') .pipe(sourcemaps.init()) .pipe(sass()) .pipe(sourcemaps.write('.')) .pipe(gulp.dest('assets/css')) .pipe(bs.reload({ stream: true })); }); gulp.task('watch', ['browser-sync'], function () { gulp.watch("scss/*.scss", ['sass']); gulp.watch("*.php").on('change', bs.reload); }); 

Answer 1

试试这个代码吞咽任务'sass'：

 gulp.task('sass', function() { return gulp.src('scss/**/*.scss') .pipe(sourcemaps.init()) .pipe(sass()) .pipe(sourcemaps.write('.')) .pipe(gulp.dest('assets/css')) .pipe(bs.reload({ stream: true })); }); 

第一个init源代码然后在同一个文件夹（'。'）中写入源代码之后编译sass（）

问候

Answer 2

我每天使用这个任务5个月，工作正常，

 const gulp = require('gulp'), autoprefixer = require('gulp-autoprefixer'), plumber = require('gulp-plumber'), sass = require('gulp-sass'), sourcemaps = require('gulp-sourcemaps'); var sassSourcePath = 'YourPath/scss/**/*.scss', cssDestPath = 'YourPath/css/'; gulp.task('sass', () => { return gulp .src(sassSourcePath) .pipe(plumber()) .pipe(sourcemaps.init()) .pipe(sass({outputStyle: 'compressed'}).on('error', sass.logError)) .pipe(sourcemaps.write({includeContent: false})) .pipe(sourcemaps.init({loadMaps: true})) .pipe(autoprefixer({ browser: ['last 2 version', '> 5%'] })) .pipe(sourcemaps.write('.')) .pipe(gulp.dest(cssDestPath)); }); 

还build议您的生产版本的require('gulp-csso')

Answer 3

一个完整的解决schemegulp-sass，map，统计所有文件，缩小：

./sass/partial_folders/index.scss

 @import 'base/_reset'; @import 'helpers/_variables'; @import 'helpers/_mixins'; @import 'helpers/_functions'; @import 'base/_typography'; etc.. 

./gulpfile.js

 var gulp = require('gulp'); var sass = require('gulp-sass'); var concat = require('gulp-concat'); var uglifycss = require('gulp-uglifycss'); var sourcemaps = require('gulp-sourcemaps'); gulp.task('styles', function(){ return gulp .src('sass/**/*.scss') .pipe(sourcemaps.init()) .pipe(sass().on('error', sass.logError)) .pipe(concat('styles.css')) .pipe(uglifycss({ "maxLineLen": 80, "uglyComments": true })) .pipe(sourcemaps.write('.')) .pipe(gulp.dest('./build/css/')); }); gulp.task('default', function(){ gulp.watch('sass/**/*.scss', ['styles']); })