gulp-sourcemaps将源指向错误的目录

时间:2015-06-25 10:09:55

标签: node.js gulp gulp-sourcemaps

我尝试使用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"], ... }

那么我怎样才能得到理想的结果呢?我的配置有什么问题?

1 个答案:

答案 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;
&#13;
&#13;

此代码段取自gulp-sourcemaps documentation。有关示例,请参阅此GitHub repository,其中我使用gulp-sourcemaps和gulp-typescript将生成的javascript源文件映射回打字稿文件。