将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
。
我没有看到你的任务的初始映射。 你需要调用这个两次,并适当地设置每个文档的 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')); });