넙치 소스 맵

Question

동일한 CSS 출력 폴더에 SASS 컴파일러에 소스 맵을 추가하는 데 도움이 필요합니다. 지금까지 안에 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

는 꿀꺽 꿀꺽 작업 '말대꾸'에 대한이 코드를보십시오 :

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

먼저 초기화 sourcemaps는 동일한에 대한 쓰기 sourcemap 후 말대꾸를() 컴파일 폴더 ('.')

감사

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

꿀꺽 - 말대꾸, 맵에 대한 완벽한 솔루션을 당신에게 require('gulp-csso') 추천, 잘 작동 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']); 
})