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 檔中 )

Continue reading “Gulp 的 sass-image 使用簡單範例”

VueJS 簡單教學: v-for 與選單產生

VueJS 中的 v-for 的 List Rendering 是一個強大的功能,可以方便將 JSON 資料轉換成 html 內容。

例如以下資料是由 API 或其他 JS 產生的,要用來製作選單 ( 用 Javascript 來動態產生選單 )

items: [
  {name: "選單1", href: "https://tree.rocks/"},
  {name: "選單2", href: "https://www.apple.com/"},
  {name: "選單3", href: "https://github.com/"}
]

 

那麼可以放入 Vue JS 中

new Vue( {
  el: '#tree',
  data: {
  	items: [
    	{name: "選單1", href: "https://tree.rocks/"},
      {name: "選單2", href: "https://www.apple.com/"},
      {name: "選單3", href: "https://github.com/"}
    ]
  }
} );

在加點 html

<div id="tree">
  <div class="menu_item" v-for="item in items" >
    <a v-bind:href="item.href" >{{ item.name }}</a>
  </div>
</div>

 

就可以生成網頁了 ( 如下圖 )

 

範例網頁:
https://jsfiddle.net/Seachaos/w8ygx1dy/