将gulp-sourcemaps与gulp-csso和gulp-sass结合在一起

我试图让我的gulpfile.js这部分工作：

 gulp.task('compileSass', function() { return gulp.src(folders.src+'/scss/*scss') .pipe(sass()) .pipe(gulp.dest(folders.dest+'/css')); }); gulp.task('minifyStyles', ['compileSass'], function() { return gulp.src(folders.dest+'/css/style.css') .pipe(maps.init()) .pipe(minCss({ sourceMap: true })) .pipe(maps.write('./')) .pipe(rename('style.min.css')) .pipe(gulp.dest(folders.dest+'/css')); }); 

我想开发工具来显示.scss文件。 我不确定是否与rename()或者我在错误的时间调用了我的源代码，但是当我检查开发工具时，源代码始终是style.min.css 。

Answer 1

我没有看到你的任务的初始映射。 你需要调用这个两次，并适当地设置每个文档的 loadMaps 。 试试以下…

 gulp.task('compileSass', function() { return gulp.src(folders.src+'/scss/*scss') .pipe(maps.init()) /* `init` here */ .pipe(sass()) .pipe(gulp.dest(folders.dest+'/css')); }); gulp.task('minifyStyles', ['compileSass'], function() { return gulp.src(folders.dest+'/css/style.css') .pipe(maps.init({ loadMaps: true /* `init` again, load prior from sass */ })) .pipe(minCss({ sourceMap: true })) .pipe(maps.write('./')) .pipe(rename('style.min.css')) .pipe(gulp.dest(folders.dest+'/css')); });