gulp sassソースマップ

Question

同じCSS出力フォルダ内のSASSコンパイラへのソースマップの追加が必要です。これまでは、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 sourcemapsは、同じでその書き込みsourcemap後SASSを（）コンパイルフォルダ（ ''）

よろしく

Answer 2

私は毎日の5ヶ月以来、このタスクを使用しています

./sass/partial_folders/：dは正常に動作し、

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

}); 

はまた、すべてのファイル、縮小化を数え、製品版

Answer 3

一気-SASSのための完全なソリューション、マップのためにあなたにrequire('gulp-csso')をお勧めします

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

index.scss