Sass sourcemaps установка глотка задача

Question

У меня есть дерзость глоток задача собрать свой первоначальный CSS:

var input = './sass/bootstrap/*.scss'; 
var output = './public/css'; 


var sassOptions = { 
    lineNumbers: true 
}; 

gulp.task('sass', function() { 
    return gulp 
     // Find all `.scss` files from the `stylesheets/` folder 
     .src(input) 
     .pipe(sourcemaps.init()) 
     .pipe(sass(sassOptions)) 
     .pipe(sourcemaps.write()) 
     .pipe(gulp.dest(output)); 
}); 

Затем в отдельном проекте у меня есть мои часы задача Минимизировать в CSS:

gulp.task('debug-css', function() { 
gulp.src([ 
     'assets/css/style.test.css', 
     'assets/css/other.css' 
    ]) 
    .pipe(concat('app.css')) 
    .pipe(cssmin()) 
    .pipe(rename({suffix: '.min'})) 
    .pipe(gulp.dest('./build/')); 
livereload.listen(); 
gulp.watch('assets/**/*.css', function() { 
    gulp.src([ 
      'assets/css/style.test.css', 
      'assets/css/other.css' 
     ]) 
     .pipe(concat('app.css')) 
     .pipe(cssmin()) 
     .pipe(rename({suffix: '.min'})) 
     .pipe(gulp.dest('./build/')) 
     .pipe(livereload()); 
}); 
}); 

Когда Я использую hrome dev tools, я не могу видеть частичные части Sass в любом месте, есть ли способ, которым я могу настроить исходные коды, чтобы я мог определить, какой css приходит из какого sass-файла?

Answer 1

Все хорошо с вашими исходными картами, вы должны попытаться отделить немного больше gulp.task и gulp.watch, которые вы создали, поэтому избегайте путать себя.

Я воссоздал ваш Gulpfile, добавив несколько полезных плагинов, вот суть:

https://gist.github.com/carlosbensant/2a3a36633a06a50dda775b2a8bde3958

Работа с Sourcemaps

Сказал, что, если вы хотите увидеть sourcemaps то время как вы На стадии разработки вам просто нужно запустить gulp; когда вы просто хотите развернуть свое приложение, вы должны запустить gulp css, чтобы удалить исходные карты в скомпилированный CSS (и, следовательно, сохранить файловое пространство).

Рекомендация

Попробуйте BrowserSync, через несколько лет, используя LiveReload, когда я использовал BrowserSync в первый раз, я не вернусь к LiveReload, потому что это делает намного больше, чем просто живой перезаряжания. Одна из самых крутых вещей - синхронизация между несколькими браузерами (и платформами).

Надеюсь, что это поможет!