我尝试使用gulp-sourcemaps为我的sass和js文件创建源映射,但sources: [ ... ]
中的路径始终只相对于源而不是目标目录。
我的项目结构如下:
project
|-- public/
| |-- css/
| | |-- main.scss
| | `-- dashboard.scss
| |-- js/
| | |-- dashboard/
| | | `-- dashboard.js
| | `-- app.js
| |-- index.html
| |-- app.min.js
| |-- app.min.js.map
| |-- style.css
| `-- style.css.map
`-- gulpfile.js
这些是我的两个任务:
gulp.task('sass', function() {
// only need main.scss because I'm using @import
return gulp
.src('./public/css/main.scss')
.pipe(sourcemaps.init())
.pipe(sass())
.pipe(rename('style.css'))
.pipe(sourcemaps.write('./'))
.pipe(gulp.dest('./public'));
});
gulp.task('uglify', function() {
return gulp
.src(['./public/js/app.js', './public/js/**/*.js'])
.pipe(sourcemaps.init())
.pipe(concat('app.concat.js'))
.pipe(uglify())
.pipe(rename('app.min.js'))
.pipe(sourcemaps.write('./'))
.pipe(gulp.dest('./public'));
});
运行这些任务后,地图文件如下所示:
{"version":3,"sources":"main.scss","dashboard.scss"], ... }
{"version":3,"sources":["app.js","dashboard/dashboard.js"], ... }
但我希望它们是相对于他们的实际目录
{"version":3,"sources":["css/main.scss","css/dashboard.scss"], ... }
{"version":3,"sources":["js/app.js","js/dashboard/dashboard.js"], ... }
那么我怎样才能得到理想的结果呢?我的配置有什么问题?
答案 0 :(得分:0)
要使用gulp-sourcemaps控制源映射文件中的源路径,您应该将options参数传递给sourcemaps.write命令,在该命令中为sourceRoot指定相对目录。例如:
<FrameLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<FrameLayout
android:id="@+id/camera_view"
android:layout_width="match_parent"
android:layout_height="match_parent">
</FrameLayout>
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/imgClose"
android:layout_gravity="right|top"
android:background="@android:drawable/ic_menu_close_clear_cancel"
android:padding="20dp"
android:visibility="invisible" />
<ImageButton
android:layout_width="98dp"
android:layout_height="98dp"
android:id="@+id/imgCapture"
android:layout_gravity="center_horizontal|bottom"
android:background="@android:drawable/ic_menu_camera"
android:padding="20dp"/>
&#13;
此代码段取自gulp-sourcemaps documentation。有关示例,请参阅此GitHub repository,其中我使用gulp-sourcemaps和gulp-typescript将生成的javascript源文件映射回打字稿文件。