為什麼gulp中的sourcemaps沒起作用

2021-09-19 05:26:40 字數 1089 閱讀 8370

在一些工作流工具中,gulp算是比較容易上手的了,雖然以前了解過gulp,但真正的實踐還是發現不少應用問題,比如這次,為什麼應用了gulp-sass/gulp-sourcemaps/gulp-autoprefixer卻無法獲取到css-scss的對映;

gulp-sass:將scss編譯成css,常用可配置引數有outputstyle;

plugins.sass().on('error', plugins.sass.logerror)
gulp-sourcemaps:在scss編譯過程中,新增對映關係,可以方便除錯;

在檔案流中需要兩條語句:

plugins.sourcemaps.init()

//如果要輸出sourcemaps檔案的話,可以在write(path)新增路徑;

plugins.sourcemaps.write()

gulp-autoprefixer:根據瀏覽器相容,新增瀏覽器所需要支援的字首;

plugins.autoprefixer()
第一種方式:拋棄了gulp-autoprefixer;

gulp.task('scss',function()).on('error', plugins.sass.logerror))

//這種寫法,autoprefixer不能載入sourcemaps中間,否則生不出map檔案;

//所以,我把它注釋掉,確保能輸出sourcemaps;

/*.pipe(plugins.autoprefixer().on('error', plugins.sass.logerror))

//這一句write()必須有;

.pipe(plugins.sourcemaps.write())

.pipe(plugins.autoprefixer())

.pipe(plugins.sourcemaps.write())

.pipe(gulp.dest(paths.outsytles))

.pipe(plugins.livereload());

});

原鏈結位址;

Gulp中的非同步

在gulp中如果有return,就是執行非同步操作,註冊轉換less的任務 gulp.task less function 註冊合併壓縮css檔案 gulp.task css less function pipe cssclean pipe gulp.dest dist css 註冊預設任務 gul...

linux shell 中的source指令說明

linux source命令 通常用法 source filepath 或 filepath 功能 使當前shell讀入路徑為filepath的shell檔案並依次執行檔案中的所有語句,通常用於重新執行剛修改的初始化檔案,使之立即生效,而不必登出並重新登入。例如,當我們修改了 etc profile...

Linux中source命令的用法

source命令 source命令也稱為 點命令 也就是乙個點符號 source命令通常用於重新執行剛修改的初始化檔案,使之立即生效,而不必登出並重新登入。用法 source filename 或 filename source命令除了上述的用途之外,還有乙個另外乙個用途。在對編譯系統核心時常常需要...