青菜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()); 
}); 
}); 

當我使用chrome開發工具，我無法在任何地方看到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，因爲它並不僅僅是重加載多了不少。它所做的最酷的事情之一是在多個瀏覽器（和平臺）之間進行同步。

希望有幫助！