【Gulp】生成程式碼map以利除錯編譯

gulp-sourcemaps

在專案中打開終端機安裝gulp-sourcemaps、gulp-sass、sass套件(版本@1.62.0)

1

$ npm install gulp-sourcemaps gulp-sass sass@1.62.0

在gulpfile.js新增程式碼

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14


const gulp = require('gulp');
const sass = require('gulp-sass')(require('sass'));
const sourcemaps = require('gulp-sourcemaps');

gulp.task('sass', function(){
  return gulp
    .src('src/scss/**/*.*')
    .pipe(sourcemaps.init()) //sourcemaps初始化
    .pipe(
      sass().on('error',sass.logError)
    )
    .pipe(sourcemaps.write("./")) //在當前的目錄下，生成sourcemaps文件
    .pipe(gulp.dest('dist/css'))
});

在終端機執行指令

1

$ gulp sass

執行結果會在all.css旁自動新加入一個.map檔

you project
├─── node_modules/        
├─── dist/
│     │
│     └─── css/
│           │
│           ├─── all.css  
│           │   
│           └─── all.css.map  #自動生成的map檔
│  
├─── src/
│     └─── scss/
│           │
│           ├─── all.scss   
│           │
│           └─── helpers
│                 │
│                 └─── _variables.scss
│
├─── gulpfile.js          
├─── package-lock.json    
└─── package.json

回到gulpfile.js添加任務清單

1

gulp.task('default', gulp.series('sass'));

最後，在終端機執行gulp即可完成任務

1

$ gulp

gulp

【Gulp】生成程式碼map以利除錯編譯

node.js、npm、gulp、gulpfile、package.json、gulp-sourcemaps

【Gulp】生成程式碼map以利除錯編譯

node.js、npm、gulp、gulpfile、package.json、gulp-sourcemaps

gulp-sourcemaps

其他相關