Gulp自動編譯增加CSS前綴

目的

自動編譯增加CSS前綴
【手動編譯】http://autoprefixer.github.io/

檔案架構

.
├── css
│   └── styles.css
└── index.html

安裝node.js

去node.js官網下載node.js

安裝gulp

終端機cd到目前編輯的資料夾,輸入以下指令

npm init

不管他回啥都按enter
接著再輸入以下指令

npm install gulp -g

新增gulpfile.js

.
├── css
│   └── styles.css
├── index.html
└── gulpfile.js

再回到terminal輸入指令

npm install gulp gulp-autoprefixer --save-dev

編輯gulpfile.js

在gulpfile.js新增以下程式碼

var gulp=require('gulp');
var autoprefixer=require('gulp-autoprefixer');

gulp.task('style', function(){
    gulp.src('css/style.css')
        .pipe(autoprefixer())
        .pipe(gulp.dest('build'))
})

再到terminal輸入指令

gulp styles

編譯完成後,會出現build資料夾,裡面有styles.css,內容是自動完成前綴的CSS檔案
往後只要把html的<link>換成dist的CSS就能引入有完整前綴的檔案

<link ref="stylesheet" href="dist/styles.css" />

watch 存檔同時編譯

在gulpfile.js下方新增以下程式碼

gulp.task('watch', function(){
    gulp.watch('css/styles.css', ['styles']);
})

再回到terminal

gulp watch

就能看到系統會隨時監控style.css,只要一偵測到存檔,就會即時做編譯

Line Awesome

用法

跟FontAwesome4完全一樣,只要引入CSS,用i tag加上class就能使用

  1. HTML <head>引入CSS資源
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/line-awesome@1.3.0/dist/line-awesome/css/line-awesome.css" />
  2. HTML <body>內使用<i>呼叫line awesome
    i.la.la-exclamation

Line Aewsome取代Font Awesome

當目前的專案已經使用Font Awesome開發一段時間時,
全數手動更換class成Line Awesome會很花成本,
這時可以使用互換性的Line Awesome CSS,
只要替換CSS,不用更換class,就能全數更新成Line Awesome的icon

  1. HTML <head>引入CSS資源
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/line-awesome@1.3.0/dist/font-awesome-line-awesome/css/all.css" />
  2. HTML <body>內繼續使用Font Awesome的<i>
    i.fa.fa-exclamation

參考資料

  • https://icons8.ru/line-awesome/howto
  • https://icons8.com/line-awesome