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,只要一偵測到存檔,就會即時做編譯

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *