Gulp 的 sass-image 使用簡單範例

前言

gulp 用來幫助/簡化我們完成很多前端程式所需的工作
今天簡單來說一下 gulp-sass-image 這個用途

整個範例可以在 Github 上看到
https://github.com/Seachaos/gulp-sass-image-example

安裝

其實有用 yarn 的話,直接下 yarn add gulp-sass-image 就搞定

使用

先說明一下,此範例專案的配置是

app/     原始 SCSS 與 圖檔資料
build/  最後要上線的資料夾 ( 編譯完成,下稱”目地資料夾” )

在 gulpfile.js 中加入

gulp.task('sass-image', () => {
  return gulp.src('app/images/*.+(jpg|png)') // 接受 jpg, png
    .pipe(sassImage({
        targetFile: 'image_data.scss',       // 處理完的 SCSS 檔名
        css_path: './app/css',               // CSS 檔案位置
        images_path: './app/images',         // image 檔案位置
        includeData: false,                  // 是否將 image 加入到 SCSS 中
    }))
    .pipe(gulp.dest('app/cache'));           // 處理後的 SCSS 檔放位置
});

includeData 特別說明:
其中如果  includeData 設成 true, 那麼圖檔就會被加入 SCSS 中
原本 image-url 改用  inline-image 的話,就不用再另外放置 image 資料夾到”目地資料夾了”
( 會變成將圖檔夾帶到 css 檔中 )

執行

gulpfile.js 完整請參考 :
https://github.com/Seachaos/gulp-sass-image-example/blob/master/gulpfile.js

在 Terminal 中先輸入

gulp sass-image

就會產生出 image_data.scss 在 app/cache 中
這個檔案可以用來 import ( SCSS 中的 @import )

例如

@import "../cache/image_data";

#something {
  width: image-width('test.png');
  background-image: image-url('test.png');
}

我們就會有了 image-width 來取得圖片寬度
image-url 用來轉換圖片位置
或是,上面提到的  inline-image  ( 前提是 includeData 有開 )

大該是這樣…

 

 

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.